/* Cinematic motion layer for The Clarity Agency (every page).
   Hidden "before" states apply only when <html> has .cine, which is set in <head>
   when motion is allowed. Without JS, with reduced motion, or if the animation
   library fails to load, every page renders exactly as designed. */

/* Soft film vignette on full-bleed photo heroes (static, always on) */
.hero:has(>img)::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse 120% 90% at 50% 38%,transparent 52%,rgba(2,23,38,.42) 100%)}

/* Split-word headings: visible words are masked; an unsplit copy carries the accessible name */
.cine-sr{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.cw{display:inline-block;overflow:hidden;vertical-align:top;padding:.1em .1em .14em 0;margin:-.1em -.1em -.14em 0}
.cwi{display:inline-block;will-change:transform}

/* Lenis smooth scroll */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}

/* ---------- First-frame states, revealed by cinema.js ---------- */
/* Older page-level fades: GSAP takes over, so their CSS transitions must not fight it */
.cine [data-fade],.cine [data-reveal]{opacity:0;transition:none!important}

/* Full-bleed photo hero (homepage) */
.cine .hero:has(>img) .wrap{opacity:0}
.cine .hero>img{transform:scale(1.14);transform-origin:50% 40%}
.cine .hero:has(>img) .row{border-top-color:transparent;position:relative}
.cine .hero:has(>img) .row::before{content:"";position:absolute;left:0;right:0;top:-1.5px;height:1.5px;background:rgba(251,252,254,.35);transform-origin:0 50%;transform:scaleX(var(--ln,1))}

/* Opening block on every other layout: split heroes, articles, confirmations, forms, blog, link cards */
.cine main :is(.art-head,.solo,.intake,.blog-hero,.hero:not(:has(>img))),.cine main.card{opacity:0}

/* Photos: hidden behind a curtain until revealed */
.cine main :is(.ph,.portrait,.art-hero,.art-hero-side,.feat-img,.post-img):has(img){overflow:hidden;clip-path:inset(100% 0 0 0)}
.cine main :is(.ph,.portrait,.art-hero,.art-hero-side):has(img) img{transform:scale(1.3)}

/* Blog cards rise in as you scroll */
.cine main .post{opacity:0}