/* =========================================================
   RGC — Ramon Garza Creative
   Cinematic film-slate site. Built on Vy tokens.
   ========================================================= */

@import url("assets/vy-tokens.css");
@import url("https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Pirata+One&family=VT323&display=swap");

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: #000;
  color: var(--vy-fg);
  font-family: var(--vy-font-sans);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  /* kill iOS Safari's text-selection / magnifier / tap-flash on decorative copy.
     form inputs and contact info re-enable it below. */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
/* re-enable selection on things people actually need to interact with as text */
input, textarea, [contenteditable],
.contact-info, .contact-info * {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}

body {
  min-height: 100vh;
  position: relative;
}

/* Always-on film grain overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("assets/grain.svg");
  background-size: 240px;
  opacity: .08;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 9999;
}

/* Scratch overlay — the three faint diagonal scratch lines now live in the
   <FilmLines/> overlay (.film-lines) so each can sway + bloom independently. */

::selection { background: var(--vy-acid); color: #000; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
img { display: block; max-width: 100%; }

/* =========================================================
   Type utilities
   ========================================================= */
.mono {
  font-family: var(--vy-font-mono);
  text-transform: uppercase;
  letter-spacing: var(--vy-tracking-mono);
  font-weight: 400;
}
.mono-tight { font-family: var(--vy-font-mono); letter-spacing: .04em; }
.display { font-family: var(--vy-font-display); letter-spacing: var(--vy-tracking-display); text-transform: uppercase; }
.dim { color: var(--vy-fg-dim); }
.dimmer { color: var(--vy-fg-dimmer); }
.faint { color: var(--vy-fg-faint); }

/* =========================================================
   Top chrome — fixed nav bar
   ========================================================= */
.chrome {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 26px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--vy-hair-soft);
  font-family: var(--vy-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .14em;
}
.chrome .brand {
  display: flex; align-items: center; gap: 14px;
}
.chrome .brand .rgc-mark {
  font-family: var(--vy-font-display);
  font-size: 22px;
  letter-spacing: .04em;
  position: relative;
  line-height: 1;
}
.chrome .brand .rgc-mark sup {
  font-family: var(--vy-font-mono);
  font-size: 9px;
  letter-spacing: 0;
  margin-left: 2px;
  vertical-align: super;
  color: var(--vy-fg-dim);
}
.chrome .rec {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--vy-fg-dim);
}
.chrome .rec::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px;
  background: #ff3838; box-shadow: 0 0 8px rgba(255,56,56,.7);
  animation: rec-pulse 1.4s ease-in-out infinite;
}
@keyframes rec-pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.chrome nav { display: flex; gap: 14px; flex-wrap: nowrap; overflow: hidden; }
.chrome nav a { color: var(--vy-fg-dim); transition: color .15s; white-space: nowrap; }
.chrome nav a:hover, .chrome nav a.active { color: var(--vy-fg); }
.chrome nav a .nav-label { display: inline; }
@media (max-width: 1240px) {
  .chrome nav { gap: 12px; }
  .chrome nav a .nav-label { display: none; }
  .chrome .right .tc { display: none; }
}
@media (max-width: 980px) {
  .chrome { padding: 12px 18px; font-size: 10px; }
  .chrome nav { display: none; }
  .chrome .right span { font-size: 10px; }
}
.chrome .right { display: flex; align-items: center; gap: 20px; }
.chrome .tc { color: var(--vy-fg-dim); }

/* Scroll progress (a thin film strip) */
.scroll-rail {
  position: fixed; top: 47px; left: 0;
  height: 2px; width: 0%;
  background: var(--vy-acid);          /* neon green, matches the lightning bolts */
  box-shadow: 0 0 10px rgba(200,250,60,.7);
  z-index: 101;
  transition: width .12s linear;
}

/* =========================================================
   Layout helpers
   ========================================================= */
section.scene {
  position: relative;
  z-index: 2;                  /* sit above the .film-lines scratch overlay */
  isolation: isolate;          /* force a stacking context so the blend-mode lines can't leak through (iOS Safari) */
  padding: 120px 6vw;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
section.scene + section.scene {
  border-top: 1px dashed rgba(255,255,255,.07);
}

/* compact bottom sections — Studio + Contact stack tight */
section.scene.compact {
  min-height: auto;
  padding: 80px 6vw 60px;
}
section.scene.compact .scene-label { position: relative; top: 0; left: 0; margin-bottom: 30px; }
section.scene.compact .brackets { display: none; }

/* Guides (#s05) + AI Media (#s06): size to content instead of forcing a full
   viewport with centered slack — kills the dead band between them and Studio. */
#s05, #s06 {
  min-height: auto;
  padding-bottom: 80px;
}

/* tighten the hero → Schedule seam ~15% */
#s01 { padding-top: 102px; }
#s01 .scene-label { top: 76px; }

.scene-label {
  position: absolute;
  top: 90px; left: 6vw;
  display: flex; align-items: center; gap: 14px;
  font-family: var(--vy-font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--vy-fg-dim);
}
.scene-label .num {
  display: inline-block; padding: 3px 8px;
  border: 1px solid var(--vy-hair-strong);
  color: var(--vy-fg);
}
.scene-label .tick { color: var(--vy-fg-faint); }

/* corner brackets */
.brackets {
  position: absolute; inset: 70px 5vw;
  pointer-events: none;
  z-index: 1;
}
.brackets::before, .brackets::after,
.brackets > i::before, .brackets > i::after {
  content: ""; position: absolute;
  width: 14px; height: 14px;
  border: 1px solid var(--vy-fg-faint);
}
.brackets::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.brackets::after  { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.brackets > i::before { bottom: 0; left: 0; border-right: 0; border-top: 0; position: absolute; }
.brackets > i::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; position: absolute; }
.brackets > i { display: block; position: absolute; inset: 0; }

/* =========================================================
   01 HERO  — slate / blackletter glitch header
   ========================================================= */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 80px 0 0;
}

.hero-top {
  display: grid;
  grid-template-columns: 1fr 1fr;     /* slate-name removed → 2-col slate meta */
  gap: 40px;
  padding: 80px 6vw 40px;
  font-family: var(--vy-font-mono);
  font-size: 12px;
  line-height: 1.55;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-top .label { color: var(--vy-fg-dim); }
.hero-top .val { color: var(--vy-fg); }
.hero-top .stack { display: grid; grid-template-columns: 70px 1fr; gap: 4px 14px; }

.slate-name {
  font-family: var(--vy-font-mono);
  font-size: 13px;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
}
.slate-name .reg { font-size: 9px; vertical-align: super; }

.hero-center {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: 20px 6vw;
}
.glitch-blackletter {
  font-family: "UnifrakturMaguntia", "Pirata One", serif;
  font-size: clamp(60px, 13vw, 220px);
  line-height: .9;
  letter-spacing: -.01em;
  position: relative;
  color: var(--vy-fg);
  text-transform: lowercase;
  user-select: none;
  cursor: pointer;
  white-space: nowrap;
}
.glitch-blackletter::before,
.glitch-blackletter::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
}
.glitch-blackletter::before {
  color: #ff2f6e;
  transform: translate(-3px, 0);
  mix-blend-mode: screen;
  opacity: .85;
}
.glitch-blackletter::after {
  color: #2fd6ff;
  transform: translate(3px, 0);
  mix-blend-mode: screen;
  opacity: .85;
}
.glitch-blackletter:hover { animation: glitch-shake .25s steps(2) infinite; }
.glitch-blackletter:hover::before { animation: glitch-r .25s steps(2) infinite; }
.glitch-blackletter:hover::after { animation: glitch-b .25s steps(2) infinite; }
@keyframes glitch-shake { 50% { transform: translate(2px,-1px); } }
@keyframes glitch-r { 50% { transform: translate(-6px,2px); } }
@keyframes glitch-b { 50% { transform: translate(6px,-2px); } }

/* AI Media heading reuses the rgcreative blackletter-glitch wordmark, sized for a section title */
.ai-glitch {
  font-size: clamp(46px, 7.5vw, 110px);
  line-height: .9;
}

.reg-circle {
  position: absolute;
  right: -38px; top: 14%;
  width: 28px; height: 28px;
  border: 1.5px solid var(--vy-fg);
  border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--vy-font-mono);
  font-size: 12px;
}

/* cracked-glass overlay */
.crack {
  position: absolute; inset: 0; pointer-events: none;
  opacity: .35; mix-blend-mode: screen;
}

.hero-bottom {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: end;
  padding: 60px 6vw 50px;
  font-family: var(--vy-font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero-bottom .col { display: flex; flex-direction: column; gap: 4px; }
.hero-bottom .ttl { color: var(--vy-fg-dim); font-size: 10px; }
.hero-bottom .right { text-align: right; }

.scroll-hint {
  position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
  font-family: var(--vy-font-mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--vy-fg-faint);
  animation: scroll-pulse 2s ease-in-out infinite;
}
@keyframes scroll-pulse { 0%,100%{opacity:.4} 50%{opacity:1} }

/* "noise corners" - the magenta/cyan video noise blocks in the inspiration */
.tv-noise {
  position: absolute;
  width: 22px; height: 9px;
  /* matches the red/cyan chromatic-aberration palette of the .glitch-blackletter
     wordmark — same "3D out" TV-fuzz colors throughout */
  background-image:
    linear-gradient(90deg, #ff2f6e 0 50%, #2fd6ff 50% 100%);
  background-size: 4px 4px;
  background-repeat: repeat;
  filter: blur(.3px) saturate(1.4);
  mix-blend-mode: screen;
  opacity: .8;
  pointer-events: none;
}

/* =========================================================
   02 INTRO  — RGC™ slab card
   ========================================================= */
.intro-card {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 6vw;
}
.intro-card .rgc-big {
  font-family: var(--vy-font-display);
  font-size: clamp(120px, 22vw, 360px);
  line-height: .8;
  letter-spacing: -.01em;
  color: var(--vy-fg);
  position: relative;
  display: inline-block;
}
.intro-card .rgc-big sup {
  font-family: var(--vy-font-mono);
  font-size: 22px;
  vertical-align: super;
  letter-spacing: .02em;
  font-weight: 400;
  margin-left: 4px;
}
.intro-card .systems-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 24px 60px;
  margin-top: 50px;
  max-width: 900px;
}
.intro-card .sys {
  cursor: pointer;
  padding: 14px 0;
  border-top: 1px solid var(--vy-hair-soft);
  transition: border-color .2s, padding .2s;
  display: grid;
  grid-template-rows: auto auto;
  gap: 4px;
}
.intro-card .sys:hover {
  border-color: var(--vy-acid);
  padding-left: 12px;
}
.intro-card .sys .k {
  font-family: var(--vy-font-sans);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -.01em;
}
.intro-card .sys .v {
  font-family: var(--vy-font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--vy-fg-dim);
}

/* TV noise corners inside the intro card */
.intro-card .corner-noise { position: relative; }

/* =========================================================
   03 PRODUCTION SLATE
   ========================================================= */
.slate-grid {
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
}
.slate-rows {
  display: flex;
  flex-direction: column;
  gap: 32px;
  margin-top: 20px;
}
.slate-row {
  display: flex; flex-wrap: wrap; gap: 36px;
  font-family: var(--vy-font-mono);
  text-transform: uppercase;
  font-size: 16px;
  letter-spacing: .08em;
}
.slate-row.r1 { padding-left: 4%; }
.slate-row.r2 { padding-left: 14%; }
.slate-row.r3 { padding-left: 22%; }
.slate-row.r4 { padding-left: 36%; }
.slate-item { display: flex; gap: 10px; align-items: baseline; }
.slate-item .date {
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--vy-fg-dim);
  align-self: flex-start;
  margin-top: 4px;
}

.bolt-wrap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 30px;
  margin-top: 90px;
}
.bolt-wrap .l { font-family: var(--vy-font-mono); font-size: 18px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; }
.bolt-wrap .r { font-family: var(--vy-font-mono); font-size: 18px; line-height: 1.5; letter-spacing: .08em; text-transform: uppercase; text-align: right; }
.bolt { cursor: pointer; }
.bolt svg { width: 88px; height: auto; transition: filter .15s; }
.bolt svg path { stroke: var(--vy-fg); fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; transition: stroke .15s; }
.bolt:hover svg path { stroke: var(--vy-acid); }
.bolt:hover svg { filter: drop-shadow(0 0 18px rgba(200,250,60,.55)); }
.bolt:active svg path { stroke: #fff; }
.bolt:active svg { filter: drop-shadow(0 0 22px rgba(255,255,255,1)); }

/* =========================================================
   04 REEL — VIDEO GRID
   ========================================================= */
.reel {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-top: 30px;
}
.reel .clip {
  position: relative;
  background: var(--vy-surface);
  border: 1px solid var(--vy-hair-soft);
  overflow: hidden;
  aspect-ratio: 16/9;
  display: grid; place-items: center;
  cursor: pointer;
  transition: border-color .2s, transform .25s;
}
.reel .clip:hover { border-color: var(--vy-fg); transform: translateY(-2px); }
.reel .clip img { width: 100%; height: 100%; object-fit: cover; opacity: .8; transition: opacity .2s, transform .35s; }
.reel .clip:hover img { opacity: 1; transform: scale(1.04); }
.reel .clip .meta {
  position: absolute; left: 14px; right: 14px; bottom: 12px;
  font-family: var(--vy-font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: flex; justify-content: space-between; gap: 12px;
  text-shadow: 0 1px 6px rgba(0,0,0,.85);
}
.reel .clip .badge {
  position: absolute; top: 12px; left: 14px;
  font-family: var(--vy-font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: rgba(0,0,0,.6);
  padding: 4px 8px;
  border: 1px solid var(--vy-hair-strong);
}
.reel .clip .play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 54px; height: 54px;
  border: 1.5px solid var(--vy-fg);
  border-radius: 999px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.4);
  backdrop-filter: blur(4px);
  transition: background .2s;
}
.reel .clip:hover .play { background: var(--vy-acid); border-color: var(--vy-acid); color: #000; }
.reel .clip .play svg { width: 14px; height: 14px; margin-left: 2px; }
.reel .clip-12 { grid-column: span 12; aspect-ratio: 21/9; }
.reel .clip-8  { grid-column: span 8; }
.reel .clip-4  { grid-column: span 4; }
.reel .clip-6  { grid-column: span 6; }

/* timecode strip below the reel */
.timecode-strip {
  margin-top: 28px;
  display: flex;
  gap: 0;
  font-family: var(--vy-font-mono);
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vy-fg-dim);
  border-top: 1px solid var(--vy-hair-soft);
  padding-top: 14px;
  justify-content: space-between;
}

/* =========================================================
   05 PHOTO GRID — masonry-ish
   ========================================================= */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 14px;
  margin-top: 30px;
}
.photo {
  position: relative;
  background: var(--vy-surface);
  border: 1px solid var(--vy-hair-soft);
  overflow: hidden;
  cursor: zoom-in;
}
.photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s, filter .25s; filter: contrast(1.05) saturate(.95); }
.photo:hover img { transform: scale(1.04); filter: contrast(1.15) saturate(1); }
.photo .ph-meta {
  position: absolute; left: 10px; bottom: 8px;
  font-family: var(--vy-font-mono);
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--vy-fg);
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
  display: flex; gap: 8px;
}
.photo .ph-meta .dot { width: 4px; height: 4px; background: var(--vy-acid); border-radius: 999px; align-self: center; }
.photo .ph-num {
  position: absolute; right: 10px; top: 8px;
  font-family: var(--vy-font-mono);
  font-size: 9px;
  letter-spacing: .12em;
  color: var(--vy-fg-dim);
}

/* layout pattern: tall, wide, square, tall, square, wide, tall, square */
.photo.p1 { grid-column: span 4; aspect-ratio: 3/4; }
.photo.p2 { grid-column: span 8; aspect-ratio: 16/9; }
.photo.p3 { grid-column: span 5; aspect-ratio: 1/1; }
.photo.p4 { grid-column: span 3; aspect-ratio: 3/4; }
.photo.p5 { grid-column: span 4; aspect-ratio: 1/1; }
.photo.p6 { grid-column: span 7; aspect-ratio: 16/9; }
.photo.p7 { grid-column: span 5; aspect-ratio: 4/3; }
.photo.p8 { grid-column: span 4; aspect-ratio: 3/4; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(6px);
  z-index: 200;
  display: grid; place-items: center;
  padding: 40px;
  cursor: zoom-out;
  animation: lb-in .2s ease-out;
}
@keyframes lb-in { from { opacity: 0; } }
.lightbox img {
  max-width: 92vw; max-height: 80vh;
  border: 1px solid var(--vy-hair-strong);
}
.lightbox .lb-meta {
  position: absolute; bottom: 28px; left: 0; right: 0;
  text-align: center;
  font-family: var(--vy-font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vy-fg-dim);
}
.lightbox .lb-close {
  position: absolute; top: 24px; right: 28px;
  font-family: var(--vy-font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--vy-fg);
  cursor: pointer;
}

/* =========================================================
   05 SUPER-8 CAM — webcam with Super 8 grade
   ========================================================= */
.cam-stage {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: 60px;
  align-items: start;
  margin-top: 30px;
}
/* main-page launcher mode — no embedded phone mockup, controls are the whole card */
.cam-stage.no-frame {
  grid-template-columns: 1fr;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

/* Fullscreen pop-up mode — Roll Tape lifts the cam into a real phone-sized
   viewfinder over the page so the user can frame the shot properly. */
.cam-stage.fullscreen {
  position: fixed;
  inset: 0;
  z-index: 9500;
  background: #000;
  margin: 0;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 14px;
  padding:
    max(env(safe-area-inset-top), 14px)
    16px
    max(env(safe-area-inset-bottom), 14px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.cam-stage.fullscreen .iphone-frame {
  width: min(360px, 92vw);
  max-width: 360px;
  margin: 0 auto;
  align-self: center;
  justify-self: center;
}
.cam-stage.fullscreen .cam-controls {
  width: min(560px, 100%);
  margin: 0 auto;
  gap: 14px;
}
.cam-stage.fullscreen .cam-readout {
  grid-template-columns: repeat(2, 1fr);
}
.cam-stage.fullscreen .cam-strip { display: none; }   /* keep the popup focused — filmstrip lives in the inline view */

.cam-fs-close {
  position: fixed;
  top: max(env(safe-area-inset-top), 8px);
  right: 10px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: rgba(20,20,20,.85);
  color: var(--vy-fg);
  font-size: 22px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  z-index: 9600;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
}
.cam-fs-close:hover { background: rgba(40,40,40,.95); }
body.cam-fs-open { overflow: hidden; }    /* lock background scroll while popup is up */

/* iPhone 17 Pro-ish bezel */
.iphone-frame {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 1206 / 2622;
  background: #0a0a0c;
  border-radius: 56px;
  padding: 12px;
  box-shadow:
    inset 0 0 0 2px #1a1a1f,
    inset 0 0 0 4px #2a2a30,
    0 30px 70px rgba(0,0,0,.6),
    0 0 0 1px rgba(255,255,255,.06);
}
.iphone-frame .screen {
  position: relative;
  width: 100%; height: 100%;
  background: #000;
  border-radius: 46px;
  overflow: hidden;
}
.iphone-frame .dynamic-island {
  position: absolute;
  top: 10px; left: 50%;
  transform: translateX(-50%);
  width: 32%; height: 30px;
  background: #000;
  border-radius: 20px;
  z-index: 6;
}

.cam-video-wrap {
  position: absolute; inset: 0;
  background: #0a0a0c;
  overflow: hidden;
}
.cam-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1); /* mirror selfie */
  /* live super-8 grade preview */
  filter:
    contrast(1.14) saturate(1.08)
    sepia(.18) hue-rotate(-8deg)
    brightness(1.02);
}

/* Hidden raw video source — the canvas below is what's actually shown. */
/* Video source — visible and mirrored, the canvas on z-index:2 paints OVER it
   with the processed frame. Kept visible (no opacity:0) because iOS Safari is
   unreliable about delivering frames from invisible videos. If the canvas paint
   ever lags or fails, the raw video below is a graceful fallback rather than black. */
.cam-video-source {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scaleX(-1);     /* mirror to match the canvas selfie mirror */
  pointer-events: none;
  background: #0a0a0c;
}

/* Live filmcam canvas — every preset is rendered into THIS element every frame,
   so the preview pixel-for-pixel matches the saved photo (WYSIWYG). */
.cam-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
  z-index: 2;            /* paint over the hidden video source */
}

/* Save-confirmation toast that pops under the controls after a snap */
.cam-note {
  font-family: var(--vy-font-mono);
  font-size: 11px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--vy-acid);
  padding: 8px 12px;
  border: 1px solid rgba(200,250,60,.35);
  border-radius: 4px;
  background: rgba(200,250,60,.06);
  align-self: flex-start;
}

/* Preset selector — 5 chips above the readout */
.preset-chips {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
}
.preset-chip {
  display: grid; gap: 3px;
  padding: 9px 10px;
  border: 1px solid var(--vy-hair);
  background: rgba(255,255,255,.02);
  color: var(--vy-fg-dim);
  text-align: left;
  cursor: pointer;
  border-radius: 4px;
  font-family: var(--vy-font-mono);
  transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.preset-chip:hover { border-color: rgba(255,255,255,.22); color: var(--vy-fg); }
.preset-chip.on {
  border-color: var(--vy-acid);
  background: rgba(200,250,60,.10);
  color: var(--vy-fg);
  box-shadow: 0 0 14px rgba(200,250,60,.25);
}
.preset-chip .pc-name {
  font-family: var(--vy-font-sans);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .04em;
  color: inherit;
}
.preset-chip.on .pc-name { color: var(--vy-acid); }
.preset-chip .pc-sub {
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vy-fg-faint);
}
@media (max-width: 720px) {
  .preset-chips { grid-template-columns: repeat(3, 1fr); }
}

/* live overlays match the canvas snap */
.cam-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
}
.cam-vignette {
  background: radial-gradient(ellipse at center,
    transparent 32%,
    rgba(0,0,0,.35) 72%,
    rgba(0,0,0,.9) 100%);
}
.cam-leak-tl {
  background: radial-gradient(circle at 15% 8%,
    rgba(255,140,60,.42) 0%,
    rgba(255,90,40,.16) 28%,
    transparent 60%);
  mix-blend-mode: screen;
}
.cam-leak-br {
  background: radial-gradient(circle at 95% 95%,
    rgba(255,180,100,.34) 0%,
    rgba(255,120,60,.08) 38%,
    transparent 72%);
  mix-blend-mode: screen;
}
.cam-grain {
  background-image: url("assets/grain.svg");
  background-size: 220px;
  opacity: .14;
  mix-blend-mode: overlay;
}
.cam-flare {
  position: absolute;
  left: -15%; right: -15%;
  top: 38%;
  height: 3px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(160,220,255,0) 18%,
    rgba(190,235,255,.7) 50%,
    rgba(160,220,255,0) 82%,
    transparent 100%);
  filter: blur(1.4px);
  mix-blend-mode: screen;
  z-index: 3;
}
.cam-flare::before {
  content: ""; position: absolute;
  left: 56%; top: 50%;
  transform: translate(-50%, -50%);
  width: 38px; height: 38px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,210,150,.55), rgba(255,150,90,.15) 45%, transparent 70%);
  filter: blur(2px);
}
.cam-scanline {
  background:
    repeating-linear-gradient(
      173deg,
      transparent 0 5px,
      rgba(255,255,255,.025) 5px 6px),
    repeating-linear-gradient(
      167deg,
      transparent 0 14px,
      rgba(255,255,255,.02) 14px 15px);
  mix-blend-mode: screen;
  opacity: .8;
}

.cam-rec {
  position: absolute;
  top: 50px; left: 22px;
  font-family: var(--vy-font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vy-fg);
  display: inline-flex; align-items: center; gap: 6px;
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  z-index: 5;
}
.cam-rec::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: #ff3838; box-shadow: 0 0 8px rgba(255,56,56,.8);
  animation: rec-pulse 1.4s ease-in-out infinite;
}
.cam-tc {
  position: absolute; top: 50px; right: 22px;
  font-family: var(--vy-font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--vy-fg);
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  z-index: 5;
}
.cam-foot-lbl {
  position: absolute; bottom: 80px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--vy-font-mono);
  font-size: 9px;
  letter-spacing: .25em;
  color: rgba(255,255,255,.7);
  text-shadow: 0 1px 4px rgba(0,0,0,.8);
  z-index: 5;
  white-space: nowrap;
}

/* placeholder when off */
.cam-off {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--vy-fg-dim);
  font-family: var(--vy-font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
  background:
    radial-gradient(ellipse at center, rgba(40,30,20,.6) 0%, transparent 70%),
    #050505;
}
.cam-off .big {
  font-family: var(--vy-font-display);
  font-size: 48px;
  letter-spacing: .03em;
  color: var(--vy-fg);
  margin-bottom: 12px;
}

/* shutter flash */
.shutter {
  position: absolute; inset: 0;
  background: white;
  opacity: 0;
  pointer-events: none;
  z-index: 8;
}
.shutter.flash { animation: shutter-flash .42s ease-out; }
@keyframes shutter-flash {
  0% { opacity: 0; }
  18% { opacity: .85; }
  100% { opacity: 0; }
}

/* the side controls + readouts */
.cam-controls {
  display: flex; flex-direction: column;
  gap: 26px;
}

.cam-readout {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  font-family: var(--vy-font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.cam-readout > div { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--vy-hair-soft); }
.cam-readout .k { color: var(--vy-fg-dim); font-size: 9px; }
.cam-readout .v { color: var(--vy-fg); font-size: 13px; letter-spacing: .08em; }

.cam-row {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center;
}

.cam-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border: 1px solid var(--vy-hair-strong);
  border-radius: 999px;
  font-family: var(--vy-font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vy-fg);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.cam-btn:hover { background: rgba(255,255,255,.06); }
.cam-btn.ghost { color: var(--vy-fg-dim); }
.cam-btn:disabled { opacity: .4; cursor: not-allowed; }

.cam-shutter-btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 18px 30px 18px 22px;
  background: var(--vy-acid);
  color: #000;
  border-radius: 999px;
  font-family: var(--vy-font-mono);
  font-size: 12px;
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--vy-glow-acid);
  transition: box-shadow .2s, transform .15s;
  border: 0;
}
.cam-shutter-btn:hover { box-shadow: var(--vy-glow-acid-hover); }
.cam-shutter-btn:active { transform: scale(.97); }
.cam-shutter-btn:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
.cam-shutter-btn .ring {
  width: 22px; height: 22px;
  border: 2.5px solid #000;
  border-radius: 999px;
  display: grid; place-items: center;
}
.cam-shutter-btn .ring::after {
  content: ""; width: 12px; height: 12px;
  border-radius: 999px; background: #000;
}

.cam-error {
  font-family: var(--vy-font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ff8a8a;
  padding: 10px 14px;
  border: 1px solid rgba(255,138,138,.4);
  border-radius: 6px;
}

/* filmstrip of recent snaps */
.cam-strip {
  margin-top: 10px;
  padding: 18px 18px 14px;
  border: 1px solid var(--vy-hair-soft);
  background: rgba(255,255,255,.015);
  position: relative;
}
.cam-strip::before, .cam-strip::after {
  content: ""; position: absolute;
  left: 0; right: 0; height: 12px;
  background:
    repeating-linear-gradient(to right,
      transparent 0 18px,
      var(--vy-fg) 18px 26px,
      transparent 26px 44px);
  opacity: .14;
}
.cam-strip::before { top: 0; }
.cam-strip::after { bottom: 0; }

.cam-strip-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--vy-font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vy-fg-dim);
  margin-bottom: 12px;
  padding-top: 6px;
}
.cam-strip-frames {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.cam-strip-frame {
  position: relative;
  aspect-ratio: 9 / 19.5;
  background: #050505;
  border: 1px solid var(--vy-hair);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s;
}
.cam-strip-frame:hover { border-color: var(--vy-fg); }
.cam-strip-frame img { width: 100%; height: 100%; object-fit: cover; }
.cam-strip-frame.empty {
  display: grid; place-items: center;
  font-family: var(--vy-font-mono);
  font-size: 8px;
  letter-spacing: .2em;
  color: var(--vy-fg-faint);
}
.cam-strip-frame .dl {
  position: absolute; bottom: 4px; left: 4px; right: 4px;
  font-family: var(--vy-font-mono);
  font-size: 7px;
  letter-spacing: .15em;
  text-align: center;
  text-transform: uppercase;
  background: rgba(0,0,0,.75);
  padding: 3px 4px;
  color: var(--vy-fg);
  opacity: 0;
  transition: opacity .15s;
}
.cam-strip-frame:hover .dl { opacity: 1; }

@media (max-width: 880px) {
  .cam-stage { grid-template-columns: 1fr; gap: 30px; }
  .iphone-frame { margin: 0 auto; max-width: 280px; }
  .cam-readout { grid-template-columns: repeat(2, 1fr); }
  .cam-strip-frames { grid-template-columns: repeat(3, 1fr); }
}

/* =========================================================
   06 AI MEDIA — Define/Deploy/Scale
   ========================================================= */
.ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 30px;
}
.ai-card {
  position: relative;
  background: var(--vy-surface);
  border: 1px solid var(--vy-hair);
  border-radius: var(--vy-r-xl);
  padding: 32px 28px;
  min-height: 360px;
  display: flex; flex-direction: column;
  transition: border-color .25s, transform .25s;
  cursor: pointer;
  overflow: hidden;
}
.ai-card:hover { border-color: var(--vy-acid); transform: translateY(-3px); }
.ai-card .num {
  font-family: var(--vy-font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--vy-fg-dim);
  margin-bottom: 16px;
}
.ai-card h3 {
  font-family: var(--vy-font-display);
  font-size: 64px;
  line-height: .9;
  letter-spacing: .02em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.ai-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--vy-fg-dim);
  margin-bottom: 24px;
}
.ai-card .chips {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: auto;
}
.ai-card .chip {
  font-family: var(--vy-font-mono);
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  padding: 5px 10px;
  border: 1px solid var(--vy-hair-strong);
  border-radius: 999px;
  color: var(--vy-fg-dim);
  transition: color .2s, border-color .2s, background .2s;
}
.ai-card:hover .chip { color: var(--vy-fg); }
.ai-card .chip.acid {
  color: var(--vy-acid);
  border-color: var(--vy-acid);
}

.ai-cta {
  margin-top: 36px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.ai-cta .stamps {
  font-family: var(--vy-font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vy-fg-dim);
  display: flex; gap: 18px;
}
.btn-acid {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--vy-acid);
  color: #000;
  font-family: var(--vy-font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: 16px 26px;
  border-radius: 999px;
  box-shadow: var(--vy-glow-acid);
  transition: box-shadow .2s, transform .2s;
  cursor: pointer;
  font-weight: 700;
}
.btn-acid:hover { box-shadow: var(--vy-glow-acid-hover); transform: translateY(-1px); }

/* =========================================================
   07 BADGE — record-label oval card
   ========================================================= */
.badge-scene {
  display: grid; place-items: center;
}
.badge-card {
  position: relative;
  display: grid; place-items: center;
  padding: 60px 90px;
  max-width: 760px;
  width: 100%;
}
.badge-card .side-text {
  position: absolute;
  font-family: var(--vy-font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vy-fg-dim);
  white-space: nowrap;
}
.badge-card .side-text.l { left: 0; top: 50%; transform-origin: left top; transform: rotate(-90deg) translate(-50%, 0); }
.badge-card .side-text.r { right: 0; top: 50%; transform-origin: right top; transform: rotate(90deg) translate(50%, -100%); }

.rgc-oval {
  width: 320px;
  height: 130px;
  border: 2.5px solid var(--vy-fg);
  border-radius: 999px;
  display: grid; place-items: center;
  font-family: var(--vy-font-display);
  font-size: 86px;
  letter-spacing: .04em;
  position: relative;
}
.rgc-oval::after {
  content: ""; position: absolute; inset: 8px;
  border: 1px solid var(--vy-fg);
  border-radius: 999px;
  opacity: .35;
}

.badge-card .subline {
  margin-top: 18px;
  font-family: var(--vy-font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.badge-table {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--vy-fg-dim);
  width: 320px;
}
.badge-table > div {
  padding: 10px 14px;
  font-family: var(--vy-font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.badge-table > div + div { border-left: 1px solid var(--vy-fg-dim); }
.badge-rows {
  margin-top: 0;
  width: 100%;
  max-width: 460px;
}
.badge-row {
  border: 1px solid var(--vy-fg-dim);
  border-top: 0;
  padding: 10px 14px;
  font-family: var(--vy-font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.badge-card .footer-text {
  margin-top: 26px;
  font-family: var(--vy-font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.7;
  color: var(--vy-fg-dim);
}
.badge-card .footer-text strong { color: var(--vy-fg); font-weight: 400; }

/* ── Studio ignite bolt (replaces the RGC oval) ───────────────────── */
.ignite-bolt {
  display: grid; place-items: center;
  width: 150px; height: 150px;
  background: none; border: 0; cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
  filter: drop-shadow(0 0 18px rgba(200,250,60,.40));
}
.ignite-bolt svg { width: 72px; height: 120px; overflow: visible; }
.ignite-bolt svg path {
  fill: none;
  stroke: var(--vy-acid);
  stroke-width: 3;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(200,250,60,.65));
  transition: fill .12s ease, stroke .12s ease;
}
.ignite-bolt:hover { transform: scale(1.08); filter: drop-shadow(0 0 32px rgba(200,250,60,.7)); }
.ignite-bolt:active svg path { fill: #fff; stroke: #fff; }
.ignite-hint {
  margin-top: 14px;
  font-family: var(--vy-font-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--vy-fg-dim);
  animation: ignite-pulse 2.6s ease-in-out infinite;
}
@keyframes ignite-pulse { 0%,100% { opacity: .45; } 50% { opacity: .9; } }

/* the section content fading out to black before the terminal opens */
.badge-stage { transition: opacity .6s ease, filter .6s ease; }
.badge-stage.fade-out { opacity: 0; filter: brightness(0); pointer-events: none; }

/* ── Build terminal ───────────────────────────────────────────────── */
.code-term {
  width: min(900px, 92vw);
  margin: 0 auto;
  border: 1px solid rgba(200,250,60,.30);
  border-radius: 10px;
  background: rgba(6,7,1,.92);
  box-shadow: 0 0 60px rgba(0,0,0,.8), inset 0 0 90px rgba(200,250,60,.05);
  overflow: hidden;
  animation: ct-in .5s ease both;
}
@keyframes ct-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ct-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 13px;
  background: rgba(255,255,255,.03);
  border-bottom: 1px solid rgba(200,250,60,.18);
  font-family: var(--vy-font-mono); font-size: 11px; color: var(--vy-fg-dim);
}
.ct-dots { display: inline-flex; gap: 6px; }
.ct-dots i { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.ct-dots i.r { background: #ff5f57; }
.ct-dots i.y { background: #febc2e; }
.ct-dots i.g { background: #28c840; }
.ct-title { letter-spacing: .14em; text-transform: uppercase; }
.ct-actions { margin-left: auto; display: flex; gap: 14px; }
.ct-actions button {
  font-family: var(--vy-font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--vy-fg-dim); cursor: pointer;
}
.ct-actions button:hover { color: var(--vy-acid); }
.ct-body {
  margin: 0;
  padding: 18px 20px;
  max-height: 462px;          /* once the listing grows past this it scrolls */
  overflow-y: auto;
  font-family: var(--vy-font-mono);
  font-size: 13px; line-height: 1.55;
  color: #c8fa3c;             /* acid neon — matches the lightning bolt */
  text-shadow: 0 0 9px rgba(200,250,60,.42);
  white-space: pre-wrap;
  word-break: break-word;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0 2px, rgba(60,72,0,.12) 2px 4px); /* faint scanlines */
}
.ct-body code { font-family: inherit; color: inherit; }
.ct-body::-webkit-scrollbar { width: 9px; }
.ct-body::-webkit-scrollbar-thumb { background: rgba(200,250,60,.30); border-radius: 6px; }
.ct-cursor {
  display: inline-block;
  width: 9px; height: 1.05em;
  background: #c8fa3c;
  box-shadow: 0 0 12px rgba(200,250,60,.9);
  vertical-align: text-bottom;
  margin-left: 2px;
  animation: ct-blink 1s steps(1) infinite;
}
@keyframes ct-blink { 50% { opacity: 0; } }

.arrow-down {
  position: absolute;
  width: 10px;
  color: var(--vy-fg-dim);
  font-family: var(--vy-font-mono);
}

/* =========================================================
   08 FOOTER — rotating credits + contact
   ========================================================= */
.footer-scene {
  position: relative;
  overflow: hidden;
}
.lens-flare {
  position: absolute;
  width: 700px; height: 700px;
  left: -180px; bottom: -260px;
  background: radial-gradient(circle at center,
    rgba(255,150,80,.18) 0%,
    rgba(255,140,60,.10) 22%,
    rgba(255,100,40,.04) 42%,
    transparent 65%);
  filter: blur(8px);
  pointer-events: none;
}
.lens-flare::before, .lens-flare::after {
  content: ""; position: absolute;
  border-radius: 999px; filter: blur(2px);
  --lf-r: 72px;                 /* orbit radius around the shared center */
  left: 42%; top: 44%;          /* both anchored to the same point */
  will-change: transform;
}
/* big orb — orbits one side */
.lens-flare::before {
  width: 80px; height: 80px;
  background: radial-gradient(circle, rgba(255,180,120,.4), transparent 70%);
  animation: lf-orbit-a 8s linear infinite;
}
/* small orb — kept 180° opposite so the two circle each other */
.lens-flare::after {
  width: 50px; height: 50px;
  background: radial-gradient(circle, rgba(255,170,110,.35), transparent 70%);
  animation: lf-orbit-b 8s linear infinite;
}
/* two fast revolutions (0→40%), then a slow drift for the last ~4s.
   ends on a 360° multiple of the start so the loop is seamless. */
@keyframes lf-orbit-a {
  0%   { transform: translate(-50%,-50%) rotate(0deg)    translate(var(--lf-r)); }
  22%  { transform: translate(-50%,-50%) rotate(360deg)  translate(var(--lf-r)); }
  40%  { transform: translate(-50%,-50%) rotate(720deg)  translate(var(--lf-r)); }
  52%  { transform: translate(-50%,-50%) rotate(800deg)  translate(var(--lf-r)); }
  100% { transform: translate(-50%,-50%) rotate(1080deg) translate(var(--lf-r)); }
}
@keyframes lf-orbit-b {
  0%   { transform: translate(-50%,-50%) rotate(180deg)  translate(var(--lf-r)); }
  22%  { transform: translate(-50%,-50%) rotate(540deg)  translate(var(--lf-r)); }
  40%  { transform: translate(-50%,-50%) rotate(900deg)  translate(var(--lf-r)); }
  52%  { transform: translate(-50%,-50%) rotate(980deg)  translate(var(--lf-r)); }
  100% { transform: translate(-50%,-50%) rotate(1260deg) translate(var(--lf-r)); }
}
@media (prefers-reduced-motion: reduce) {
  .lens-flare::before, .lens-flare::after { animation: none; }
}

/* clicking the Patch Bay label sends the flare (orbs keep spinning) on a J-shaped
   path — first up past the patch label, then right off-screen. */
.lens-flare.eject { animation: lf-fly 1.8s cubic-bezier(.42, 0, .58, 1) forwards; }
@keyframes lf-fly {
  0%   { transform: translate(0, 0); }
  38%  { transform: translate(32vw, -58vh); }   /* arc up past the Patch Bay · Comms label */
  100% { transform: translate(130vw, -58vh); }  /* then shoot right off the screen */
}
/* …then 5s after the click the orbs fade back into the bottom-left corner */
.lens-flare.returning { animation: lf-return .85s ease both; }
@keyframes lf-return {
  0%   { opacity: 0; transform: translateX(60px); }
  100% { opacity: 1; transform: translateX(0); }
}

.credits-orbit {
  position: relative;
  width: 240px; height: 220px;
  margin: 0 auto 50px;
}
.credits-orbit span {
  position: absolute;
  font-family: var(--vy-font-mono);
  font-size: 20px;
  letter-spacing: 0;
  color: var(--vy-fg);
  transform-origin: center;
  text-transform: uppercase;
}

.credits-block {
  text-align: center;
  font-family: var(--vy-font-mono);
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  line-height: 2;
  color: var(--vy-fg);
  position: relative;
  z-index: 2;
}
.credits-block .sm { font-size: 11px; color: var(--vy-fg-dim); letter-spacing: .26em; }
.credits-block .url { color: var(--vy-fg); margin-top: 18px; display: inline-block; }
.credits-block .url:hover { color: var(--vy-acid); }

.contact-grid {
  max-width: 1100px;
  margin: 20px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  padding: 0 6vw;
}
.contact-info {
  font-family: var(--vy-font-mono);
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 2;
}
.contact-info .lbl { color: var(--vy-fg-dim); font-size: 10px; letter-spacing: .22em; display: block; margin-top: 12px; }
.contact-info a { color: var(--vy-fg); }
.contact-info a:hover { color: var(--vy-acid); }

.contact-form {
  display: flex; flex-direction: column; gap: 12px;
}
.contact-form .row { display: grid; grid-template-columns: 90px 1fr; align-items: center; gap: 12px; border-bottom: 1px solid var(--vy-hair); padding: 12px 0; }
.contact-form .lbl { font-family: var(--vy-font-mono); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--vy-fg-dim); }
.contact-form input, .contact-form textarea {
  background: transparent;
  border: 0;
  color: var(--vy-fg);
  font-family: var(--vy-font-mono);
  font-size: 13px;
  letter-spacing: .08em;
  padding: 4px 0;
  outline: none;
  width: 100%;
}
.contact-form textarea { min-height: 80px; resize: vertical; font-family: var(--vy-font-sans); letter-spacing: 0; font-size: 14px; }
.contact-form .submit-row { border-bottom: 0; justify-content: end; padding-top: 18px; display: flex; }
.contact-form button[type=submit] {
  background: var(--vy-fg);
  color: #000;
  padding: 14px 32px;
  font-family: var(--vy-font-mono);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  border-radius: 999px;
  transition: background .2s, color .2s, box-shadow .2s;
}
.contact-form button[type=submit]:hover { background: var(--vy-acid); box-shadow: var(--vy-glow-acid); }
.contact-form button[type=submit].sent { background: var(--vy-acid); box-shadow: var(--vy-glow-acid); }

.bottom-bar {
  margin-top: 40px;
  padding: 26px 6vw;
  border-top: 1px solid var(--vy-hair-soft);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--vy-font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vy-fg-dim);
}
.bottom-bar .socials { display: flex; gap: 20px; }
.bottom-bar .socials a:hover { color: var(--vy-fg); }

/* =========================================================
   09 GUIDES — download cards (Super-8 tape-label vibe)
   ========================================================= */
.guides-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 30px;
}
.guide-card {
  position: relative;
  background: #0a0a0c;
  border: 1px solid var(--vy-hair);
  padding: 24px 22px 22px;
  display: flex; flex-direction: column;
  min-height: 280px;
  overflow: hidden;
  transition: border-color .2s, transform .25s;
}
.guide-card.available { cursor: pointer; }
.guide-card.available:hover { border-color: var(--vy-acid); transform: translateY(-2px); }

/* sprocket perforations on the left edge — Super-8 film strip */
.guide-card .sprockets {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 18px;
  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0 12px,
      var(--vy-fg) 12px 18px,
      transparent 18px 30px
    );
  -webkit-mask: repeating-linear-gradient(to bottom,
      transparent 0 12px,
      black 12px 18px,
      transparent 18px 30px);
  background: var(--vy-fg);
  opacity: .12;
}
.guide-card .body { padding-left: 16px; flex: 1; display: flex; flex-direction: column; }

.guide-card .tape {
  display: inline-flex; gap: 8px; align-items: center;
  font-family: var(--vy-font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vy-fg-dim);
  padding: 6px 10px;
  background: rgba(255,255,255,.04);
  border: 1px dashed var(--vy-hair-strong);
  align-self: flex-start;
  margin-bottom: 18px;
}
.guide-card .tape .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--vy-acid); box-shadow: 0 0 8px rgba(200,250,60,.7); }
.guide-card.soon .tape .dot { background: var(--vy-fg-faint); box-shadow: none; }

.guide-card h4 {
  font-family: var(--vy-font-display);
  font-size: 38px;
  line-height: .95;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-weight: 400;
  margin-bottom: 8px;
}
.guide-card .sub {
  font-family: var(--vy-font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--vy-fg-dim);
  margin-bottom: 18px;
  line-height: 1.5;
}

.guide-card .specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  font-family: var(--vy-font-mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.guide-card .specs .k { color: var(--vy-fg-dim); }
.guide-card .specs .v { color: var(--vy-fg); }

.guide-card .dl-row {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--vy-hair-soft);
  font-family: var(--vy-font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.guide-card .dl {
  color: var(--vy-fg);
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .2s;
}
.guide-card.available:hover .dl { color: var(--vy-acid); }
.guide-card.soon { opacity: .55; }
.guide-card.soon .dl { color: var(--vy-fg-faint); }

/* edge film numbers like Kodak film stock */
.guide-card .edge-num {
  position: absolute;
  right: 12px; top: 12px;
  font-family: var(--vy-font-mono);
  font-size: 9px;
  letter-spacing: .15em;
  color: var(--vy-fg-dim);
  text-align: right;
  line-height: 1.4;
}

/* =========================================================
   Super-8 textures — film strip + light leaks
   ========================================================= */
.super8-frame {
  position: relative;
  padding: 20px 26px;
  background: rgba(255,255,255,.015);
  border: 1px solid var(--vy-hair-soft);
}
.super8-frame::before,
.super8-frame::after {
  content: ""; position: absolute; top: 0; bottom: 0;
  width: 18px;
  background:
    repeating-linear-gradient(to bottom,
      transparent 0 14px,
      rgba(255,255,255,.16) 14px 22px,
      transparent 22px 36px);
}
.super8-frame::before { left: 0; }
.super8-frame::after { right: 0; }

/* =========================================================
   Lightning Flash — Super-8 style
   ========================================================= */
.lightning-flash {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 9000;
  opacity: 0;
}
.lightning-flash.active {
  animation: lf-seq 1.6s ease-out forwards;
}
.lightning-flash .lf-white {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 40%, rgba(255,255,255,1) 0%, rgba(255,250,220,.85) 20%, rgba(255,220,160,.4) 50%, transparent 80%),
    rgba(255,255,250,.92);
  mix-blend-mode: screen;
}
.lightning-flash .lf-bolt {
  position: absolute; inset: 0;
  background-image: var(--bolt-url, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 40px rgba(255,250,200,1)) drop-shadow(0 0 80px rgba(255,220,140,.8));
  opacity: 0;
}
.lightning-flash .lf-streak {
  position: absolute;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(200,235,255,.0) 18%,
    rgba(220,245,255,.95) 50%,
    rgba(200,235,255,.0) 82%,
    transparent 100%);
  filter: blur(2px);
  mix-blend-mode: screen;
  height: 4px;
  left: -10%; right: -10%;
  opacity: 0;
}
.lightning-flash .lf-streak.s1 { top: 28%; }
.lightning-flash .lf-streak.s2 { top: 52%; transform: rotate(-1.2deg); }
.lightning-flash .lf-streak.s3 { top: 70%; transform: rotate(.8deg); }

.lightning-flash .lf-leak {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,140,60,.55) 0%, rgba(255,90,40,.18) 26%, transparent 56%),
    radial-gradient(circle at 88% 90%, rgba(255,170,90,.45) 0%, rgba(255,120,60,.12) 32%, transparent 64%);
  mix-blend-mode: screen;
  opacity: 0;
}
.lightning-flash .lf-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.65) 90%, rgba(0,0,0,.95) 100%);
  opacity: 0;
}
.lightning-flash .lf-grain {
  position: absolute; inset: 0;
  background-image: url("assets/grain.svg");
  background-size: 180px;
  mix-blend-mode: overlay;
  opacity: 0;
}

/* Multi-strike Super-8 lightning sequence:
   strike → quick re-strike → afterglow → darken with grain → fade */
@keyframes lf-seq {
  0%   { opacity: 1; }
  /* strike 1 */
  0%, 4%  { background: transparent; }
  100%    { opacity: 0; }
}

/* Per-layer keyframes */
.lightning-flash.active .lf-white { animation: lf-white 1.6s ease-out forwards; }
.lightning-flash.active .lf-bolt  { animation: lf-bolt 1.6s ease-out forwards; }
.lightning-flash.active .lf-streak.s1 { animation: lf-streak 1.6s ease-out forwards; animation-delay: 0s; }
.lightning-flash.active .lf-streak.s2 { animation: lf-streak 1.6s ease-out forwards; animation-delay: .04s; }
.lightning-flash.active .lf-streak.s3 { animation: lf-streak 1.6s ease-out forwards; animation-delay: .08s; }
.lightning-flash.active .lf-leak { animation: lf-leak 1.6s ease-out forwards; }
.lightning-flash.active .lf-vignette { animation: lf-vignette 1.6s ease-out forwards; }
.lightning-flash.active .lf-grain { animation: lf-grain 1.6s linear forwards; }

@keyframes lf-white {
  0%   { opacity: 0; }
  3%   { opacity: 1; }     /* first strike */
  10%  { opacity: .15; }
  14%  { opacity: .9; }    /* second strike */
  22%  { opacity: .1; }
  30%  { opacity: .45; }   /* afterglow */
  60%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes lf-bolt {
  0%   { opacity: 0; transform: scale(.92); }
  3%   { opacity: 1; transform: scale(1.05); }
  10%  { opacity: .25; transform: scale(1); }
  14%  { opacity: .95; transform: scale(1.02); }
  22%  { opacity: .15; transform: scale(1); }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes lf-streak {
  0%   { opacity: 0; }
  3%   { opacity: .9; }
  10%  { opacity: .15; }
  14%  { opacity: .85; }
  22%  { opacity: .1; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}
@keyframes lf-leak {
  0%   { opacity: 0; }
  20%  { opacity: .8; }
  60%  { opacity: .35; }
  100% { opacity: 0; }
}
@keyframes lf-vignette {
  0%   { opacity: 0; }
  35%  { opacity: 1; }     /* the dark "after the flash" frame */
  100% { opacity: 0; }
}
@keyframes lf-grain {
  0%   { opacity: 0; }
  30%  { opacity: .65; }   /* burst of grain right after the flash */
  100% { opacity: 0; }
}
.ana-flare {
  position: absolute;
  height: 2px;
  background: linear-gradient(to right,
    transparent 0%,
    rgba(110,200,255,.0) 10%,
    rgba(140,210,255,.55) 50%,
    rgba(110,200,255,.0) 90%,
    transparent 100%);
  filter: blur(1.2px);
  mix-blend-mode: screen;
  pointer-events: none;
  opacity: .8;
}
.ana-flare::before, .ana-flare::after {
  content: ""; position: absolute; top: 50%;
  width: 22px; height: 22px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(160,220,255,.65), rgba(120,200,255,.15) 40%, transparent 70%);
  filter: blur(2px);
}
.ana-flare::before { left: 40%; }
.ana-flare::after { left: 56%; width: 14px; height: 14px; }

/* .ana-live — the two balls drift around and the streak bends the light for
   ~2s, then hold still; the whole cycle is 12s so it repeats ~10s after settling. */
.ana-live { animation: ana-bend 12s ease-in-out infinite; }
.ana-live::before { animation: ana-ball-a 12s ease-in-out infinite; }
.ana-live::after  { animation: ana-ball-b 12s ease-in-out infinite; }

@keyframes ana-bend {
  0%      { transform: scaleY(1)   skewX(0deg);    opacity: .8; }
  5%      { transform: scaleY(1.8) skewX(-2.5deg); opacity: 1; }
  10%     { transform: scaleY(1.45) skewX(2deg);   opacity: 1; }
  14%     { transform: scaleY(1.65) skewX(-1deg);  opacity: 1; }
  16.67%  { transform: scaleY(1)   skewX(0deg);    opacity: .8; }
  100%    { transform: scaleY(1)   skewX(0deg);    opacity: .8; }
}
@keyframes ana-ball-a {
  0%      { transform: translate(0, -50%)   scale(1); }
  5%      { transform: translate(48px, -50%) scale(1.35); }
  10%     { transform: translate(94px, calc(-50% - 6px)) scale(1.1); }
  14%     { transform: translate(58px, calc(-50% + 5px)) scale(1.2); }
  16.67%  { transform: translate(0, -50%)   scale(1); }
  100%    { transform: translate(0, -50%)   scale(1); }
}
@keyframes ana-ball-b {
  0%      { transform: translate(0, -50%)   scale(1); }
  5%      { transform: translate(-42px, -50%) scale(1.3); }
  10%     { transform: translate(-88px, calc(-50% + 6px)) scale(1.05); }
  14%     { transform: translate(-52px, calc(-50% - 5px)) scale(1.18); }
  16.67%  { transform: translate(0, -50%)   scale(1); }
  100%    { transform: translate(0, -50%)   scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .ana-live, .ana-live::before, .ana-live::after { animation: none; }
}

/* =========================================================
   Film scratch lines — fixed overlay, three angled hairlines.
   Each line gently sways ~7deg (the "flow"); scrolling into the
   Schedule / Reel / Stills scenes fires a 1s anamorphic blue bloom.
   ========================================================= */
.film-lines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;            /* behind section content (sections are z-index:1) but above the black canvas */
  mix-blend-mode: screen;
  overflow: hidden;
}
.fl-line {
  position: absolute;
  left: -12%;
  right: -12%;
  height: 1.5px;
}
/* base tilt + vertical placement (mirrors the original 173/168/182deg lines) */
.fl-line.l1 { top: 26%; transform: rotate(-6.5deg); }
.fl-line.l2 { top: 49%; transform: rotate(-4deg); }
.fl-line.l3 { top: 71%; transform: rotate(-7deg); }

/* swaying layer — rotation oscillates +/-3.5deg (7deg total) on top of the
   base tilt; staggered durations + negative delays keep the lines out of phase */
.fl-ray {
  position: absolute;
  inset: 0;
  transform-origin: center;
  animation: fl-sway ease-in-out infinite;
  will-change: transform;
}
.fl-line.l1 .fl-ray { animation-duration: 11s;   animation-delay: -2s; }
.fl-line.l2 .fl-ray { animation-duration: 13.5s; animation-delay: -6s; }
.fl-line.l3 .fl-ray { animation-duration: 9.5s;  animation-delay: -1s; }

@keyframes fl-sway {
  0%, 100% { transform: rotate(-3.5deg); }
  50%      { transform: rotate(3.5deg); }
}

/* the always-on faint white hairline */
.fl-white {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    transparent 0%, rgba(255,255,255,0) 8%,
    rgba(255,255,255,.16) 50%,
    rgba(255,255,255,0) 92%, transparent 100%);
  filter: blur(.4px);
}
/* the anamorphic blue bloom layer — invisible until a target scene scrolls in */
.fl-blue {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    transparent 0%, rgba(140,210,255,0) 12%,
    rgba(175,228,255,.95) 50%,
    rgba(140,210,255,0) 88%, transparent 100%);
  filter: blur(1.4px);
  opacity: 0;
  will-change: opacity, filter, transform, box-shadow;
}
.film-lines.anamorph .l1 .fl-blue { animation: fl-bloom 1.15s ease-out 0s   1; }
.film-lines.anamorph .l2 .fl-blue { animation: fl-bloom 1.15s ease-out .10s 1; }
.film-lines.anamorph .l3 .fl-blue { animation: fl-bloom 1.15s ease-out .20s 1; }

/* anamorphic flash: bright blue, horizontal stretch + wide blue glow, then settle */
@keyframes fl-bloom {
  0%   { opacity: 0;   filter: blur(1px)   brightness(1);   transform: scaleX(1);    box-shadow: 0 0 0 0 rgba(150,215,255,0); }
  10%  { opacity: 1;   filter: blur(3px)   brightness(2.6); transform: scaleX(1.05); box-shadow: 0 0 26px 2px rgba(150,215,255,.55); }
  40%  { opacity: .85; filter: blur(2px)   brightness(1.8); transform: scaleX(1.02); box-shadow: 0 0 16px 1px rgba(150,215,255,.32); }
  100% { opacity: 0;   filter: blur(1px)   brightness(1);   transform: scaleX(1);    box-shadow: 0 0 0 0 rgba(150,215,255,0); }
}

@media (prefers-reduced-motion: reduce) {
  .fl-ray { animation: none; }
  .film-lines.anamorph .fl-blue { animation: none; }
}

/* =========================================================
   Paparazzi flash — fired by clicking a lightning bolt.
   A flurry of camera pops across the frame with Super-8
   warmth: orange light leak, grain jitter, anamorphic streaks.
   ========================================================= */
.paparazzi {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  overflow: hidden;
}
/* individual camera flash pop */
.pap-pop {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(255,255,250,.97) 0%,
    rgba(255,242,212,.62) 22%,
    rgba(255,202,140,.20) 46%,
    transparent 70%);
  mix-blend-mode: screen;
  filter: blur(2px);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.2);
  animation-name: pap-pop;
  animation-timing-function: cubic-bezier(.15,.7,.3,1);
  animation-fill-mode: both;
  will-change: opacity, transform;
}
@keyframes pap-pop {
  0%   { opacity: 0; transform: translate(-50%,-50%) scale(.18); }
  16%  { opacity: 1; transform: translate(-50%,-50%) scale(1.04); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.3); }
}
/* warm Super-8 light leak that washes in with the burst */
.pap-leak {
  position: absolute; inset: 0;
  mix-blend-mode: screen;
  opacity: 0;
  background:
    radial-gradient(60% 52% at 14% 12%, rgba(255,150,70,.38), transparent 62%),
    radial-gradient(56% 46% at 88% 90%, rgba(255,184,112,.30), transparent 60%);
  animation: pap-leak 1.9s ease-in-out both;
}
@keyframes pap-leak {
  0% { opacity: 0; } 12% { opacity: .9; } 48% { opacity: .38; } 100% { opacity: 0; }
}
/* film grain jitter */
.pap-grain {
  position: absolute; inset: -40%;
  background-image: url("assets/grain.svg");
  background-size: 240px;
  mix-blend-mode: overlay;
  opacity: 0;
  animation: pap-grain 1.9s steps(7) both;
}
@keyframes pap-grain {
  0% { opacity: 0; transform: translate(0,0); }
  10% { opacity: .55; }
  100% { opacity: 0; transform: translate(3%, -2%); }
}
/* anamorphic horizontal streaks flickering across the flash */
.pap-streak {
  position: absolute; left: -10%; right: -10%; height: 3px;
  background: linear-gradient(to right, transparent, rgba(190,235,255,.72), transparent);
  filter: blur(2px);
  mix-blend-mode: screen;
  opacity: 0;
}
.pap-streak.s1 { top: 34%; animation: pap-streak 1.9s ease-out both; }
.pap-streak.s2 { top: 64%; animation: pap-streak 1.9s ease-out .15s both; }
@keyframes pap-streak {
  0% { opacity: 0; transform: scaleX(.4); }
  14% { opacity: .85; transform: scaleX(1.05); }
  40% { opacity: .2; }
  100% { opacity: 0; transform: scaleX(1.1); }
}
@media (prefers-reduced-motion: reduce) {
  .pap-pop, .pap-leak, .pap-grain, .pap-streak { animation-duration: .3s; }
}

/* vignette */
.vignette {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at center,
    transparent 30%,
    rgba(0,0,0,.4) 70%,
    rgba(0,0,0,.85) 100%);
}

/* light leak — orange/red film leak overlay */
.leak-tl {
  position: absolute;
  width: 420px; height: 420px;
  top: -120px; left: -120px;
  background: radial-gradient(circle at center,
    rgba(255,90,40,.16) 0%,
    rgba(255,80,30,.07) 30%,
    transparent 65%);
  pointer-events: none;
  filter: blur(20px);
  mix-blend-mode: screen;
}
.leak-br {
  position: absolute;
  width: 520px; height: 520px;
  bottom: -160px; right: -120px;
  background: radial-gradient(circle at center,
    rgba(255,160,90,.12) 0%,
    rgba(255,120,60,.06) 30%,
    transparent 65%);
  pointer-events: none;
  filter: blur(28px);
  mix-blend-mode: screen;
}

/* Super 8 tape strip across a section */
.tape-strip {
  display: flex; align-items: center; gap: 0;
  margin: 18px 0;
  padding: 0;
  border-top: 1px solid var(--vy-hair);
  border-bottom: 1px solid var(--vy-hair);
  font-family: var(--vy-font-mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--vy-fg-dim);
  overflow: hidden;
  white-space: nowrap;
}
.tape-strip .roll {
  display: inline-flex; gap: 36px;
  padding: 10px 0;
  animation: roll 80s linear infinite;
}
.tape-strip .roll span { display: inline-flex; gap: 10px; align-items: center; }
.tape-strip .roll span::before { content: "◆"; color: var(--vy-fg-faint); font-size: 8px; }
@keyframes roll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* dymo-style label */
.dymo-label {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--vy-fg);
  color: #000;
  padding: 5px 12px 6px;
  font-family: var(--vy-font-mono);
  font-size: 12px;          /* +20% */
  letter-spacing: .25em;
  text-transform: uppercase;
  font-weight: 700;
  border-radius: 4px;
  transform: rotate(-1.5deg);
}

/* =========================================================
   Misc
   ========================================================= */
.hr-mono {
  margin: 30px 0 50px;
  font-family: var(--vy-font-mono);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--vy-fg-dim);
  display: flex; align-items: center; gap: 14px;
}
.hr-mono::before, .hr-mono::after { content: ""; flex: 1; height: 1px; background: var(--vy-hair); }

.eyebrow {
  font-family: var(--vy-font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vy-fg-dim);
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 12px;
}
.eyebrow::before { content: ""; width: 18px; height: 1px; background: var(--vy-fg-dim); }

h2.section-title {
  font-family: var(--vy-font-display);
  font-size: clamp(56px, 9vw, 140px);
  line-height: .9;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-weight: 400;
}
h2.section-title em {
  font-style: italic;
  font-family: "UnifrakturMaguntia", serif;
  font-size: .8em;
  letter-spacing: -.01em;
  text-transform: lowercase;
  color: var(--vy-fg-dim);
}

.section-head {
  display: flex; justify-content: space-between; align-items: end;
  margin-bottom: 16px;
  flex-wrap: wrap; gap: 18px;
}
.section-head .meta {
  font-family: var(--vy-font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vy-fg-dim);
  text-align: right;
  line-height: 1.7;
}

/* responsive */
@media (max-width: 880px) {
  .reel { grid-template-columns: repeat(6, 1fr); }
  .reel .clip-8, .reel .clip-4, .reel .clip-6, .reel .clip-12 { grid-column: span 6; aspect-ratio: 16/9; }
  .photo-grid { grid-template-columns: repeat(6, 1fr); }
  .photo.p1, .photo.p2, .photo.p3, .photo.p4, .photo.p5, .photo.p6, .photo.p7, .photo.p8 {
    grid-column: span 6; aspect-ratio: 4/3;
  }
  .ai-grid { grid-template-columns: 1fr; }
  .hero-top { grid-template-columns: 1fr; }
  .hero-bottom { grid-template-columns: 1fr; }
  .intro-card .systems-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .chrome nav { display: none; }
}

/* ====================================================================
   📱 MOBILE — iPhone 16/17 Pro pass (≤ 600px)
   - tightens the cinematic full-bleed padding to actually fit a phone
   - kills min-height:100vh on most sections so short sections don't have
     a viewport of dead space below their content
   - collapses every grid that was 2/3 columns into a single column
   - safe-area-inset (Dynamic Island top + home-bar bottom) honored on
     the fixed chrome bar and the scroll rail
   - hides the rotated side labels on the Studio badge that overflow
     the screen on narrow viewports
   ==================================================================== */
@media (max-width: 600px) {
  /* fixed top chrome — safe area aware, tighter, brand only */
  .chrome {
    padding-top: calc(max(env(safe-area-inset-top), 8px));
    padding-bottom: 8px;
    padding-left: 14px; padding-right: 14px;
    font-size: 10px;
    gap: 10px;
  }
  .chrome .brand { gap: 10px; }
  .chrome .rgc-mark { font-size: 18px; }
  .chrome .rec { font-size: 9px; }
  .chrome .right { gap: 10px; }
  .chrome .right span { font-size: 9px; }
  .scroll-rail { top: calc(max(env(safe-area-inset-top), 8px) + 36px); }

  /* base scene — drop the 100vh forcing, much tighter padding */
  section.scene {
    padding: 80px 5vw 56px;
    min-height: auto;
    justify-content: flex-start;
  }
  section.scene.compact { padding: 56px 5vw 40px; }
  /* nudge our earlier per-section overrides into mobile values */
  #s01 { padding-top: 80px; }
  #s01 .scene-label { top: 56px; }
  #s05, #s06 { padding-bottom: 48px; }

  /* scene label closer to the top, smaller, less letter-spacing */
  .scene-label {
    top: 56px; left: 5vw;
    gap: 8px; font-size: 9.5px; letter-spacing: .14em;
  }
  .scene-label .num { padding: 2px 6px; }
  .scene-label .tick { display: none; }     /* the long "/ Block 04.12 — 06.21" tag overflows on phone */

  /* corner brackets are decorative and clip on narrow screens */
  .brackets { display: none; }

  /* section heads stack title above meta, smaller display type */
  .section-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .section-head .meta { font-size: 10px; line-height: 1.55; }
  h2.section-title { font-size: clamp(40px, 13vw, 70px); }
  h2.section-title em { font-size: .85em; }

  /* ───── 00 HERO ───── */
  /* reorder on mobile: wordmark first, slate meta second, bolt + tag last */
  .hero {
    padding: 60px 0 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .hero-center { order: 1; padding-top: 8px; }
  .hero-top    { order: 2; }
  .hero-bottom { order: 3; }
  .hero-top { padding: 28px 5vw 24px; gap: 18px; grid-template-columns: 1fr; }
  .hero-top .slate-name { font-size: clamp(28px, 9vw, 52px); }
  .hero-top .stack { grid-template-columns: 70px 1fr; gap: 3px 12px; font-size: 10px; }
  .hero-center { padding: 12px 5vw; }
  .glitch-blackletter { font-size: clamp(48px, 17vw, 110px); letter-spacing: -.02em; white-space: normal; text-align: center; }
  .reg-circle { right: -26px; top: 8%; width: 22px; height: 22px; font-size: 10px; }
  .hero-bottom { padding: 28px 5vw 30px; gap: 18px; grid-template-columns: 1fr; text-align: center; }
  .hero-bottom .right { text-align: center; }
  .hero-bottom .col { align-items: center; }
  .bolt { display: grid; place-items: center; }
  .bolt svg { width: 36px; height: 60px; }
  .scroll-hint { bottom: calc(env(safe-area-inset-bottom) + 8px); font-size: 9px; }
  .tv-noise { transform: scale(.65); }

  /* ───── 01 SCHEDULE ───── */
  .slate-grid { gap: 18px; }
  .slate-rows { gap: 10px; }
  .slate-row { flex-wrap: wrap; gap: 10px 14px; padding-left: 0 !important; font-size: 11px; }
  .slate-item { gap: 6px; }
  .slate-item .date { font-size: 10px; }
  .bolt-wrap { flex-direction: column; gap: 14px; text-align: center; margin-top: 22px; }
  .bolt-wrap .l, .bolt-wrap .r { text-align: center; }

  /* ───── 02 REEL ───── */
  .reel { grid-template-columns: 1fr; gap: 12px; }
  .reel .clip-8, .reel .clip-4, .reel .clip-6, .reel .clip-12 {
    grid-column: 1 / -1; aspect-ratio: 16 / 9;
  }
  .timecode-strip { flex-wrap: wrap; font-size: 9.5px; gap: 8px 12px; }

  /* ───── 03 STILLS ───── */
  .photo-grid { grid-template-columns: 1fr; gap: 10px; }
  .photo.p1, .photo.p2, .photo.p3, .photo.p4,
  .photo.p5, .photo.p6, .photo.p7, .photo.p8 {
    grid-column: 1 / -1; aspect-ratio: 4 / 3;
  }
  .photo .ph-num, .photo .ph-meta { font-size: 9px; }

  /* ───── 04 FILMCAM (launcher card on main page) ───── */
  .cam-stage.no-frame { max-width: 100%; padding: 0; }
  .preset-chips { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
  .preset-chip { padding: 8px 9px; }
  .preset-chip .pc-name { font-size: 11.5px; }
  .preset-chip .pc-sub { font-size: 8.5px; }
  .cam-readout { grid-template-columns: repeat(2, 1fr); gap: 8px; font-size: 9px; }
  .cam-readout > div { padding: 9px 10px; }
  .cam-readout .v { font-size: 12px; }
  .cam-shutter-btn { width: 100%; justify-content: center; }

  /* ───── 05 GUIDES ───── */
  .tape-strip { font-size: 9px; }
  .guides-grid { grid-template-columns: 1fr; gap: 14px; }
  .guide-card { padding: 18px 16px; }
  .guide-card h4 { font-size: 22px; }
  .guide-card .sub { font-size: 12px; }
  .guide-card .edge-num { font-size: 8px; right: 10px; top: 10px; }
  .guide-card .sprockets { left: 6px; }

  /* ───── 06 AI MEDIA ───── */
  .ai-grid { grid-template-columns: 1fr; gap: 14px; }
  .ai-card { padding: 24px 20px; min-height: auto; }
  .ai-card h3 { font-size: 26px; }
  .ai-cta { flex-direction: column; align-items: stretch; gap: 16px; }
  .ai-cta .btn-acid { width: 100%; justify-content: center; text-align: center; }
  .ai-glitch { font-size: clamp(36px, 12vw, 70px); }

  /* ───── 07 STUDIO ───── */
  .badge-card { padding: 32px 18px; }
  .badge-card .side-text { display: none; }      /* rotated edge labels overlap on narrow */
  .ignite-bolt { width: 110px; height: 110px; }
  .ignite-bolt svg { width: 58px; height: 96px; }
  .badge-card .subline { font-size: 10px; letter-spacing: .18em; }
  .badge-table { width: 100%; grid-template-columns: 1fr 1fr; }
  .badge-table > div { padding: 9px 12px; font-size: 9px; }
  .badge-rows { width: 100%; max-width: 100%; }
  .badge-row { font-size: 9px; padding: 9px 12px; }
  .badge-card .footer-text { font-size: 9.5px; letter-spacing: .18em; }

  /* Studio build terminal */
  .code-term { width: 100%; }
  .ct-bar { padding: 7px 10px; font-size: 10px; }
  .ct-title { font-size: 9px; letter-spacing: .10em; }
  .ct-actions button { font-size: 10px; }
  .ct-body { padding: 12px 14px; font-size: 11px; max-height: 56vh; }

  /* ───── 08 CONTACT ───── */
  .contact-grid { grid-template-columns: 1fr; gap: 22px; }
  .contact-info .lbl { margin-top: 14px; }
  .contact-form { padding: 18px 14px; }
  .contact-form .row { grid-template-columns: 1fr; gap: 4px; }
  .contact-form .row .lbl { padding-top: 0; }
  .contact-form input, .contact-form textarea { font-size: 16px; }    /* 16px = no iOS zoom on focus */
  .contact-form button { width: 100%; padding: 14px 18px; min-height: 48px; }
  .bottom-bar { flex-direction: column; align-items: center; gap: 10px; text-align: center; padding-bottom: max(env(safe-area-inset-bottom), 18px); }
  .bottom-bar .socials { justify-content: center; flex-wrap: wrap; gap: 14px; }
  .dymo-label { font-size: 11px; }

  /* ───── Lightbox ───── */
  .lightbox {
    display: flex;
    flex-direction: column;
    justify-content: center;     /* center the whole image+meta group vertically */
    align-items: center;
    gap: 14px;
    padding:
      max(env(safe-area-inset-top), 44px)
      4vw
      max(env(safe-area-inset-bottom), 44px);
  }
  .lightbox img {
    max-width: 92vw;
    max-height: 72vh;            /* leaves room for meta + close button */
    margin: 0 auto;
  }
  .lb-close {
    top: max(env(safe-area-inset-top), 14px);
    right: 14px;
    font-size: 11px;
  }
  .lb-meta {
    position: static;            /* sit just under the image inside the flex column */
    bottom: auto; left: auto; right: auto;
    font-size: 10px;
    text-align: center;
    padding: 0 14px;
  }

  /* misc tap targets */
  button, .cam-shutter-btn, .cam-btn, .btn-acid { min-height: 44px; }
}

/* a notch tighter for very narrow phones (<= 380px, iPhone SE / mini sizes) */
@media (max-width: 380px) {
  section.scene { padding: 70px 4vw 44px; }
  .scene-label { font-size: 9px; }
  h2.section-title { font-size: clamp(34px, 13vw, 56px); }
  .preset-chips { grid-template-columns: 1fr 1fr !important; }
  .hero-top .stack { grid-template-columns: 60px 1fr; font-size: 9.5px; }
  .glitch-blackletter { font-size: clamp(40px, 17vw, 88px); }
}

/* ====================================================================
   📱 iPhone 17 / iPhone 17 Pro fitting pass (extra polish on ≤ 600px)
   - hero now wordmark-first; tighten its top spacing so the wordmark
     actually starts near the top instead of being floated mid-viewport
   - ensure no horizontal overflow at any width
   - shrink scene padding-bottom so sections don't bank dead space
   - lock the album modal scroll
   - tap targets for camera + share buttons
   ==================================================================== */
@media (max-width: 600px) {
  html, body { max-width: 100vw; overflow-x: hidden; }

  /* Hero: now flex-column with wordmark first. Pull it tight to the top. */
  .hero {
    padding-top: max(env(safe-area-inset-top), 56px);
    justify-content: flex-start;
  }
  .hero-center {
    padding: 14px 4vw 4px;
    min-height: auto;
  }
  /* wordmark hits the top right after chrome — give it more presence */
  .glitch-blackletter {
    font-size: clamp(56px, 19vw, 140px);
    line-height: .92;
    margin-top: 4px;
  }
  .reg-circle {
    right: -24px; top: 6%;
    width: 20px; height: 20px; font-size: 9px;
    border-width: 1px;
  }

  /* slate meta after the wordmark, compact */
  .hero-top {
    padding: 20px 5vw 18px;
    gap: 12px;
  }
  .hero-top .stack {
    grid-template-columns: 60px 1fr;
    gap: 3px 10px;
    font-size: 10px;
    line-height: 1.5;
  }

  /* bolt + tagline */
  .hero-bottom {
    padding: 16px 5vw max(env(safe-area-inset-bottom), 22px);
    gap: 14px;
  }
  .hero-bottom .ttl { font-size: 9.5px; }
  .hero-bottom .col span { font-size: 12px; }

  /* Sections shouldn't bank dead bottom space */
  section.scene { padding-bottom: 44px; }
  #s05, #s06 { padding-bottom: 44px; }

  /* Section heads: title left-aligned, meta wraps */
  .section-head .meta { max-width: 100%; }

  /* Reel + Stills: thinner gap so more shows per scroll */
  .reel, .photo-grid { gap: 8px; margin-top: 16px; }

  /* AI cards: less padding so type breathes */
  .ai-card { padding: 22px 18px; }
  .ai-card h3 { font-size: 24px; }
  .ai-card p  { font-size: 13px; }
  .chips { gap: 8px; }
  .ai-glitch { font-size: clamp(40px, 14vw, 80px); }

  /* Studio badge: tighten inner padding so it fits */
  .badge-card { padding: 28px 14px; max-width: 100%; }
  .badge-table > div { padding: 8px 10px; font-size: 9px; }
  .badge-row { font-size: 9px; padding: 8px 10px; }

  /* Build terminal */
  .ct-body { font-size: 10.5px; padding: 10px 12px; max-height: 50vh; }

  /* Contact form anti-zoom + tighter */
  .contact-form { padding: 16px 12px; gap: 12px; }
  .contact-form input, .contact-form textarea {
    font-size: 16px;     /* prevents iOS focus zoom */
    padding: 10px 12px;
  }
  .contact-form .row { gap: 4px; }
  .contact-form button { font-size: 14px; padding: 14px 18px; min-height: 50px; }
  .dymo-label { font-size: 10.5px; }

  /* Album modal — used inside /cam, no harm having styles here too */
  .album-tile { aspect-ratio: 9 / 16; }   /* fits two per row in a tighter ratio */

  /* the launcher card on main page 04 */
  .cam-stage.no-frame { margin-top: 14px; }

  /* every interactive button gets a real tap target */
  button, .cam-shutter-btn, .btn-acid, .cam-btn,
  .ai-cta .btn-acid, .submit-row button { min-height: 48px; }
}

/* iPhone 17 Pro Max (430px logical) — slightly more horizontal breathing room */
@media (min-width: 401px) and (max-width: 480px) {
  section.scene { padding-left: 6vw; padding-right: 6vw; }
  .glitch-blackletter { font-size: clamp(70px, 19vw, 150px); }
}