/* RELENTIX — scroll + text motion layer (initial states gated behind html.mo so nothing hides without JS) */

/* ---------- scroll parallax (uses the individual `translate` property so it composes with existing transforms) ---------- */
.mo .aurora{translate:0 var(--py,0px)}
.mo .ph-num{translate:0 var(--py,0px)}
.mo .cta-band .wrap{translate:0 var(--py,0px)}
.mo .studio-band blockquote{translate:0 var(--py,0px)}
.mo .page-hero .wrap{translate:0 calc(var(--hs,0) * 70px);opacity:calc(1 - var(--hs,0) * 1.15)}
.mo .page-hero .tick{opacity:calc(1 - var(--hs,0) * 1.4)}

/* ---------- image reveal: masked unveil + settle zoom ---------- */
.mo .pc .im{overflow:hidden}
.mo .pc .im img{clip-path:inset(14% 10% 14% 10% round 18px);scale:1.22;transition:clip-path 1.4s var(--ease),scale 1.8s var(--ease)}
.mo .pc.m-in .im img{clip-path:inset(0 0 0 0 round 0);scale:1}

/* ---------- text: line rise on lead paragraphs ---------- */
.mo .lead.rv{filter:blur(6px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1.1s var(--ease)}
.mo .lead.rv.in{filter:blur(0)}

/* ---------- eyebrow: label draws its brackets in ---------- */
.mo .eyebrow::before,.mo .eyebrow::after{width:0;height:0}
.mo .eyebrow.m-in::before,.mo .eyebrow.m-in::after{width:10px;height:10px}
.mo .eyebrow.m-in:hover::before,.mo .eyebrow.m-in:hover::after{width:16px;height:16px}

/* ---------- numbers ---------- */
.stat b,.stat b small{font-variant-numeric:tabular-nums}

@media(prefers-reduced-motion:reduce){
  .mo .aurora,.mo .ph-num,.mo .cta-band .wrap,.mo .studio-band blockquote,.mo .page-hero .wrap{translate:none;opacity:1}
  .mo .pc .im img{clip-path:none;scale:1}
  .mo .lead.rv{filter:none}
}