/* ============================================================
   INFINITUM — The Infinite Machine
   Scroll-driven 3D particle film (hero of the homepage).
   Layers: stage z-1 · shade z-2 · chapters z-10 · rail z-12 ·
   grain z-40 · header (styles.css) z-50 · loader z-100
   ============================================================ */

:root{
  --film-green:#3ddc84;
  --film-gold:#f0c674;
  --display:'Unbounded', var(--sans);
}

/* ---------- film grain ---------- */
.grain{
  position:fixed; inset:-50%; z-index:40; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%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");
  animation:grain 7s steps(10) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}10%{transform:translate(-3%,2%)}30%{transform:translate(2%,-4%)}
  50%{transform:translate(-4%,-2%)}70%{transform:translate(3%,3%)}90%{transform:translate(-2%,4%)}
}

/* ---------- preloader ---------- */
#film-loader{
  position:fixed; inset:0; z-index:100; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px;
  transition:opacity .7s ease, visibility .7s;
}
#film-loader.done{opacity:0; visibility:hidden}
#film-loader .mark{
  font-family:var(--display); font-weight:900; font-size:clamp(20px,3vw,30px);
  letter-spacing:.35em; text-indent:.35em; color:var(--text);
}
#film-loader .mark em{font-style:normal; color:var(--film-green)}
#film-loader .bar{width:min(320px,60vw); height:1px; background:#20262e; overflow:hidden}
#film-loader .bar i{display:block; height:100%; width:100%; background:linear-gradient(90deg,var(--film-green),var(--film-gold)); transform:scaleX(0); transform-origin:left}
#film-loader .sub{font-family:var(--mono); font-size:11px; color:var(--text-dim); letter-spacing:.25em; text-transform:uppercase}

/* ---------- 3D stage ---------- */
#film-stage{position:fixed; inset:0; z-index:1}
#film-stage canvas{display:block}
.film-shade{
  position:fixed; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 45%, rgba(11,12,16,.55) 100%),
    linear-gradient(180deg, rgba(11,12,16,.5), transparent 18%, transparent 82%, rgba(11,12,16,.6));
}

/* ---------- scroll track (invisible, provides film length) ---------- */
#film-track{position:relative; z-index:3; pointer-events:none}
#film-track .spacer{height:120vh}

/* ---------- chapters ---------- */
.chapter{
  position:fixed; inset:0; z-index:10; pointer-events:none;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 clamp(24px,6vw,90px);
  opacity:0; visibility:hidden;
}
.chapter .inner{max-width:640px}
.chapter.center{align-items:center; text-align:center}
.chapter.center .inner{max-width:none}
.chapter.right{align-items:flex-end}
.chapter.right .inner{text-align:right}

.overtitle{
  font-family:var(--mono); font-size:11px; letter-spacing:.35em; text-transform:uppercase;
  color:var(--film-green); margin-bottom:20px;
}
.overtitle .idx{color:var(--text-dim)}
h1.brand{
  font-family:var(--display); font-weight:900;
  /* sized so all 9 letters always fit on one line */
  font-size:clamp(24px,9.2vw,120px);
  letter-spacing:.02em; line-height:.95; white-space:nowrap; color:var(--text);
}
h1.brand .l{display:inline-block; opacity:0; transform:translateY(40px); filter:blur(12px)}
h1.brand em{font-style:normal; background:linear-gradient(120deg,var(--film-green),var(--film-gold)); -webkit-background-clip:text; background-clip:text; color:transparent}
.tagline{margin-top:26px; font-family:var(--mono); color:var(--text-dim); font-size:clamp(13px,1.4vw,16px); letter-spacing:.06em; opacity:0}
.tagline b{color:var(--text); font-weight:500}

h2.h-display{
  font-family:var(--display); font-weight:700;
  font-size:clamp(30px,4.6vw,58px); line-height:1.05; letter-spacing:.01em;
  margin-bottom:22px; color:var(--text);
}
h2.h-display em{font-style:normal; color:var(--film-gold)}
.chapter p.body{font-family:var(--mono); color:var(--text-dim); font-size:14px; line-height:1.8; letter-spacing:.03em; max-width:46ch}
.chapter p.body b{color:var(--text); font-weight:500}

.datarow{margin-top:28px; display:flex; gap:28px; flex-wrap:wrap}
.datum .v{font-family:var(--display); font-weight:700; font-size:24px; color:var(--film-green)}
.datum .k{font-family:var(--mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--text-dim); margin-top:6px}
.chapter.right .datarow{justify-content:flex-end}

/* scroll cue */
.scrollcue{
  position:fixed; bottom:34px; left:50%; transform:translateX(-50%); z-index:11;
  display:flex; flex-direction:column; align-items:center; gap:12px; opacity:0; transition:opacity .5s;
}
.scrollcue .t{font-family:var(--mono); font-size:10px; letter-spacing:.4em; text-transform:uppercase; color:var(--text-dim)}
.scrollcue .line{width:1px; height:44px; background:linear-gradient(180deg,var(--film-green),transparent); animation:cue 2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* progress rail */
.rail{
  position:fixed; right:clamp(16px,2.5vw,34px); top:50%; transform:translateY(-50%); z-index:12;
  display:flex; flex-direction:column; gap:14px; align-items:center;
}
.rail .node{width:6px; height:6px; border-radius:50%; background:#2a313b; transition:background .4s, box-shadow .4s}
.rail .node.on{background:var(--film-green); box-shadow:0 0 10px var(--film-green)}
.rail .stem{width:1px; height:26px; background:#2a313b}

/* chapter counter */
.counter{
  position:fixed; left:clamp(16px,2.5vw,34px); bottom:30px; z-index:12;
  font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--text-dim);
}
.counter b{color:var(--film-green); font-weight:500}

/* ---------- everything after the film scrolls over it ---------- */
#post-film{
  position:relative; z-index:20;
  background:linear-gradient(180deg, transparent, var(--bg) 16%);
  padding-top:14vh;
}

/* footer must also sit above the fixed canvas */
footer{position:relative; z-index:20; background:var(--bg)}

/* ============================================================
   CRYSTAL CARDS — glass treatment for the post-film sections
   (homepage only; --mx/--my are set by film.js for the
   pointer-tracked specular highlight)
   ============================================================ */
#post-film .card{
  position:relative; overflow:hidden; isolation:isolate;
  background:linear-gradient(150deg, rgba(255,255,255,.055), rgba(255,255,255,.015) 42%, rgba(var(--accent-rgb),.05));
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid transparent;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
  will-change:transform;
}
/* gradient crystal edge */
#post-film .card::before{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(160deg, rgba(255,255,255,.28), rgba(var(--accent-rgb),.16) 38%, rgba(255,255,255,.04) 60%, rgba(var(--accent-2-rgb),.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
/* pointer-tracked specular glow */
#post-film .card::after{
  content:''; position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,-30%),
    rgba(var(--accent-rgb),.14), rgba(var(--accent-2-rgb),.06) 40%, transparent 65%);
  opacity:0; transition:opacity .4s;
}
#post-film .card:hover{
  transform:translateY(-6px) scale(1.012);
  box-shadow:0 24px 50px -22px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--accent-rgb),.12), 0 0 44px -14px rgba(var(--accent-rgb),.35);
}
#post-film .card:hover::after{opacity:1}
/* sheen sweep on hover */
#post-film .card .sheen{
  position:absolute; top:-60%; bottom:-60%; width:44%; left:-70%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.09) 45%, rgba(255,255,255,.16) 50%, rgba(255,255,255,.09) 55%, transparent);
  transform:skewX(-18deg); pointer-events:none; z-index:1;
}
#post-film .card:hover .sheen{animation:sheen .9s ease forwards}
@keyframes sheen{to{left:130%}}
#post-film .card > *{position:relative; z-index:2}

/* icons get a crystal chip + glow */
#post-film .card .icon{
  background:linear-gradient(150deg, rgba(var(--accent-rgb),.18), rgba(var(--accent-rgb),.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 0 18px -6px rgba(var(--accent-rgb),.4);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s;
}
#post-film .card:hover .icon{
  transform:translateY(-2px) rotate(-4deg) scale(1.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 0 26px -6px rgba(var(--accent-rgb),.65);
}
#post-film .work-card .tags span{
  background:rgba(255,255,255,.03);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}

/* glass CTA band */
#post-film .cta-band{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg, rgba(var(--accent-rgb),.10), rgba(255,255,255,.03) 45%, rgba(var(--accent-2-rgb),.09));
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
#post-film .cta-band::before{
  content:''; position:absolute; width:520px; height:520px; border-radius:50%;
  background:radial-gradient(circle, rgba(var(--accent-rgb),.16), transparent 65%);
  top:-260px; left:-140px; pointer-events:none;
  animation:ctaOrb 11s ease-in-out infinite alternate;
}
@keyframes ctaOrb{to{transform:translate(60%,30%) scale(1.25)}}

/* why-us numbers glow crystal */
#post-film .why-num{
  background:linear-gradient(150deg, rgba(255,255,255,.06), rgba(var(--accent-rgb),.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}

/* when GSAP drives the reveals, neutralize the CSS transition system */
body.film-anim .reveal{opacity:1; transform:none; transition:none}

/* ---------- responsive: all chapter copy centers on small screens ---------- */
@media (max-width:720px){
  .rail{display:none}
  .chapter{padding:0 24px}
  .chapter, .chapter.right{align-items:center}
  .chapter .inner, .chapter.right .inner{text-align:center}
  .chapter .datarow, .chapter.right .datarow{justify-content:center}
  .chapter p.body{margin:0 auto}
}

/* ---------- motion toggle pill ---------- */
.motion-pill{
  position:fixed; bottom:22px; right:22px; z-index:70;
  font-family:var(--mono); font-size:11px; letter-spacing:.1em;
  color:var(--text-dim); cursor:pointer;
  background:rgba(11,12,16,.7); border:1px solid var(--border);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-radius:999px; padding:9px 16px;
  transition:color .25s, border-color .25s, opacity .25s;
  opacity:.55;
}
.motion-pill:hover{opacity:1; color:var(--text); border-color:rgba(var(--accent-rgb),.5)}
/* clear the chapter counter on narrow screens */
@media (max-width:720px){
  .motion-pill{bottom:auto; top:78px; right:14px}
}

/* ---------- reduced motion: film becomes calm static sections ---------- */
body.film-reduced #film-stage,
body.film-reduced .film-shade,
body.film-reduced #film-track,
body.film-reduced .scrollcue,
body.film-reduced .rail,
body.film-reduced .counter,
body.film-reduced .grain,
body.film-reduced #film-loader{display:none}
body.film-reduced .chapter{
  position:relative; inset:auto; opacity:1; visibility:visible;
  padding:12vh clamp(24px,6vw,90px);
}
body.film-reduced h1.brand .l{opacity:1; transform:none; filter:none}
body.film-reduced .tagline{opacity:1}
body.film-reduced #post-film{padding-top:0; background:var(--bg)}