/* ---- fx: intro, cursor, marquee, tilt, grain, ghost text ---- */
body{overflow-x:clip}

/* intro curtain */
.curtain{display:none;position:fixed;inset:0;z-index:100;place-items:center;background:var(--bg);clip-path:inset(0 0 0 0);transition:clip-path 1s cubic-bezier(.77,0,.18,1)}
.js .curtain{display:grid;place-items:center}
.curtain img{width:min(60vw,360px);filter:invert(1);opacity:0;animation:fade 1s .1s forwards}
.curtain.gone{clip-path:inset(0 0 100% 0)}
.js .hero h1 span{animation-delay:calc(var(--i)*70ms + 1300ms)}
.js .hero p{animation-delay:2.3s}
.js .cue{animation-delay:3s}

/* scroll progress */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;background:var(--accent);transform:scaleX(0);transform-origin:left}

/* film grain */
.grain{position:fixed;inset:-50%;z-index:50;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-5%,-2%)}80%{transform:translate(4%,4%)}100%{transform:translate(0,0)}}

/* ghost section words */
section{position:relative}
section[data-ghost]::before{content:attr(data-ghost);position:absolute;left:0;top:2rem;z-index:-1;font:900 clamp(8rem,28vw,24rem)/1 system-ui,sans-serif;text-transform:uppercase;white-space:nowrap;color:transparent;-webkit-text-stroke:1px #ffffff14;transform:translateX(calc(var(--p,0)*-30vw + 10vw));pointer-events:none}
main{position:relative;z-index:0}

/* headline letters */
.js h2 .ch{display:inline-block;opacity:0;transform:translateY(.8em) rotate(8deg);transition:opacity .6s,transform .8s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--i)*55ms + .15s)}
.js h2.in .ch{opacity:1;transform:none}

/* tilt + spotlight */
.grid button{position:relative;perspective:800px}
.grid button::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),#ffffff40,#0000 55%)}
.grid button:hover::after{opacity:1}
.grid img,.reels video{transition:transform .25s ease-out}

/* hero content follows mouse + fades on scroll */
.hero>div:not(.cue){will-change:transform,opacity}

@media (prefers-reduced-motion:reduce){
  .curtain,.grain{display:none}
  .js h2 .ch{opacity:1;transform:none}
  section[data-ghost]::before{transform:none}
}