/* ===== Umrnoma motion layer — load AFTER landing.css. Pairs with anim.js (GSAP 3.15) ===== */

/* 1. hide only what the entrance timeline reveals; anim.js removes .anim-pending (safety timer in <head> too) */
html.anim-pending .top,html.anim-pending .hero .lead,html.anim-pending .hero h1,html.anim-pending .hero .sub,
html.anim-pending .hero .btn,html.anim-pending .hero .revstack,html.anim-pending .hero .herorev,html.anim-pending .hero .vis,
html.anim-pending .co,html.anim-pending .ok{visibility:hidden}

/* 2. GSAP owns transform/opacity -> remove CSS transitions on those props (otherwise every GSAP frame is re-smoothed = lag) */
html.anim .rv{transition:none}
html.anim .btn{transition:background-color .18s,box-shadow .18s}
html.anim .btn.primary:hover,html.anim .btn.primary:active{transform:none}
html.anim .step .ill img{transition:none}
html.anim .step:hover .ill img{transform:none}
html.anim .pay a{transition:filter .15s}
html.anim .pay a:hover{transform:none}

/* 3. SplitText masks: room for Cormorant descenders/italics inside overflow:clip */
.ln-mask{padding:0 .06em .14em;margin:0 -.06em -.14em}
.wd{will-change:transform}

/* 4. hero book: replace the paint-heavy background-position + mix-blend sheen with a GPU-only band driven by GSAP */
html.anim .b-sheen{animation:none;background:none;mix-blend-mode:normal;overflow:hidden}
.b-sheen b{position:absolute;top:-25%;bottom:-25%;left:0;width:55%;background:linear-gradient(100deg,rgba(255,236,205,0) 0%,rgba(255,236,205,.06) 35%,rgba(255,242,222,.34) 50%,rgba(255,236,205,.06) 65%,rgba(255,236,205,0) 100%)}

/* 6. button shine (pseudo-free, so GSAP can drive it) */
.btn{position:relative;overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent}
.btn .shine{position:absolute;top:0;bottom:0;left:0;width:38%;pointer-events:none;z-index:0;background:linear-gradient(90deg,rgba(255,246,230,0),rgba(255,246,230,.42),rgba(255,246,230,0))}
.btn>span,.btn>i:not(.shine){position:relative;z-index:1}

/* 7. scroll progress hairline */
.goldline{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0);height:2px;z-index:20;pointer-events:none;background:linear-gradient(90deg,var(--gold),var(--acc));transform:scaleX(0);transform-origin:0 50%}

/* 8. price odometer + drawn gold frame */
.odo{display:inline-block;height:1.3em;line-height:1.3em;overflow:hidden;vertical-align:-.3em;margin-top:-.3em} /* 1.3em rows: Cormorant old-style digits overshoot 1em */
.odo-c{display:block;line-height:1.3em}
.pcard .pframe{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.pcard .pframe rect{fill:none;stroke:var(--gold);stroke-width:1;opacity:.55}
.pcard.drawing::before{opacity:0}
.pcard::before{transition:opacity .3s}

/* 9. FAQ: height animation needs padding instead of margin + JS-driven icon */
html.anim .faq details>p{margin-top:0;padding-top:8px;overflow:hidden}
html.anim .faq details[open] summary::after{transform:none}
html.anim .faq details.is-open summary::after{transform:rotate(45deg)}

/* 10. voice bubble on step 1 (optional accent) */
.vbub{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:8px;padding:8px 12px 8px 8px;border-radius:999px;background:rgba(255,251,245,.94);box-shadow:0 8px 20px rgba(60,20,10,.18);font:700 12px/1 var(--sans);color:var(--acc-d)}
.vbub .pl{width:26px;height:26px;border-radius:50%;background:var(--tg);display:flex;align-items:center;justify-content:center}
.vbub .pl::before{content:"";border-left:8px solid #fff;border-top:5px solid transparent;border-bottom:5px solid transparent;margin-left:2px}
.vbub .bars{display:flex;align-items:center;gap:2px;height:18px}
.vbub .bars i{width:2.5px;height:100%;border-radius:2px;background:var(--tg);transform:scaleY(.3);transform-origin:50% 50%}

/* 11. checkout: sliding segment pill + success ring */
.seg{position:relative}
.seg .seg-pill{position:absolute;top:4px;bottom:4px;left:0;width:0;border-radius:11px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12);z-index:0}
.seg button{position:relative;z-index:1}
html.anim .seg button.on{background:transparent;box-shadow:none}
.ok .ck{position:relative}
.ok .ck .ring{position:absolute;inset:0;border-radius:50%;border:2px solid #9DB59A;pointer-events:none}
html.anim .ok .ck svg{animation:none;stroke-dasharray:none;stroke-dashoffset:0}

/* 12. reduced motion: everything visible, no loops */
@media (prefers-reduced-motion:reduce){
  html.anim-pending .top,html.anim-pending .hero *,html.anim-pending .co,html.anim-pending .ok{visibility:visible}
  .goldline,.btn .shine,.b-sheen b{display:none}
}
/* 13. Lenis (desktop wheel only) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}