/* ============================================================
   $GILTON — A NATURE DOCUMENTARY
   warm VHS · paper & amber · rounded cartoon type · viewfinder
   ============================================================ */

:root{
  --bg-0:#0a0906;
  --bg-1:#110e08;
  --bg-2:#181309;
  --card:#161209;
  --paper:#efe6d0;
  --ink:#1a1509;
  --line:#2e2717;
  --cream:#f4ecdc;
  --amber:#ffb347;
  --amber-deep:#e8931f;
  --muted:#a99e85;
  --dim:#6e6650;
  --green:#8fbf6f;
  --red:#e2574c;
  --sub:#ffe9a8;
  --font-title:'Titan One', 'Arial Rounded MT Bold', sans-serif;
  --font-body:'Outfit', system-ui, sans-serif;
  --font-mono:'Courier Prime', 'Courier New', monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg-0);
  color:var(--cream);
  font-family:var(--font-body);
  overflow-x:hidden;
  line-height:1.6;
}
body[data-state="loading"], body[data-state="intro"]{overflow:hidden}

::selection{background:var(--amber);color:#171207}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}

/* ---------- FX overlays : VHS ---------- */
.fx-grain{
  position:fixed;inset:-100px;z-index:9990;pointer-events:none;opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation:grain 0.8s steps(5) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}25%{transform:translate(-40px,30px)}
  50%{transform:translate(30px,-45px)}75%{transform:translate(-25px,-20px)}100%{transform:translate(0,0)}
}
.fx-vignette{position:fixed;inset:0;z-index:9989;pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 52%,rgba(8,5,0,.6) 100%)}
/* VHS tracking band sweeps up every few seconds */
.fx-scanlines{
  position:fixed;inset:0;z-index:9988;pointer-events:none;opacity:.06;
  background:repeating-linear-gradient(0deg,transparent 0 3px,#000 3px 4px);
}
.fx-scanlines::after{
  content:"";position:absolute;left:0;right:0;height:70px;top:110%;
  background:linear-gradient(180deg,transparent,rgba(255,244,214,.5) 40%,rgba(255,244,214,.9) 50%,rgba(255,244,214,.4) 60%,transparent);
  mix-blend-mode:overlay;filter:blur(1px);
  animation:tracking 8s linear infinite;
}
@keyframes tracking{
  0%,88%{top:110%;opacity:0}
  89%{top:110%;opacity:1}
  97%{top:-12%;opacity:1}
  98%,100%{top:-12%;opacity:0}
}

/* ---------- cursor ---------- */
#cursor,#cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);display:none}
@media (pointer:fine){
  body[data-cursor="on"]{cursor:none}
  body[data-cursor="on"] a, body[data-cursor="on"] button, body[data-cursor="on"] summary{cursor:none}
  body[data-cursor="on"] #cursor{display:block;width:9px;height:9px;background:var(--amber);
    border-radius:50%;box-shadow:0 0 12px var(--amber)}
  body[data-cursor="on"] #cursor-ring{
    display:block;width:30px;height:30px;border-radius:6px;
    border:2px solid rgba(255,179,71,.55);
    transition:width .25s,height .25s,border-color .25s,transform .25s;
  }
  body[data-cursor="on"] #cursor-ring.hot{width:46px;height:46px;border-color:var(--amber);
    transform:translate(-50%,-50%) rotate(45deg)}
}

/* ---------- buttons : sticker style ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--font-mono);font-size:.85rem;font-weight:700;letter-spacing:.1em;
  padding:.9em 1.7em;border-radius:12px;
  border:2px solid var(--ink);
  transition:transform .15s,box-shadow .15s,background .2s,border-color .2s,color .2s;
  white-space:nowrap;
}
.btn-primary{
  background:var(--amber);color:var(--ink);
  box-shadow:4px 4px 0 rgba(0,0,0,.85);
}
.btn-primary:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(0,0,0,.85)}
.btn-primary:active{transform:translate(1px,1px);box-shadow:2px 2px 0 rgba(0,0,0,.85)}
.btn-primary:disabled{opacity:.35;box-shadow:none;transform:none;cursor:default}
.btn-ghost{
  background:transparent;color:var(--cream);border-color:var(--line);
  box-shadow:4px 4px 0 rgba(0,0,0,.5);
}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber);transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 rgba(0,0,0,.5)}
.btn-ghost:disabled{opacity:.35;cursor:default}
.btn-sm{padding:.6em 1.2em;font-size:.74rem;box-shadow:3px 3px 0 rgba(0,0,0,.7)}
.ico{font-size:1.05em}

.chip{
  font-family:var(--font-mono);font-size:.74rem;letter-spacing:.1em;color:var(--muted);
  background:transparent;border:2px solid var(--line);border-radius:10px;padding:.55em 1.4em;
  transition:all .2s;font-weight:700;
}
.chip:hover{border-color:var(--amber);color:var(--amber)}
.chip.active{background:var(--amber);border-color:var(--ink);color:var(--ink);
  box-shadow:3px 3px 0 rgba(0,0,0,.7)}

/* ---------- typography ---------- */
.mega{
  font-family:var(--font-title);font-weight:400;
  font-size:clamp(3rem,9.5vw,8rem);line-height:.98;
  letter-spacing:.005em;text-transform:uppercase;
}
.big{
  font-family:var(--font-title);font-weight:400;
  font-size:clamp(1.9rem,5vw,3.8rem);line-height:1.06;
  text-transform:uppercase;letter-spacing:.005em;
}
.amber{color:var(--amber);text-shadow:3px 3px 0 rgba(0,0,0,.55)}
.dim{color:var(--dim)}
.down{color:var(--red)}
.up{color:var(--green)}
.flat{color:var(--amber)}

/* OSD — VHS on-screen display text */
.osd{
  font-family:var(--font-mono);font-weight:700;letter-spacing:.18em;
  color:var(--cream);text-shadow:2px 2px 0 rgba(0,0,0,.9);
}

/* ============================================================
   PRELOADER — insert the tape
   ============================================================ */
#preloader{
  position:fixed;inset:0;z-index:9000;background:var(--bg-0);
  display:flex;align-items:center;justify-content:center;text-align:center;
  transition:opacity .8s ease,visibility .8s;
}
#preloader::before{content:"▶ PLAY";position:absolute;top:2rem;left:2.4rem;
  font-family:var(--font-mono);font-weight:700;letter-spacing:.25em;color:var(--cream);
  text-shadow:2px 2px 0 #000;animation:osdBlink 1.6s steps(1) infinite}
#preloader::after{content:"SUN 4:12 PM";position:absolute;top:2rem;right:2.4rem;
  font-family:var(--font-mono);font-weight:700;letter-spacing:.25em;color:var(--cream);
  text-shadow:2px 2px 0 #000}
@keyframes osdBlink{0%,70%{opacity:1}71%,100%{opacity:.25}}
#preloader.done{opacity:0;visibility:hidden}
.pre-inner{
  display:flex;align-items:center;justify-content:center;gap:4rem;flex-wrap:wrap;
  padding:2rem;max-width:1100px;
}

/* ---- the cassette ---- */
.vhs{transform:rotate(-3deg)}
.vhs-shell{
  width:min(520px,88vw);background:#131009;border:3px solid #000;border-radius:10px;
  box-shadow:10px 12px 0 rgba(0,0,0,.6), inset 0 2px 0 rgba(244,236,220,.07);
  padding:1rem 1.2rem;
}
.vhs-window{
  display:flex;align-items:center;gap:.8rem;background:#0a0805;border:2px solid #000;
  border-radius:8px;padding:.7rem .9rem;margin-bottom:.9rem;
}
.spool{
  width:64px;height:64px;border-radius:50%;flex:0 0 auto;
  border:3px solid #2e2717;background:#181209;
  display:flex;align-items:center;justify-content:center;
  animation:spoolSpin 2.2s linear infinite;
}
.spool.rev{animation-direction:reverse}
@keyframes spoolSpin{to{transform:rotate(360deg)}}
.spool i{
  width:100%;height:100%;border-radius:50%;display:block;
  background:repeating-conic-gradient(#42351c 0 30deg, #181209 30deg 60deg);
  -webkit-mask:radial-gradient(circle,transparent 26%,#000 27% 62%,transparent 63%);
          mask:radial-gradient(circle,transparent 26%,#000 27% 62%,transparent 63%);
}
.tape-run{
  flex:1;height:12px;background:#050403;border:2px solid #1c1710;border-radius:4px;overflow:hidden;
}
#tape-fill{height:100%;width:0%;background:repeating-linear-gradient(90deg,#42351c 0 14px,#2c2411 14px 28px);
  transition:width .18s ease}
.vhs-label{
  display:flex;gap:1rem;align-items:center;background:var(--paper);border:2px solid #000;
  border-radius:4px;padding:.8rem 1rem;color:var(--ink);
  background-image:repeating-linear-gradient(0deg,transparent 0 26px,rgba(26,21,9,.12) 26px 28px);
}
.lbl-photo{width:74px;height:74px;object-fit:contain;flex:0 0 auto;
  filter:drop-shadow(2px 2px 0 rgba(0,0,0,.25))}
.lbl-text{display:flex;flex-direction:column;gap:.2rem;text-align:left}
.lbl-small{font-family:var(--font-mono);font-weight:700;font-size:.56rem;letter-spacing:.2em;color:#6e6146}
.lbl-text strong{font-family:var(--font-title);font-weight:400;font-size:1.5rem;line-height:1.05;
  text-transform:uppercase}
.lbl-hand{font-family:var(--font-body);font-style:italic;font-weight:300;font-size:.78rem;color:#4d4331}
.vhs-bottom{
  display:flex;justify-content:space-between;align-items:center;margin-top:.8rem;
  font-family:var(--font-mono);font-weight:700;font-size:.6rem;letter-spacing:.2em;color:var(--dim);
}
.barcode{
  flex:1;max-width:120px;height:16px;margin:0 1rem;
  background:repeating-linear-gradient(90deg,#4a4131 0 2px,transparent 2px 5px,#4a4131 5px 6px,transparent 6px 9px);
}

/* ---- rental side panel ---- */
.pre-side{
  display:flex;flex-direction:column;align-items:flex-start;gap:1.2rem;max-width:300px;text-align:left;
}
.rewind-sticker{
  font-family:var(--font-title);font-size:1rem;letter-spacing:.06em;color:var(--ink);
  background:var(--amber);border:2px solid var(--ink);border-radius:999px;padding:.4em 1.2em;
  transform:rotate(2deg);box-shadow:3px 3px 0 rgba(0,0,0,.6);text-transform:uppercase;
}
.pre-status-lines{
  display:flex;gap:1.2rem;align-items:baseline;
  font-family:var(--font-mono);font-weight:700;font-size:.72rem;letter-spacing:.18em;color:var(--muted);
}
#pre-pct{color:var(--amber)}
.pre-note{font-size:.88rem;color:var(--muted);line-height:1.7;font-weight:300}
.btn-play{font-size:1rem;padding:.8em 2.4em}
.mute-link{
  background:none;border:none;font-family:var(--font-mono);font-weight:700;font-size:.7rem;
  letter-spacing:.16em;color:var(--dim);border-bottom:2px dotted var(--dim);padding:0 0 .2em;
  transition:color .2s;
}
.mute-link:hover{color:var(--cream)}
.mute-link:disabled,.btn-play:disabled{opacity:.35;cursor:default}
@media(max-width:900px){
  .pre-inner{gap:2rem}
  .pre-side{align-items:center;text-align:center;max-width:420px}
  .vhs{transform:rotate(-2deg) scale(.95)}
}

/* ============================================================
   INTRO — the tape plays
   ============================================================ */
#intro{position:fixed;inset:0;z-index:8000;background:#000;overflow:hidden}
#intro.fade{animation:introFade 1.2s ease forwards}
@keyframes introFade{to{opacity:0;visibility:hidden}}
.intro-hud{
  position:absolute;top:0;left:0;right:0;z-index:20;display:flex;justify-content:space-between;
  padding:1.8rem 2.2rem;font-family:var(--font-mono);font-weight:700;font-size:.8rem;
  letter-spacing:.22em;color:var(--cream);
}
.intro-hud>div{text-shadow:2px 2px 0 #000}
.hud-rec .rec-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--red);
  margin-right:.5em;animation:osdBlink 1.4s steps(1) infinite}
.skip-btn{
  position:absolute;bottom:2.2rem;left:50%;transform:translateX(-50%);z-index:30;
  background:rgba(10,9,6,.7);border:2px solid var(--line);color:var(--muted);
  font-family:var(--font-mono);font-weight:700;font-size:.72rem;letter-spacing:.25em;
  padding:.7em 1.8em;border-radius:10px;transition:all .2s;
}
.skip-btn:hover{color:var(--cream);border-color:var(--muted)}

.shot{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:2rem;opacity:0;visibility:hidden;transition:opacity 1s ease,visibility 1s;
}
.shot.active{opacity:1;visibility:visible}
.shot-mono{font-family:var(--font-mono);font-weight:700;font-size:clamp(.85rem,2vw,1.1rem);
  letter-spacing:.2em;color:var(--muted);min-height:1.5em;text-shadow:2px 2px 0 #000}
.shot-mono::after{content:"▌";color:var(--amber);animation:caret .8s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
/* documentary narration — light, airy, italic. nothing like a token site. */
.shot-narr{
  font-family:var(--font-body);font-weight:300;font-style:italic;
  font-size:clamp(1.5rem,4vw,2.7rem);line-height:1.45;color:var(--cream);
  max-width:820px;letter-spacing:.01em;
  transform:translateY(10px);transition:transform 3.5s ease;
}
.shot.active .shot-narr{transform:translateY(0)}
.shot-narr .dim{font-style:normal}
.shot-caption{
  position:absolute;bottom:15%;left:0;right:0;
  font-family:var(--font-body);font-weight:300;font-style:italic;
  font-size:clamp(1.15rem,2.8vw,1.9rem);color:var(--cream);text-shadow:0 2px 20px #000;
}
.shot-blur{
  font-family:var(--font-title);font-weight:400;
  font-size:clamp(4rem,15vw,12rem);text-transform:uppercase;
  color:var(--cream);filter:blur(24px);opacity:.9;
  text-shadow:0 0 80px rgba(255,179,71,.7);
  transition:filter 3.2s ease,letter-spacing 3.2s ease;
}
.shot.active .shot-blur{filter:blur(5px);letter-spacing:.04em}
.shot-mega{font-family:var(--font-title);font-weight:400;
  font-size:clamp(2.6rem,9vw,7.2rem);line-height:1.02;text-transform:uppercase}
.shot-mega span{color:var(--amber);text-shadow:5px 5px 0 rgba(0,0,0,.6)}
.shot-yeah{font-family:var(--font-mono);font-weight:700;
  font-size:clamp(1.1rem,3vw,1.6rem);color:var(--sub);letter-spacing:.1em;
  text-shadow:2px 2px 0 #000}

/* filmstrip — scrolling frames of footage */
.strip-stage{position:absolute;left:0;right:0;top:50%;transform:translateY(-58%) rotate(-2deg);
  overflow:hidden;padding:0}
.strip{display:flex;width:max-content;background:#050403;
  border-top:2px solid #000;border-bottom:2px solid #000;
  animation:stripScroll 22s linear infinite}
@keyframes stripScroll{to{transform:translateX(-50%)}}
.frame{
  width:190px;flex:0 0 auto;padding:26px 7px;position:relative;background:#050403;
}
.frame::before,.frame::after{
  content:"";position:absolute;left:0;right:0;height:16px;
  background:repeating-linear-gradient(90deg,transparent 0 9px,#241f14 9px 12px,
    var(--cream) 12px 24px,#241f14 24px 27px,transparent 27px 36px);
  opacity:.85;
}
.frame::before{top:4px}
.frame::after{bottom:4px}
.frame-inner{
  border-radius:6px;background:#0b0906;
  border:1px solid #2c2515;height:150px;overflow:hidden;
}
.frame-inner img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.85) contrast(.96)}

/* ============================================================
   NAV
   ============================================================ */
#nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1rem 2rem;
  background:linear-gradient(180deg,rgba(10,9,6,.94),rgba(10,9,6,0));
  transition:background .3s;
}
#nav.solid{background:rgba(10,9,6,.94);backdrop-filter:blur(12px);
  border-bottom:2px solid var(--line)}
.nav-logo{display:flex;align-items:center;gap:.7rem;font-family:var(--font-title);
  font-weight:400;font-size:1.2rem;letter-spacing:.03em}
.nav-logo svg{width:36px;height:36px;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.7))}
.nav-logo img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.7))}
.nav-links{display:flex;gap:2rem;font-family:var(--font-mono);font-weight:700;
  font-size:.74rem;letter-spacing:.16em}
.nav-links a{color:var(--muted);transition:color .2s}
.nav-links a:hover{color:var(--amber)}
@media(max-width:860px){.nav-links{display:none}}

/* ============================================================
   HERO
   ============================================================ */
.section{position:relative;padding:9rem 2rem}
#hero{
  min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:8rem 2rem 0;overflow:hidden;
  background:linear-gradient(180deg,#0a0906 0%,#120d06 45%,#1d1307 70%,#241708 82%,#0f0b06 100%);
}
/* VHS OSD corners over the hero */
.hero-osd{position:absolute;inset:5.4rem 0 auto 0;z-index:4;display:flex;
  justify-content:space-between;padding:0 2.2rem;pointer-events:none}
.hero-osd span{font-size:.78rem}
.hero-osd .rec{color:var(--red)}
#sky-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero-inner{
  position:relative;z-index:2;display:grid;grid-template-columns:1.35fr .9fr;
  gap:3.5rem;align-items:center;max-width:1150px;width:100%;
}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.6rem;text-align:left}
.badge{
  font-family:var(--font-mono);font-weight:700;font-size:.7rem;letter-spacing:.24em;color:var(--ink);
  background:var(--paper);border:2px solid var(--ink);border-radius:8px;padding:.55em 1.4em;
  box-shadow:3px 3px 0 rgba(0,0,0,.7);transform:rotate(-1deg);
}
.hero-sub{max-width:560px;color:var(--muted);font-size:1.05rem;font-weight:300}
.hero-sub em{color:var(--amber);font-style:normal;font-weight:600}
.hero-cta{display:flex;gap:1.6rem;flex-wrap:wrap;align-items:center}
.hero-links{display:flex;flex-direction:column;gap:.35rem}
.hero-links a{
  font-family:var(--font-mono);font-weight:700;font-size:.74rem;letter-spacing:.14em;
  color:var(--muted);border-bottom:2px dotted var(--dim);padding-bottom:.15em;
  transition:color .2s,border-color .2s;width:max-content;
}
.hero-links a:hover{color:var(--amber);border-color:var(--amber)}

/* specimen field card — the hero stat block, as paper */
.specimen-card{
  position:relative;background:var(--paper);color:var(--ink);border-radius:6px;
  padding:1.3rem 1.4rem 1.6rem;transform:rotate(1.6deg);
  box-shadow:8px 10px 0 rgba(0,0,0,.5);
  font-family:var(--font-mono);
}
.specimen-card:hover{transform:rotate(.4deg)}
.specimen-card{transition:transform .3s ease}
.sc-head{
  font-weight:700;font-size:.64rem;letter-spacing:.22em;color:#6e6146;
  border-bottom:2px solid var(--ink);padding-bottom:.7rem;margin-bottom:1rem;
}
.sc-photo{
  position:absolute;top:1.1rem;right:1.2rem;width:64px;height:64px;
  background:#e2d6ba;border:2px solid var(--ink);border-radius:4px;
  display:flex;align-items:center;justify-content:center;transform:rotate(3deg);
}
.sc-photo svg{width:50px;height:50px}
.sc-photo img{width:54px;height:54px;object-fit:contain}
.sc-data{display:flex;flex-direction:column;gap:.55rem;margin-right:74px}
.sc-data>div{
  display:flex;justify-content:space-between;gap:1.2rem;align-items:baseline;
  border-bottom:2px dotted rgba(26,21,9,.25);padding-bottom:.35rem;
}
.sc-data dt{font-weight:700;font-size:.6rem;letter-spacing:.2em;color:#6e6146}
.sc-data dd{font-weight:700;font-size:.78rem;text-align:right}
.sc-data dd.down{color:#b23f35}
.sc-data dd.up{color:#4c7a3d}
.sc-stamp{
  position:absolute;bottom:2.4rem;right:1.2rem;
  font-family:var(--font-title);font-size:1.25rem;letter-spacing:.08em;color:#b23f35;
  border:3px solid #b23f35;border-radius:6px;padding:.15em .5em;
  transform:rotate(-8deg);opacity:.82;text-transform:uppercase;
}
.sc-note{
  display:block;margin-top:1.1rem;font-weight:700;font-size:.58rem;letter-spacing:.18em;
  color:#6e6146;
}
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;gap:2.4rem}
  .hero-copy{align-items:center;text-align:center}
  .specimen-card{max-width:380px;margin:0 auto}
}
.yard{position:relative;width:100%;max-width:1500px;margin-top:3rem;z-index:1;pointer-events:none}
.yard-svg{width:100%;height:auto}
.yard-gilton{animation:breathe 6s ease-in-out infinite;
  transform-box:fill-box;transform-origin:center bottom}
@keyframes breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.scroll-hint{
  position:absolute;bottom:1.6rem;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:.5rem;
  font-family:var(--font-mono);font-weight:700;font-size:.64rem;letter-spacing:.35em;color:var(--dim);
}
.scroll-hint i{width:2px;height:34px;background:linear-gradient(180deg,var(--amber),transparent);
  animation:scrollPulse 1.8s ease infinite}
@keyframes scrollPulse{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}}

/* ---------- ticker : broadcast crawl ---------- */
#ticker{
  position:relative;z-index:5;border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  background:var(--paper);overflow:hidden;padding:.7rem 0;transform:rotate(-.4deg) scale(1.01);
}
.ticker-track{display:flex;gap:3.2rem;white-space:nowrap;width:max-content;
  font-family:var(--font-mono);font-weight:700;font-size:.76rem;letter-spacing:.12em;color:#6e6146;
  animation:tick 40s linear infinite}
.ticker-track b{color:var(--ink);font-weight:700}
.ticker-track .amber{color:var(--amber-deep);text-shadow:none}
.ticker-track .down{color:#b23f35}
@keyframes tick{to{transform:translateX(-50%)}}

/* ============================================================
   CHAPTERS
   ============================================================ */
.chapter{max-width:1150px;margin:0 auto}
.section.alt{background:var(--bg-1)}
.chap-label{
  font-family:var(--font-mono);font-weight:700;font-size:.7rem;letter-spacing:.3em;color:var(--amber);
  display:inline-block;margin-bottom:1.4rem;border:2px solid rgba(255,179,71,.35);
  border-radius:8px;padding:.45em 1.1em;transform:rotate(-.6deg);
}
.chap-head{margin-bottom:3.5rem;max-width:900px}
.chap-head.center{margin-inline:auto;text-align:center}
.chap-sub{color:var(--muted);margin-top:1.4rem;font-size:1.02rem;max-width:720px;font-weight:300}
.chap-head.center .chap-sub{margin-inline:auto}
.chap-note{color:var(--muted);max-width:680px;margin:3rem auto 0;text-align:center;font-size:.98rem;
  font-weight:300;font-style:italic}

/* field reports (tweets) — filed evidence */
.tweet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.6rem}
.tweet{
  background:var(--card);border:2px solid var(--line);border-radius:14px;padding:1.6rem;
  transition:transform .3s,border-color .3s,box-shadow .3s;position:relative;
  box-shadow:5px 5px 0 rgba(0,0,0,.5);
}
.tweet::before{
  content:"EXHIBIT";position:absolute;top:-11px;left:1.2rem;
  font-family:var(--font-mono);font-weight:700;font-size:.56rem;letter-spacing:.25em;
  background:var(--paper);color:var(--ink);border:2px solid var(--ink);border-radius:6px;
  padding:.25em .8em;transform:rotate(-2deg);
}
.tweet:nth-child(2)::before{content:"EXHIBIT B";transform:rotate(1.5deg)}
.tweet:nth-child(1)::before{content:"EXHIBIT A"}
.tweet:hover{transform:translateY(-4px) rotate(.3deg);border-color:rgba(255,179,71,.5)}
.tweet-head{display:flex;gap:.8rem;align-items:center;margin-bottom:1rem}
.tweet-av{width:44px;height:44px;border-radius:10px;background:var(--bg-2);overflow:hidden;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--line)}
.tweet-av svg{width:34px;height:34px}
.tweet-av img{width:38px;height:38px;object-fit:contain}
.tweet-av.amberbg{background:rgba(255,179,71,.16)}
.tweet-head strong{display:block;font-size:.95rem}
.verified{color:var(--green);font-size:.8em}
.tweet-meta{font-family:var(--font-mono);font-weight:700;font-size:.66rem;color:var(--dim)}
.tweet p{color:var(--muted);font-size:.95rem;font-weight:300}
.tweet-foot{margin-top:1.2rem;font-family:var(--font-mono);font-weight:700;font-size:.66rem;
  color:var(--dim);letter-spacing:.08em}

/* beer chapter */
.beer-stage{display:flex;align-items:center;justify-content:center;gap:4rem;flex-wrap:wrap;position:relative}
.beer-glow{position:absolute;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,179,71,.14),transparent 65%);
  left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.beer-svg{width:130px;height:auto;filter:drop-shadow(6px 6px 0 rgba(0,0,0,.45));
  animation:beerFloat 7s ease-in-out infinite}
@keyframes beerFloat{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(-12px) rotate(1.5deg)}}
.beer-facts{display:flex;flex-direction:column;gap:1.8rem;text-align:left}
.fact label{font-family:var(--font-mono);font-weight:700;font-size:.64rem;letter-spacing:.26em;
  color:var(--dim);display:block}
.fact strong{font-family:var(--font-title);font-weight:400;
  font-size:clamp(2rem,4.6vw,3.2rem);line-height:1.15;display:block;
  text-shadow:3px 3px 0 rgba(0,0,0,.5)}
.fact span{font-family:var(--font-mono);font-weight:700;font-size:.66rem;letter-spacing:.12em;color:var(--muted)}

/* ============================================================
   PINNED SCENES
   ============================================================ */
.pin-wrap{position:relative;height:420vh}
.pin-wrap.short{height:320vh}
.pin-screen{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;
  background:var(--bg-0);padding:5rem 2rem 2rem;
}
.rug-stage{width:min(1150px,94vw)}
.rug-svg{width:100%;height:auto}
.rug-svg g{transition:opacity .5s ease,transform .8s ease}
.rug-captions{position:relative;height:5.6em;width:100%;max-width:780px;text-align:center}
.rug-cap{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;
  font-family:var(--font-body);font-weight:300;font-style:italic;
  font-size:clamp(1.15rem,2.9vw,1.9rem);line-height:1.4;
  opacity:0;transform:translateY(14px);
  transition:opacity .45s ease,transform .45s ease;
}
.rug-cap.on{opacity:1;transform:translateY(0)}
.rug-cap strong{font-family:var(--font-title);font-weight:400;font-style:normal;
  text-transform:uppercase;letter-spacing:.02em;font-size:1.15em}
.rug-cap .dim{display:block;font-size:.72em;color:var(--dim)}

/* chart scene */
.chart-stage{position:relative;width:min(1100px,94vw);height:min(52vh,480px);
  border:2px solid var(--line);border-radius:16px;background:rgba(0,0,0,.25)}
#chart-canvas{position:absolute;inset:0;width:100%;height:100%}
.chart-hud{
  position:absolute;top:1.1rem;left:1.4rem;display:flex;flex-direction:column;gap:.4rem;
  font-family:var(--font-mono);font-weight:700;letter-spacing:.08em;
}
#chart-pct{font-family:var(--font-title);font-weight:400;
  font-size:clamp(2.2rem,5.5vw,4rem);letter-spacing:.02em;text-shadow:4px 4px 0 rgba(0,0,0,.6)}
.chart-hud-label{font-size:.66rem;color:var(--dim);letter-spacing:.18em}
.chart-gilton{position:absolute;right:2%;bottom:0;width:clamp(130px,17vw,220px);
  filter:drop-shadow(4px 4px 0 rgba(0,0,0,.5))}
.chart-gilton svg{width:100%;height:auto}
.chart-gilton img{width:100%;height:auto;display:block;margin-bottom:-6%}
.chart-cap{
  font-family:var(--font-body);font-weight:300;font-style:italic;
  font-size:clamp(1.05rem,2.6vw,1.7rem);text-align:center;min-height:2.6em;max-width:800px;
  transition:all .3s;
}
.chart-cap.win{
  font-family:var(--font-title);font-style:normal;font-weight:400;text-transform:uppercase;
  font-size:clamp(1.8rem,5vw,3.4rem);color:var(--green);
  text-shadow:4px 4px 0 rgba(0,0,0,.6),0 0 50px rgba(93,209,138,.5);
  letter-spacing:.03em;
}

/* ============================================================
   VAULT — polaroid wall
   ============================================================ */
.vault-filters{display:flex;gap:.8rem;justify-content:center;margin-bottom:3rem;flex-wrap:wrap}
.vault-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:2rem 1.6rem;
  max-width:1200px;margin:0 auto;
}
.vcard{
  position:relative;border-radius:4px;overflow:visible;background:var(--paper);
  padding:10px 10px 0;aspect-ratio:1/1.14;
  display:flex;flex-direction:column;
  transition:transform .3s ease,box-shadow .3s;
  box-shadow:6px 8px 0 rgba(0,0,0,.45);
}
.vcard:nth-child(4n+1){transform:rotate(-2.2deg)}
.vcard:nth-child(4n+2){transform:rotate(1.6deg)}
.vcard:nth-child(4n+3){transform:rotate(-1deg)}
.vcard:nth-child(4n+4){transform:rotate(2.4deg)}
.vcard::before{
  content:"";position:absolute;top:-12px;left:50%;transform:translateX(-50%) rotate(-3deg);
  width:86px;height:26px;background:rgba(255,220,140,.5);border:1px solid rgba(0,0,0,.12);
  border-radius:2px;z-index:3;
}
.vcard:hover{transform:rotate(0) translateY(-8px) scale(1.03);z-index:5;
  box-shadow:10px 14px 0 rgba(0,0,0,.5)}
.vcard.hidden{display:none}
.vcard-art{flex:1;display:flex;align-items:center;justify-content:center;position:relative;
  overflow:hidden;border-radius:2px}
.vcard-art svg{width:46%;height:auto;filter:drop-shadow(3px 4px 0 rgba(0,0,0,.4))}
.vcard-art img.vcard-gilton{width:58%;height:auto;object-fit:contain;
  filter:drop-shadow(3px 4px 0 rgba(0,0,0,.4))}
.vcard-art img.vcard-full{width:100%;height:100%;object-fit:cover}
.vault-note-link{color:var(--amber);border-bottom:2px dotted var(--amber)}
.sc-data dd.soon{color:#b8860b;letter-spacing:.06em}
.vcard-tag{
  position:absolute;top:.7rem;right:.7rem;font-family:var(--font-mono);font-weight:700;
  font-size:.55rem;letter-spacing:.16em;color:var(--cream);border:1px solid rgba(244,236,220,.5);
  border-radius:6px;padding:.3em .9em;background:rgba(10,8,4,.7);
}
.vcard-cap{
  padding:.8rem .4rem .9rem;
  font-family:var(--font-mono);font-weight:700;font-size:.63rem;letter-spacing:.06em;
  color:#4d4331;text-transform:uppercase;line-height:1.55;text-align:center;
}
.vault-note{text-align:center;margin-top:3rem;font-family:var(--font-mono);font-weight:700;
  font-size:.7rem;letter-spacing:.22em;color:var(--dim)}

/* ============================================================
   GILTONOMICS
   ============================================================ */
.huge-number{
  font-family:var(--font-title);font-weight:400;
  font-size:clamp(2.4rem,8vw,6.6rem);line-height:1;
  letter-spacing:.01em;text-shadow:5px 5px 0 rgba(0,0,0,.55);
}
.huge-sub{font-family:var(--font-mono);font-weight:700;font-size:.72rem;letter-spacing:.26em;
  color:var(--muted);margin-top:1.2rem}
.nomics-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.4rem;
  max-width:1150px;margin:0 auto;
}
.ncard{
  background:var(--card);border:2px solid var(--line);border-radius:14px;padding:1.8rem;
  transition:transform .3s,border-color .3s;box-shadow:5px 5px 0 rgba(0,0,0,.5);
}
.ncard:hover{transform:translateY(-4px) rotate(-.4deg);border-color:rgba(255,179,71,.45)}
.ncard label{font-family:var(--font-mono);font-weight:700;font-size:.64rem;letter-spacing:.26em;color:var(--amber)}
.ncard strong{font-family:var(--font-title);font-weight:400;font-size:1.7rem;display:block;
  margin:.55rem 0 .7rem;text-transform:uppercase;text-shadow:2px 2px 0 rgba(0,0,0,.5)}
.ncard p{color:var(--muted);font-size:.93rem;font-weight:300}

/* ============================================================
   EPISODE GUIDE (roadmap)
   ============================================================ */
.episodes{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.6rem;
  max-width:1150px;margin:0 auto;
}
.ep{
  position:relative;background:var(--card);border:2px solid var(--line);border-radius:14px;
  padding:1.8rem;transition:transform .3s,border-color .3s;
  box-shadow:5px 5px 0 rgba(0,0,0,.5);
}
.ep:hover{transform:translateY(-5px);border-color:rgba(255,179,71,.45)}
.ep-num{
  font-family:var(--font-title);font-weight:400;font-size:2.6rem;color:var(--amber);
  text-shadow:3px 3px 0 rgba(0,0,0,.55);display:block;line-height:1;
}
.ep-status{
  font-family:var(--font-mono);font-weight:700;font-size:.58rem;letter-spacing:.22em;
  border-radius:8px;padding:.45em 1em;display:inline-block;margin:1rem 0;border:2px solid;
}
.ep-status.aired{color:var(--green);border-color:rgba(143,191,111,.5)}
.ep-status.now{color:var(--amber);border-color:rgba(255,179,71,.55);animation:osdBlink 2s steps(1) infinite}
.ep-status.next{color:var(--muted);border-color:var(--line)}
.ep-status.finale{color:var(--sub);border-color:rgba(255,233,168,.5)}
.ep h3{font-family:var(--font-title);font-weight:400;font-size:1.3rem;text-transform:uppercase;
  letter-spacing:.02em;margin-bottom:.7rem}
.ep ul{list-style:none;color:var(--muted);font-size:.92rem;font-weight:300}
.ep li{padding-left:1.3em;position:relative;margin-bottom:.35em}
.ep li::before{content:"▸";position:absolute;left:0;color:var(--amber)}
.ep-runtime{margin-top:1.1rem;font-family:var(--font-mono);font-weight:700;font-size:.6rem;
  letter-spacing:.2em;color:var(--dim)}

/* ============================================================
   BUY
   ============================================================ */
.buy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.4rem;
  max-width:1100px;margin:0 auto 3rem}
.bcard{background:var(--card);border:2px solid var(--line);border-radius:14px;padding:1.8rem;
  transition:transform .3s,border-color .3s;box-shadow:5px 5px 0 rgba(0,0,0,.5)}
.bcard:hover{transform:translateY(-4px);border-color:rgba(255,179,71,.45)}
.bnum{font-family:var(--font-title);font-weight:400;font-size:2.2rem;color:var(--amber);
  display:block;margin-bottom:.6rem;text-shadow:3px 3px 0 rgba(0,0,0,.55)}
.bcard h3{font-family:var(--font-title);font-weight:400;font-size:1.15rem;letter-spacing:.02em;
  margin-bottom:.6rem;text-transform:uppercase}
.bcard p{color:var(--muted);font-size:.93rem;font-weight:300}
.ca-row{
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;justify-content:center;
  max-width:900px;margin:0 auto;background:var(--paper);border:2px solid var(--ink);
  border-radius:14px;padding:1rem 1.2rem 1rem 1.8rem;box-shadow:5px 5px 0 rgba(0,0,0,.6);
  transform:rotate(-.4deg);
}
.ca-label{font-family:var(--font-mono);font-weight:700;font-size:.62rem;letter-spacing:.26em;color:#6e6146}
#ca-text{font-family:var(--font-mono);font-weight:700;font-size:.82rem;color:var(--ink);word-break:break-all}

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:1rem}
.faq-item{
  background:var(--card);border:2px solid var(--line);border-radius:14px;overflow:hidden;
  transition:border-color .25s;box-shadow:4px 4px 0 rgba(0,0,0,.5);
}
.faq-item[open]{border-color:rgba(255,179,71,.45)}
.faq-item summary{
  list-style:none;padding:1.3rem 1.6rem;font-weight:600;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;user-select:none;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--font-mono);font-weight:700;
  color:var(--amber);font-size:1.3rem;transition:transform .25s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item p{padding:0 1.6rem 1.4rem;color:var(--muted);font-size:.95rem;font-weight:300}

/* ============================================================
   FOOTER — end credits
   ============================================================ */
#footer{
  position:relative;padding:8rem 2rem 4rem;text-align:center;background:var(--bg-1);
  border-top:2px solid var(--line);overflow:hidden;
}
.foot-gilton{width:110px;height:110px;margin:0 auto 2rem;object-fit:contain;
  filter:drop-shadow(4px 4px 0 rgba(0,0,0,.6))}
.foot-sub{font-family:var(--font-mono);font-weight:700;font-size:.72rem;letter-spacing:.3em;
  color:var(--muted);margin-top:1.6rem}
.credits{
  max-width:520px;margin:3.5rem auto;display:flex;flex-direction:column;gap:.8rem;
}
.credit-row{
  display:flex;justify-content:space-between;gap:2rem;align-items:baseline;
  font-size:.85rem;color:var(--muted);
  border-bottom:2px dotted var(--line);padding-bottom:.7rem;
}
.credit-row b{font-family:var(--font-mono);font-weight:700;font-size:.66rem;
  letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.credit-row span{color:var(--cream);font-weight:300;text-align:right}
.foot-links{display:flex;gap:1rem;justify-content:center;margin:3rem 0;flex-wrap:wrap}
.foot-legal{max-width:720px;margin:0 auto;font-size:.78rem;color:var(--dim);line-height:1.8;font-weight:300}
.foot-yeah{margin-top:3.5rem;font-family:var(--font-mono);font-weight:700;color:var(--sub);
  letter-spacing:.12em;text-shadow:2px 2px 0 #000}

/* ============================================================
   COMPANION — viewfinder + TV subtitles
   ============================================================ */
#companion{position:fixed;right:1.6rem;bottom:1.4rem;z-index:900;pointer-events:none}
#companion[hidden]{display:none}
body.cam-hidden #companion{display:none}
.companion-stage{
  display:flex;flex-direction:column;align-items:center;gap:.5rem;position:relative;
  background:rgba(8,6,3,.94);border:2px solid var(--line);border-radius:12px;
  padding:2rem .7rem .7rem;box-shadow:5px 5px 0 rgba(0,0,0,.55);
}
#cam-hide{
  position:absolute;top:.45rem;right:.55rem;pointer-events:auto;
  font-family:var(--font-mono);font-weight:700;font-size:.54rem;letter-spacing:.14em;
  color:var(--muted);background:transparent;border:2px solid var(--line);border-radius:6px;
  padding:.3em .7em;transition:all .2s;
}
#cam-hide:hover{color:var(--red);border-color:rgba(226,87,76,.5)}
#cam-show{
  position:fixed;right:1.6rem;bottom:1.4rem;z-index:900;
  font-family:var(--font-mono);font-weight:700;font-size:.62rem;letter-spacing:.16em;
  color:var(--amber);background:rgba(8,6,3,.94);border:2px solid rgba(255,179,71,.45);
  border-radius:8px;padding:.6em 1.1em;box-shadow:3px 3px 0 rgba(0,0,0,.6);
  transition:all .2s;
}
#cam-show:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 rgba(0,0,0,.6)}
#cam-show[hidden]{display:none}
body:not(.cam-hidden) #cam-show{display:none}
.companion-ring{
  width:118px;height:118px;position:relative;padding:8px;
  background:rgba(8,6,3,.85);border-radius:8px;
}
/* viewfinder corner brackets */
.companion-ring::before,.companion-ring::after,
.companion-face::before,.companion-face::after{
  content:"";position:absolute;width:18px;height:18px;z-index:4;
  border-color:var(--cream);border-style:solid;
}
.companion-ring::before{top:0;left:0;border-width:3px 0 0 3px}
.companion-ring::after{top:0;right:0;border-width:3px 3px 0 0}
.companion-face::before{bottom:0;left:0;border-width:0 0 3px 3px}
.companion-face::after{bottom:0;right:0;border-width:0 3px 3px 0}
.companion-face::before,.companion-face::after{position:fixed}
.companion-face{
  width:100%;height:100%;border-radius:4px;
  background:radial-gradient(circle at 50% 35%,#26200f,#0b0905);
  overflow:hidden;display:flex;align-items:flex-end;justify-content:center;
  position:static;
}
.companion-face svg{width:84%;height:auto;transform:translateY(7%)}
.companion-face img{width:92%;height:auto;object-fit:contain;transform:translateY(6%);
  animation:camBob 6s ease-in-out infinite}
@keyframes camBob{0%,100%{transform:translateY(6%)}50%{transform:translateY(3%)}}
/* REC dot inside viewfinder */
.companion-ring .rec-tag{
  position:absolute;top:12px;left:12px;z-index:5;
  font-family:var(--font-mono);font-weight:700;font-size:.52rem;letter-spacing:.18em;
  color:var(--red);text-shadow:1px 1px 0 #000;animation:osdBlink 1.3s steps(1) infinite;
}
.mood-chip{
  font-family:var(--font-mono);font-weight:700;font-size:.56rem;letter-spacing:.18em;
  color:var(--amber);border:2px solid rgba(255,179,71,.4);border-radius:8px;padding:.4em 1em;
  background:rgba(10,8,4,.9);
}
.companion-caption{
  font-family:var(--font-mono);font-weight:700;font-size:.52rem;letter-spacing:.16em;color:var(--dim);
  border:2px solid var(--line);border-radius:8px;padding:.4em 1em;background:rgba(10,8,4,.9);
}

/* TV subtitles — bottom center, classic broadcast style */
.subtitle-box{
  position:fixed;left:50%;bottom:5.6rem;transform:translateX(-50%) translateY(8px);
  z-index:910;width:min(760px,86vw);text-align:center;pointer-events:none;
  opacity:0;transition:opacity .35s,transform .35s;
}
.subtitle-box.on{opacity:1;transform:translateX(-50%) translateY(0)}
.sub-head{display:flex;align-items:center;justify-content:center;gap:.7rem;margin-bottom:.5rem}
.sub-name{
  font-family:var(--font-mono);font-weight:700;font-size:.62rem;letter-spacing:.28em;
  color:var(--ink);background:var(--sub);border-radius:6px;padding:.3em 1em;
  border:2px solid var(--ink);
}
.sub-label{display:none}
.sub-wave{display:inline-flex;gap:2.5px;align-items:flex-end;height:12px}
.sub-wave i{width:3px;background:var(--sub);height:3px;border-radius:2px}
.sub-wave.speaking i{animation:wave .7s ease infinite}
.sub-wave i:nth-child(2){animation-delay:.12s}
.sub-wave i:nth-child(3){animation-delay:.24s}
.sub-wave i:nth-child(4){animation-delay:.36s}
@keyframes wave{0%,100%{height:3px}50%{height:12px}}
#subtitle-text{
  display:inline-block;font-size:1.08rem;line-height:1.55;color:var(--sub);font-weight:500;
  background:rgba(5,4,2,.82);padding:.35em .9em;border-radius:8px;
  text-shadow:1px 1px 0 #000,-1px 1px 0 #000,1px -1px 0 #000,-1px -1px 0 #000;
  min-height:1.5em;
}
#subtitle-text.narr{font-style:italic;font-weight:300;color:var(--cream)}
#subtitle-text::after{content:"▌";color:var(--amber);animation:caret .8s steps(1) infinite}
@media(max-width:700px){
  .subtitle-box{bottom:7.6rem;width:92vw}
  .companion-ring{width:88px;height:88px}
}

/* ============================================================
   CAMERA RIG AUDIO — lives under the viewfinder
   ============================================================ */
#soundbar{
  display:flex;align-items:center;gap:.35rem;pointer-events:auto;
  background:rgba(10,8,4,.92);border:2px solid var(--line);border-radius:8px;padding:.3rem .4rem;
}
#soundbar[hidden]{display:none}
.sb-btn{
  min-width:30px;height:26px;border-radius:6px;border:2px solid var(--line);background:transparent;
  color:var(--muted);font-size:.52rem;letter-spacing:.1em;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;font-family:var(--font-mono);font-weight:700;padding:0 .5em;
}
.sb-btn.active{color:var(--amber);border-color:rgba(255,179,71,.5)}
.sb-btn.stop{color:var(--red);border-color:rgba(226,87,76,.4)}
.sb-label{font-family:var(--font-mono);font-weight:700;font-size:.5rem;letter-spacing:.12em;
  color:var(--dim);padding:0 .4em}
@media(max-width:700px){.sb-label{display:none}}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}
.vcard.reveal.in:nth-child(4n+1){transform:rotate(-2.2deg)}
.vcard.reveal.in:nth-child(4n+2){transform:rotate(1.6deg)}
.vcard.reveal.in:nth-child(4n+3){transform:rotate(-1deg)}
.vcard.reveal.in:nth-child(4n+4){transform:rotate(2.4deg)}
.vcard.reveal.in:hover{transform:rotate(0) translateY(-8px) scale(1.03)}
.reveal.d1{transition-delay:.12s}
.reveal.d2{transition-delay:.24s}
.reveal.d3{transition-delay:.36s}
.reveal.d4{transition-delay:.48s}
.reveal.d5{transition-delay:.6s}

/* gilton blink — lids drop */
.g-eye .g-lid{transform:translateY(0);transition:transform .09s ease}
.blinking .g-eye .g-lid{transform:translateY(10px) scaleY(2.2)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}