/* aib. — "The Movement" · house tokens v5, light-canonical, film styles */
:root{
  --canvas:#EEF1F4; --raised:#FFFFFF; --sunken:#E1E6EC;
  --ink-1:#1A2230; --ink-2:#4B5768; --ink-3:#5A6474;
  --hair:rgba(26,34,48,.12); --hair-strong:rgba(26,34,48,.28); --hair-trace:rgba(26,34,48,.07);
  --accent:#2A62C9;
  --display:"Hanken Grotesk","Inter","Helvetica Neue",Arial,sans-serif;
  --text:"Public Sans","Inter","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono","SF Mono",Menlo,monospace;
  --ease-house:cubic-bezier(.34,1.56,.64,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{background:var(--canvas)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  background:var(--canvas);color:var(--ink-1);font-family:var(--text);
  font-size:17px;line-height:1.6;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* the one texture — canvas grain 0.05 */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:80;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

::selection{background:var(--accent);color:var(--canvas)}

/* ---------- the persistent film canvas ---------- */
#film{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
#film-poster{position:fixed;inset:0;width:100%;height:100%;z-index:0;object-fit:cover;display:none}
.no-webgl #film{display:none}
.no-webgl #film-poster{display:block}

/* letterbox bars — the film's one drawn frame, S3 */
.letterbox::before,.letterbox::after{content:"";position:fixed;left:0;right:0;height:0;
  background:var(--ink-1);transition:height .6s var(--ease-house);z-index:70}
.letterbox::before{top:0}.letterbox::after{bottom:0}
.letterbox.is-cinema::before,.letterbox.is-cinema::after{height:9vh}

/* ---------- scenes ---------- */
main{position:relative;z-index:10}
.scene{position:relative}
.scene-sticky{position:sticky;top:0;height:100vh;display:grid;overflow:hidden}
.pad{padding-left:clamp(24px,5vw,72px);padding-right:clamp(24px,5vw,72px)}

/* scene 0 — accent opening (the one licensed full-bleed arrival) */
#opening{position:fixed;inset:0;z-index:60;background:var(--accent);
  display:flex;align-items:center;justify-content:center;gap:16px}
#opening .rule{width:12px;height:2px;background:var(--canvas)}
#opening .wordmark{font-family:var(--display);font-weight:500;font-size:22px;color:var(--canvas);letter-spacing:0}
#opening .slate{position:absolute;bottom:32px;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(238,241,244,.8)}

/* chrome */
.chrome{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;
  align-items:center;padding:20px clamp(24px,5vw,72px);mix-blend-mode:normal}
.chrome .mark{display:flex;align-items:center;gap:12px}
.chrome .rule{width:12px;height:2px;background:var(--accent)}
.chrome .wordmark{font-family:var(--display);font-weight:500;font-size:18px}
.chrome .slate{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.chrome.on-accent .slate{color:rgba(238,241,244,.85)}
.chrome.on-accent .wordmark{color:var(--canvas)}
.chrome.on-accent .rule{background:var(--canvas)}

/* scene slate row */
.slate-row{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between;
  padding:20px clamp(24px,5vw,72px);font-family:var(--mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-3);border-top:1px solid var(--hair)}

/* type roles */
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
h1,h2{font-family:var(--display);font-weight:300;color:var(--ink-1);text-wrap:balance}
h1{font-size:clamp(44px,4.8vw,76px);line-height:.94;letter-spacing:-.03em}
h2.display{font-size:clamp(34px,3.4vw,52px);line-height:.98;letter-spacing:-.025em}
.sub{max-width:34em;color:var(--ink-2)}
.sub strong{color:var(--ink-1);font-weight:500}

/* scene 1 */
#s1 .type{align-self:center;max-width:34em}
#s1 .sub{margin-top:40px}

/* scene 2 — manifest */
#s2 .manifest{margin-top:48px;border-top:1px solid var(--hair);max-width:34em}
#s2 .row{display:grid;grid-template-columns:8em 1fr;gap:24px;padding:14px 0;
  border-bottom:1px solid var(--hair);align-items:baseline}
#s2 .row .fig{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;
  font-size:17px;color:var(--ink-1)}
#s2 .row .read{font-size:15px;color:var(--ink-2)}
#s2 .manifest-line{margin-top:24px;color:var(--ink-2);font-style:normal}

/* scene 3 — escapement attribution */
#s3 .gate{align-self:end;margin-bottom:14vh;max-width:34em}
#s3 .attrib{margin-top:32px;font-family:var(--mono);font-size:13px;color:var(--ink-2)}
#s3 .attrib div{opacity:0;transform:translateY(8px);transition:opacity .5s ease-out,transform .5s var(--ease-house)}
#s3 .attrib.on div{opacity:1;transform:none}
#s3 .attrib div:nth-child(2){transition-delay:.35s}
#s3 .attrib div:nth-child(3){transition-delay:.7s}
#s3 .attrib b{font-weight:400;color:var(--ink-1)}

/* scene 4 — the repeater */
#s4 .repeater{align-self:center;display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);width:100%}
#s4 .journal{border-top:1px solid var(--hair-strong)}
#s4 .jrow{display:grid;grid-template-columns:6em 1fr auto;gap:16px;padding:12px 0;
  border-bottom:1px solid var(--hair);font-family:var(--mono);font-size:13px;
  font-variant-numeric:tabular-nums lining-nums;color:var(--ink-2);
  opacity:0;transform:translateY(14px)}
#s4 .jrow.on{opacity:1;transform:none;transition:opacity .45s ease-out,transform .45s var(--ease-house)}
#s4 .jrow .amt{text-align:right;color:var(--ink-1)}
#s4 .jtotal{display:grid;grid-template-columns:6em 1fr auto;gap:24px;padding:14px 0;
  font-family:var(--mono);font-size:15px;color:var(--ink-1);
  opacity:0;transform:translateY(10px)}
#s4 .jtotal.on{opacity:1;transform:none;transition:opacity .6s ease-out,transform .6s var(--ease-house)}
#s4 .jtotal .amt{text-align:right}
#s4 .strike-arc{position:fixed;left:50%;top:50%;width:78vmin;height:78vmin;transform:translate(-50%,-50%);
  pointer-events:none;z-index:5;opacity:0}
#s4 .strike-arc circle{fill:none;stroke:var(--hair-strong);stroke-width:1}
#s4 .strike-arc .ring{transform-origin:center;transform:scale(.2);opacity:0}

/* scene 5 — certificate */
#s5 .cert{max-width:60em;margin-top:64px;border-top:1px solid var(--hair-strong)}
#s5 .cline{display:grid;grid-template-columns:16em 1fr;gap:24px;padding:16px 0;
  border-bottom:1px solid var(--hair);align-items:baseline}
#s5 .cline .k{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
#s5 .cline .v{font-family:var(--mono);font-variant-numeric:tabular-nums lining-nums;font-size:15px;color:var(--ink-1)}
#s5 .cert-line{margin-top:32px;color:var(--ink-2)}
#s5 .hairline-draw{height:1px;background:var(--hair-strong);width:100%;
  transform:scaleX(0);transform-origin:left;transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
#s5 .hairline-draw.on{transform:scaleX(1)}

/* paper panel — where type crosses the movement it sits on canvas, not on metal */
.panel{background:var(--canvas);border:1px solid var(--hair);padding:28px 32px}
#s5 .cert{background:var(--raised);border:1px solid var(--hair);padding:8px 28px 4px}

/* scene 6 — crown */
#s6 .notes{align-self:center;max-width:34em}
#s6 .proposal{margin-top:40px;border:1px solid var(--hair-strong);background:var(--raised);
  padding:20px 24px;font-family:var(--mono);font-size:13px;color:var(--ink-2);max-width:30em}
#s6 .proposal .state{color:var(--accent)}
#s6 .proposal.disposed .state{color:var(--ink-1)}

/* scene 7 — door */
#s7 .door{align-self:center;text-align:left;max-width:36em}
#s7 .ctas{margin-top:48px;display:flex;gap:16px;flex-wrap:wrap}
.btn{font-family:var(--text);font-size:15px;font-weight:500;padding:14px 28px;border:1px solid transparent;
  cursor:pointer;text-decoration:none;display:inline-block}
.btn-primary{background:var(--accent);color:var(--canvas)}
.btn-tertiary{background:transparent;color:var(--ink-1);border-color:var(--hair-strong)}
footer{border-top:1px solid var(--hair);padding:24px clamp(24px,5vw,72px);
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}

.js a:focus-visible,.js .btn:focus-visible{outline:1.5px solid var(--accent);outline-offset:2px}

/* reveal gates — only when JS is present; content is readable without it */
.js [data-reveal]{opacity:0;transform:translateY(28px);
  transition:opacity .56s ease-out,transform .56s var(--ease-house)}
.js [data-reveal].on{opacity:1;transform:none}

/* reduced motion — the same film, gentler: no pinning trickery needed, canvas static */
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
  #s3 .attrib div,#s4 .jrow,#s4 .jtotal{opacity:1;transform:none;transition:none}
  .letterbox::before,.letterbox::after{transition:none}
}

/* mobile: pinned scenes shorten (scroll_len × 0.6) */
@media (max-width:768px){
  #s1{height:150vh}#s2{height:110vh}#s3{height:150vh}#s4{height:210vh}
  #s5{height:auto;min-height:100vh}#s6{height:120vh}#s7{min-height:100vh}
  #s4 .repeater{grid-template-columns:1fr}
  #s5 .cline{grid-template-columns:1fr;gap:8px}
  .scene-sticky{padding-top:88px;padding-bottom:64px}
  #s1 .type,#s7 .door{background:var(--canvas);border:1px solid var(--hair);padding:24px}
  #s2 .scene-sticky>div,#s3 .gate,#s6 .notes{background:var(--canvas);border:1px solid var(--hair);padding:20px}
  #s4 .repeater{background:var(--canvas);border:1px solid var(--hair);padding:20px}
  #s5 .pad{background:var(--canvas)}
  #s2 .scene-sticky>div,#s4 .repeater{align-self:start;margin-top:0}
}