/* Hatke motion layer — Apple-style, jewellery-flavoured */
/* 1. scroll-fill statement */
.jbt-statement{padding:120px var(--px) 40px;max-width:1100px;margin:0 auto}
.jbt-statement p{margin:0;font-size:clamp(30px,5.4vw,64px);line-height:1.1;font-weight:700;letter-spacing:-.035em;text-wrap:balance}
.jbt-statement .w{color:#c9c9ce;transition:color .25s}
.jbt-statement .w.on{color:var(--ink)}
.jbt-statement .w.on.g{color:var(--gold)}
/* 2. gold shimmer across heading when revealed */
html.jbt-m .section-head.jbt-on h2{background:linear-gradient(100deg,var(--ink) 40%,#c18a2c 50%,var(--ink) 60%);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:jbhShim 2.2s .3s ease-out 1 both}
@keyframes jbhShim{from{background-position:120% 0}to{background-position:-20% 0}}
/* 3. cursor spotlight on cards */
.module-grid>.card,.price-grid>*,.jbt-facts>div{position:relative;overflow:hidden}
.module-grid>.card::before,.price-grid>*::before,.jbt-facts>div::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(217,164,65,.22),transparent 70%)}
.module-grid>.card:hover::before,.price-grid>*:hover::before,.jbt-facts>div:hover::before{opacity:1}
/* 6. showcase rises in 3D as you scroll */
.real-showcase-stage{transform:perspective(1400px) rotateX(var(--jbh-rx,0deg)) scale(var(--jbh-s,1));transform-origin:50% 100%;will-change:transform}
@media(max-width:860px){.jbt-statement{padding-top:72px}}
/* 9. hero-adjacent: logo gem gently spins on hover */
.logo .mark{transition:transform .6s cubic-bezier(.2,.7,.2,1)}.logo:hover .mark{transform:rotate(360deg) scale(1.08)}
@media(prefers-reduced-motion:reduce){.jbt-statement .w{color:var(--ink)}.real-showcase-stage{transform:none}html.jbt-m .section-head.jbt-on h2{animation:none;-webkit-text-fill-color:currentColor;background:none}}