/* ===== Animation layer — all hidden-until-animated states are scoped under html.anim ===== */
/* Reduced-motion / no-JS users never enter html.anim, so they see the base site. */
html.anim body{ } /* hook for later modules */

/* Utility: elements the cinematic layer hides before animating in.
   IMPORTANT: only under html.anim, so reduced-motion is unaffected. */
html.anim [data-fade]{opacity:0}

/* Respect reduced motion explicitly even if a class slips through */
@media (prefers-reduced-motion: reduce){
  html [data-fade]{opacity:1 !important}
}
#scroll-progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent,#ff3b30);z-index:120;pointer-events:none}
html.anim.lenis,html.anim.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
html.anim .reveal{opacity:1;transform:none;transition:none} /* GSAP drives these now; neutralize base CSS */
html.anim .a3d-word{display:inline-block;overflow:hidden;vertical-align:top}
html.anim .a3d-word>span{display:inline-block;will-change:transform,filter}
html.anim .hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none}
html.anim .hero .container{position:relative;z-index:1}
.hero-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:54px 54px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 25% 35%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 25% 35%,#000 30%,transparent 75%);opacity:0}
.hero-glow{position:absolute;width:780px;height:780px;left:-160px;top:-240px;border-radius:50%;background:radial-gradient(circle,rgba(255,59,48,.20),transparent 60%);filter:blur(20px);opacity:0}
html.anim .hero__title .a3d-word>span{will-change:transform,filter}
#preloader{position:fixed;inset:0;z-index:200;display:none;align-items:center;justify-content:center;flex-direction:column;gap:22px;background:#0a0a0b}
html.anim:not(.preloaded) #preloader{display:flex}
#preloader .pre-word{font-family:var(--font-display,'Anton'),sans-serif;font-size:clamp(34px,7vw,72px);letter-spacing:.02em;color:#f4f4f5}
#preloader .pre-bar{width:min(280px,60vw);height:3px;background:#26262b;border-radius:3px;overflow:hidden;position:relative}
#preloader .pre-bar>i{display:block;height:100%;width:0;background:var(--accent,#ff3b30)}
html.anim .work__tile,html.anim .words__card,html.anim .service-card{position:relative}
html.anim .work__tile::before,html.anim .words__card::before,html.anim .service-card::before{
  content:"";position:absolute;inset:-2px;z-index:-1;border-radius:14px;
  background:linear-gradient(135deg,rgba(255,59,48,.0),rgba(255,59,48,.55),rgba(255,106,77,.0));
  transform:skewY(4deg) scale(.96);opacity:0;filter:blur(18px);transition:opacity .35s ease,transform .35s ease}
html.anim .work__tile:hover::before,html.anim .words__card:hover::before,html.anim .service-card:hover::before{opacity:.9;transform:skewY(4deg) scale(1.02)}
html.anim .work__open,html.anim .words__card,html.anim .service-card{transition:transform .3s ease}
html.anim .work__tile:hover .work__open{transform:translateY(-4px)}
html.anim .work__open::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(180px circle at var(--mx,50%) var(--my,50%),rgba(255,59,48,.18),transparent 60%)}
html.anim .work__open:hover::after{opacity:1}
html.anim .work__tile.is-leaving{opacity:0;transform:scale(.94)}
.timeline{list-style:none;padding:0;margin:24px 0 0;position:relative}
.timeline::before{content:"";position:absolute;left:13px;top:6px;bottom:6px;width:2px;background:var(--border,#232327)}
html.anim .timeline::after{content:"";position:absolute;left:13px;top:6px;width:2px;height:var(--h,0);background:var(--accent,#ff3b30);box-shadow:0 0 12px rgba(255,59,48,.6)}
.tl-step{position:relative;padding:0 0 26px 44px}
.tl-dot{position:absolute;left:7px;top:6px;width:14px;height:14px;border-radius:50%;background:#26262b;border:2px solid var(--border,#232327);z-index:1}
html.anim .tl-step.is-active .tl-dot{background:var(--accent,#ff3b30);border-color:var(--accent,#ff3b30);box-shadow:0 0 16px rgba(255,59,48,.7)}
.tl-card{border:1px solid var(--border,#232327);border-radius:12px;padding:20px;background:var(--surface,#141416);transition:transform .35s ease,border-color .35s ease,opacity .35s ease}
html.anim .tl-card{opacity:.5}
html.anim .tl-step.is-active .tl-card{opacity:1;transform:scale(1.03);border-color:var(--accent,#ff3b30)}
.tl-card h3{font-family:var(--font-heavy,'Archivo');font-weight:800;font-size:18px;margin:8px 0}
.tl-card p{color:var(--muted-2,#8b8b92);font-size:14px}
.tl-card .process__n{font-family:var(--font-display,'Anton');font-size:22px;color:var(--accent,#ff3b30)}
.marquee{overflow:hidden;border-block:1px solid var(--border,#232327);padding:18px 0;white-space:nowrap}
.marquee__row{display:inline-flex;gap:26px;align-items:center;font-family:var(--font-display,'Anton');font-size:26px;text-transform:uppercase;color:#2f2f34;will-change:transform}
.marquee__row span{color:#2f2f34}.marquee__row span:nth-child(odd){color:#6a6a72}
html.anim .marquee__row{animation:a3d-marquee 24s linear infinite}
html.anim .marquee:hover .marquee__row{animation-play-state:paused}
@keyframes a3d-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.marquee__row{animation:none}}
@keyframes a3d-pulse{0%,100%{box-shadow:0 0 0 1px var(--accent,#ff3b30) inset,0 0 0 rgba(255,59,48,0)}50%{box-shadow:0 0 0 1px var(--accent,#ff3b30) inset,0 0 26px rgba(255,59,48,.35)}}
html.anim .price-card--feature{animation:a3d-pulse 3.2s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.price-card--feature{animation:none}}
html.anim .faq__item>div.faq__panel{overflow:hidden}
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;z-index:130;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%);mix-blend-mode:difference}
.cursor-dot{width:7px;height:7px;background:#fff}
.cursor-ring{width:34px;height:34px;border:1.5px solid #fff;transition:width .2s,height .2s,background .2s}
.cursor-ring.is-hot{width:54px;height:54px;background:rgba(255,255,255,.12)}
@media (hover:none),(pointer:coarse){.cursor-dot,.cursor-ring{display:none}}
.grain{position:fixed;inset:0;z-index:115;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:overlay}
.vignette{position:fixed;inset:0;z-index:114;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.5))}
html.anim .contact-band{position:relative;overflow:hidden}
html.anim .contact-band .container{position:relative;z-index:1}
.aurora{position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;filter:blur(60px);opacity:.5}
.aurora span{position:absolute;width:46%;height:70%;border-radius:50%;background:radial-gradient(circle,rgba(255,59,48,.5),transparent 60%)}
.aurora span:nth-child(2){background:radial-gradient(circle,rgba(255,106,77,.4),transparent 60%)}
@media (prefers-reduced-motion: reduce){.aurora{display:none}}

#page-wipe{position:fixed;inset:0;z-index:210;background:var(--accent-strong,#d92d22);transform:scaleY(0);transform-origin:bottom;pointer-events:none}

/* ===== Showreel — default = static fallback (labeled poster tiles) ===== */
.showreel{padding-block:var(--pad-sec)}
.showreel .sr-stage{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,40px)}
.sr-eyebrow{display:block;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.sr-clips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sr-clip{position:relative;aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;border:1px solid var(--border)}
.sr-poster{position:absolute;inset:0;background:linear-gradient(135deg,var(--g1,#161618),var(--g2,#202024))}
.sr-frame{position:absolute;inset:0}
.sr-frame iframe{position:absolute;top:50%;left:50%;width:177.78vh;min-width:100%;height:56.25vw;min-height:100%;transform:translate(-50%,-50%);border:0;pointer-events:none}
.sr-clip::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(0deg,rgba(10,10,11,.88),transparent 55%)}
.sr-label{position:absolute;left:16px;right:16px;bottom:14px;z-index:3;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.sr-num{font-family:var(--font-display);font-size:13px;color:var(--accent);letter-spacing:.08em}
.sr-title{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:clamp(18px,2.2vw,26px);line-height:.95}
.sr-type{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim)}
.sr-watch{margin-top:12px;font-size:13px;padding:9px 16px}
.sr-dots{display:none}
@media (max-width:820px){.sr-clips{grid-template-columns:1fr;gap:12px}}

/* ===== Showreel — cinematic sticky/scroll mode (enabled by JS adding .sr-on) ===== */
.showreel.sr-on{height:340vh;padding:0;position:relative}
.showreel.sr-on .sr-stage{position:sticky;top:0;height:100vh;max-width:none;margin:0;padding:0;overflow:hidden}
.showreel.sr-on .sr-eyebrow{position:absolute;top:clamp(18px,5vh,48px);left:clamp(20px,6vw,80px);z-index:4;margin:0}
.showreel.sr-on .sr-clips{display:block;gap:0}
.showreel.sr-on .sr-clip{position:absolute;inset:0;aspect-ratio:auto;border:0;border-radius:0;opacity:0;will-change:opacity}
.showreel.sr-on .sr-clip::before{background:linear-gradient(90deg,rgba(10,10,11,.86),rgba(10,10,11,.4) 55%,rgba(10,10,11,.12)),linear-gradient(0deg,rgba(10,10,11,.72),transparent 42%)}
.showreel.sr-on .sr-label{left:clamp(20px,6vw,80px);right:auto;bottom:14vh}
.showreel.sr-on .sr-title{font-size:clamp(34px,6vw,72px)}
.showreel.sr-on .sr-watch{margin-top:18px;font-size:14px;padding:12px 20px}
.showreel.sr-on .sr-dots{display:flex;flex-direction:column;gap:12px;position:absolute;right:clamp(20px,5vw,60px);top:50%;transform:translateY(-50%);z-index:4;list-style:none;margin:0;padding:0}
.showreel.sr-on .sr-dots li{width:8px;height:8px;border-radius:50%;background:#3a3a40;transition:.3s}
.showreel.sr-on .sr-dots li.on{background:var(--accent);box-shadow:0 0 12px rgba(255,59,48,.7);transform:scale(1.3)}