/* Miami theme for the home page. AI (Claude) wrote this file and theme.js at my request to give the site its retro look.
   The home page keeps its own <style> block; this file loads after it, so these rules win.
   Colors are variables; theme.js sets body[data-theme] to whichever week section is on screen.

   How to read CSS: each block is "which elements { what they look like }".
     .name   = elements with class="name"       #name = the element with id="name"
     a b     = b elements inside a               a > b = b directly inside a
     var(--x) uses a variable; @keyframes defines an animation; @media applies only to some screens.

   Sections in this file, top to bottom:
     1. Colors        - the palette variables, and one palette per week
     2. Content panel - the dark center column the text sits on
     3. Week sections - the big neon week titles
     4. Reveals       - the flicker / glitch-in animations
     5. Scene         - sky, sun, skyline, grid floor, the side drawings
     6. Overlays      - progress car, VHS text, scanlines
     7. Screen sizes  - phone/tablet tweaks and the reduced-motion setting */

/* ===================== 1. Colors ===================== */

/* Values used everywhere: --ink is the dark fill inside drawings, --panel is the content column width */
:root {
  --ink: #0a0420;
  --panel: 940px;
}

/* Registering the colors lets them fade smoothly from one week's palette to the next */
@property --c1   { syntax: "<color>"; inherits: true; initial-value: #ff2d95; }
@property --c2   { syntax: "<color>"; inherits: true; initial-value: #2de2e6; }
@property --sky1 { syntax: "<color>"; inherits: true; initial-value: #1a0638; }
@property --sky2 { syntax: "<color>"; inherits: true; initial-value: #5a1170; }
@property --sky3 { syntax: "<color>"; inherits: true; initial-value: #ff5e8a; }
@property --sun1 { syntax: "<color>"; inherits: true; initial-value: #ffe259; }
@property --sun2 { syntax: "<color>"; inherits: true; initial-value: #ff2d95; }

/* The default palette (used by the top section and the final project).
   --c1 = main neon color, --c2 = second neon color,
   --sky1/2/3 = sky gradient top to bottom, --sun1/2 = sun gradient top to bottom.
   "transition" fades between palettes over 1.2 seconds when the week changes. */
body {
  transition: --c1 1.2s, --c2 1.2s, --sky1 1.2s, --sky2 1.2s, --sky3 1.2s, --sun1 1.2s, --sun2 1.2s;
  --c1: #ff2d95;
  --c2: #2de2e6;
  --sky1: #1a0638;
  --sky2: #5a1170;
  --sky3: #ff5e8a;
  --sun1: #ffe259;
  --sun2: #ff2d95;
}
/* One palette per week. theme.js sets data-theme on <body>, and the matching line wins.
   WEEK 1 (Sunset Beach): orange neon (--c1) and pink (--c2), with an orange-to-pink sunset sky. */
body[data-theme="week01"] { --c1: #ff8a3d; --c2: #ff2d95; --sky1: #2a0a3a; --sky2: #a3245e; --sky3: #ffa04d; --sun1: #fff27a; --sun2: #ff5e3a; }
body[data-theme="week02"] { --c1: #ff5fd2; --c2: #3dffd0; --sky1: #160a3a; --sky2: #6b1f8a; --sky3: #ff7ac0; --sun1: #ffd6f5; --sun2: #ff5fd2; }
body[data-theme="week03"] { --c1: #2de2e6; --c2: #4d7cff; --sky1: #020a2a; --sky2: #0c2a6b; --sky3: #2a6fb0; --sun1: #bff8ff; --sun2: #2d8cff; }
body[data-theme="week04"] { --c1: #b066ff; --c2: #ffb347; --sky1: #120530; --sky2: #4a1a7a; --sky3: #ff8a5c; --sun1: #ffe08a; --sun2: #b066ff; }
/* WEEK 6 (Port of Miami): teal and amber, like dock lights over the water at dusk */
body[data-theme="week06"] { --c1: #00e5c7; --c2: #ffb300; --sky1: #04142e; --sky2: #0f3f5c; --sky3: #e0784a; --sun1: #ffe08a; --sun2: #ff8a3d; }
body[data-theme="week05"] { --c1: #ff3b5c; --c2: #3b8cff; --sky1: #0a0218; --sky2: #2a0a3a; --sky3: #6a1030; --sun1: #ff9a9a; --sun2: #ff3b5c; }

/* ===================== 2. Content panel (the scene shows on both sides of it) ===================== */

/* Very dark color behind everything */
html {
  background: #07011a;
}

/* The page body is the centered column: 900px wide, mostly-opaque dark glass,
   with a thin glowing outline in the week's color */
body {
  position: relative;
  max-width: 900px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 2rem 1.25rem 5rem;
  color: #ece8ff;
  background: rgba(10, 4, 32, 0.86);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--c1) 45%, transparent),
    0 0 60px color-mix(in srgb, var(--c1) 22%, transparent);
}

a {
  color: var(--c2);
}

/* Your name at the top: white fading into the week's two colors, with a glow.
   (background-clip: text paints the gradient inside the letters only) */
.neon-title {
  background: linear-gradient(180deg, #ffffff 0%, var(--c1) 45%, var(--c2) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  filter: drop-shadow(0 0 6px var(--c1)) drop-shadow(0 0 28px var(--c2));
}

.neon-sub {
  color: var(--c2);
  text-shadow: 0 0 8px var(--c2), 0 0 20px color-mix(in srgb, var(--c2) 60%, transparent);
}

/* Regular headings like "My background": glowing uppercase with an underline */
body h1:not(.neon-title) {
  font-family: "Orbitron", sans-serif;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c2);
  text-shadow: 0 0 6px var(--c2), 0 0 22px var(--c2);
  margin-top: 2.4em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid color-mix(in srgb, var(--c1) 50%, transparent);
}

body h3 {
  color: #fff;
  text-shadow: 0 0 10px color-mix(in srgb, var(--c1) 70%, transparent);
}

/* ===================== 3. Week sections ===================== */

/* Each <section class="zone"> is taller than the screen, with its title centered,
   so you spend a moment in each neighborhood while scrolling. Dashed line between weeks. */
.zone {
  min-height: 115vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 0;
  border-bottom: 1px dashed color-mix(in srgb, var(--c1) 35%, transparent);
}

/* The top section (your name and background) starts at the top instead of centered */
.zone:first-of-type {
  min-height: 100vh;
  justify-content: flex-start;
}

/* Blinking "Scroll down to cruise through each week" line */
.zone-hint {
  margin-top: 3rem;
  text-align: center;
  font-family: "Orbitron", sans-serif;
  letter-spacing: 0.2em;
  color: var(--c1);
  animation: flash-a 2s steps(1) infinite;
}

/* Each week is one big neon title that links to its page */
.zone-link {
  display: block;
  text-align: center;
  text-decoration: none;
  transition: transform 0.25s;
}

/* Small spaced-out "WEEK 1" label above the title */
.zone-num {
  display: block;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(1rem, 2.6vw, 1.6rem);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--c1);
  text-shadow: 0 0 8px var(--c1), 0 0 24px var(--c1);
}

/* The giant neon title. clamp(min, preferred, max) sizes it to the screen width.
   Same gradient-in-the-letters trick as your name. */
.zone-title {
  display: block;
  margin-top: 0.15em;
  font-family: "Monoton", cursive;
  font-size: clamp(1.4rem, 6.8vw, 4.6rem);
  overflow-wrap: anywhere;
  line-height: 1.1;
  background: linear-gradient(180deg, #ffffff 0%, var(--c1) 50%, var(--c2) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 6px var(--c1)) drop-shadow(0 0 24px var(--c2));
}

/* Hovering (or tabbing to) a title makes it grow slightly and glow brighter */
.zone-link:hover,
.zone-link:focus-visible {
  transform: scale(1.04);
}

.zone-link:hover .zone-title,
.zone-link:focus-visible .zone-title {
  filter: drop-shadow(0 0 10px var(--c1)) drop-shadow(0 0 40px var(--c2)) brightness(1.25);
}

/* ===================== 4. Scroll reveals (only when theme.js is running) ===================== */

/* Headings start dim; when theme.js adds "lit", they flicker on like a neon sign.
   The keyframes list opacity at points through the 1.1 second animation. */

html.fx body h1:not(.neon-title),
html.fx body h3 {
  opacity: 0.12;
}

html.fx body h1.lit:not(.neon-title),
html.fx body h3.lit {
  animation: neon-on 1.1s forwards;
}

@keyframes neon-on {
  0%   { opacity: 0.12; }
  10%  { opacity: 1; }
  14%  { opacity: 0.2; }
  22%  { opacity: 1; }
  28%  { opacity: 0.35; }
  40%, 100% { opacity: 1; }
}

/* Week titles start invisible; when theme.js adds "seen", they glitch in:
   jumping sideways, showing only slices (clip-path), and shifting color, then settling */
html.fx .glitch {
  opacity: 0;
}

/* No "forwards" here: once the glitch finishes, the title drops back to its normal unclipped look */
html.fx .glitch.seen {
  opacity: 1;
  animation: glitch-in 0.7s ease-out;
}

@keyframes glitch-in {
  0%   { opacity: 0; transform: translateX(-14px); clip-path: inset(42% 0 44% 0); filter: hue-rotate(90deg) saturate(3); }
  20%  { opacity: 1; transform: translateX(10px);  clip-path: inset(8% 0 70% 0); }
  40%  { transform: translateX(-6px); clip-path: inset(60% 0 12% 0); filter: hue-rotate(-60deg) saturate(2); }
  60%  { transform: translateX(3px);  clip-path: inset(0 0 0 0); }
  100% { opacity: 1; transform: none; clip-path: inset(0 0 0 0); filter: none; }
}

/* ===================== 5. Background scene (built by theme.js) ===================== */

/* The whole scene is pinned to the screen (position: fixed) and sits behind the page (z-index -1).
   pointer-events: none means clicks pass straight through it. */

#miami-scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* Top 62% of the screen: everything above the horizon (sky, sun, skyline) */
#miami-scene .upper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 62vh;
  overflow: hidden;
}

#miami-scene .sky,
#miami-scene .night,
#miami-scene .stars {
  position: absolute;
  inset: 0;
}

#miami-scene .sky {
  background: linear-gradient(var(--sky1), var(--sky2) 60%, var(--sky3));
}

/* A darker sky layered on top that fades in as you scroll (--p goes 0 to 1), so dusk becomes night */
#miami-scene .night {
  background: linear-gradient(#02010a, var(--sky1) 70%, var(--sky2));
  opacity: calc(var(--p, 0) * 0.85);
}

/* Stars: tiny white dots at fixed spots, getting brighter further down the page */
#miami-scene .stars {
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent),
    radial-gradient(1px 1px at 28% 8%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 44% 26%, #fff, transparent),
    radial-gradient(1px 1px at 63% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 78% 22%, #fff, transparent),
    radial-gradient(1px 1px at 90% 6%, #fff, transparent),
    radial-gradient(1px 1px at 6% 40%, #fff, transparent),
    radial-gradient(1px 1px at 95% 38%, #fff, transparent);
  opacity: calc(0.15 + var(--p, 0) * 0.85);
}

#miami-scene .sun-glow {
  position: absolute;
  left: 50%;
  bottom: -30%;
  width: 90vmin;
  aspect-ratio: 1;
  transform: translateX(-50%);
  background: radial-gradient(circle, color-mix(in srgb, var(--sun2) 55%, transparent), transparent 62%);
  opacity: calc(1 - var(--p, 0) * 0.6);
}

/* The striped synthwave sun: a gradient circle, with a "mask" cutting the gaps in its
   lower half. transform moves it down as you scroll, so it sinks behind the skyline. */
#miami-scene .sun {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(46vmin, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: linear-gradient(var(--sun1), var(--sun2));
  transform: translate(-50%, calc(38% + var(--p, 0) * 55%));
  -webkit-mask: linear-gradient(#000 50%, transparent 50% 54%, #000 54% 62%, transparent 62% 67%, #000 67% 74%, transparent 74% 80%, #000 80% 86%, transparent 86% 93%, #000 93%);
          mask: linear-gradient(#000 50%, transparent 50% 54%, #000 54% 62%, transparent 62% 67%, #000 67% 74%, transparent 74% 80%, #000 80% 86%, transparent 86% 93%, #000 93%);
}

/* Skyline buildings: dark fill, thin outline in --c1, windows lit in --c2 */
#miami-scene .skyline {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 34vh;
}

#miami-scene .skyline .bld {
  fill: var(--ink);
  stroke: var(--c1);
  stroke-width: 1.5;
  stroke-opacity: 0.6;
}

#miami-scene .skyline .lt {
  fill: var(--c2);
  opacity: 0.75;
}

/* Glowing horizon line, then the dark ground below it */
#miami-scene .horizon {
  position: absolute;
  top: 62vh;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c1);
  box-shadow: 0 0 12px var(--c1), 0 0 30px var(--c1);
}

#miami-scene .floor {
  position: absolute;
  top: 62vh;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  background: linear-gradient(var(--ink), #000);
}

/* Perspective grid floor; theme.js moves the cross lines toward you as you scroll */
#miami-scene .grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  stroke: var(--c1);
  stroke-width: 1.5;
  opacity: 0.6;
  filter: drop-shadow(0 0 4px var(--c1));
}

/* The two halves of the scene, either side of the content panel */
#miami-scene .wing {
  position: absolute;
  top: 0;
  bottom: 0;
  width: max(220px, calc((100vw - var(--panel)) / 2 + 70px));
}

#miami-scene .wing.left  { left: 0;  color: var(--c1); }
#miami-scene .wing.right { right: 0; color: var(--c2); }

/* Each drawing sits in a "stage". Hidden stages are invisible and pushed 50px down.
   When theme.js adds "on", it fades in and rises into place. */
#miami-scene .stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 12px 7vh;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#miami-scene .stage.on {
  opacity: 1;
  transform: none;
}

/* Each side strip tucks about 70px under the content panel, so center drawings in the visible part */
#miami-scene .wing.left  .stage { padding-right: 82px; }
#miami-scene .wing.right .stage { padding-left: 82px; }

/* Vehicles ("drive", e.g. Week 1's boat) wait off the edge of the screen and drive in instead */
#miami-scene .wing.left  .stage.drive:not(.on) { transform: translateX(-110%); }
#miami-scene .wing.right .stage.drive:not(.on) { transform: translateX(110%); }

#miami-scene .stage.air {
  align-items: flex-start;
  padding-top: 10vh;
}

/* What makes the drawings neon: 3px lines in the side's color, plus two stacked glows (drop-shadow) */
#miami-scene .stage svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
  filter: drop-shadow(0 0 3px currentColor) drop-shadow(0 0 10px currentColor);
}

#miami-scene .stage svg.tall { height: min(56vh, 500px); max-width: 100%; }
#miami-scene .stage svg.wide { width: min(100%, 360px); max-height: 40vh; }

#miami-scene .stage.air svg {
  animation: hover 4s ease-in-out infinite;
}

/* The drawing classes from theme.js: solid = dark fill, alt = the other neon color */
#miami-scene .solid { fill: var(--ink); }
#miami-scene .wing.left  .alt { stroke: var(--c2); }
#miami-scene .wing.right .alt { stroke: var(--c1); }

#miami-scene .sign {
  fill: currentColor;
  stroke: none;
  font-family: "Orbitron", sans-serif;
  font-size: 16px;
  text-anchor: middle;
}
#miami-scene .sign.big   { font-family: "Monoton", cursive; font-size: 44px; }
#miami-scene .sign.small { font-size: 12px; }
#miami-scene .wing.left  .sign.alt { fill: var(--c2); }
#miami-scene .wing.right .sign.alt { fill: var(--c1); }

#miami-scene .win      { fill: currentColor; stroke: none; opacity: 0.12; }
#miami-scene .win.on   { opacity: 0.85; }
#miami-scene .win.tw   { animation: twinkle 5s steps(1) infinite; }

/* Tail lights, police lights, blinking antenna, flickering signs, searchlight, rotor */
#miami-scene .tail { fill: #ff2040; stroke: none; }
#miami-scene .lb-r { fill: #ff2040; stroke: none; animation: flash-a 0.5s steps(1) infinite; }
#miami-scene .lb-b { fill: #2a6bff; stroke: none; animation: flash-b 0.5s steps(1) infinite; }
#miami-scene .blink { animation: flash-a 1.2s steps(1) infinite; }
#miami-scene .flicker { animation: buzz 3.5s infinite; }

#miami-scene .beam {
  fill: var(--c2);
  stroke: none;
  opacity: 0.16;
  transform-origin: 108px 104px;
  animation: sweep 5s ease-in-out infinite alternate;
}

#miami-scene .rotor {
  transform-origin: 150px 40px;
  animation: spin 0.2s linear infinite;
}

/* Red and blue glow at the screen edges whenever a cop car is on screen */
#miami-scene .siren {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s;
}
#miami-scene.siren-on .siren { opacity: 1; }
#miami-scene .siren::before,
#miami-scene .siren::after {
  content: "";
  position: absolute;
  inset: 0;
}
#miami-scene .siren::before {
  background: radial-gradient(circle at 0% 100%, rgba(255, 32, 64, 0.4), transparent 45%);
  animation: flash-a 0.5s steps(1) infinite;
}
#miami-scene .siren::after {
  background: radial-gradient(circle at 100% 100%, rgba(42, 107, 255, 0.4), transparent 45%);
  animation: flash-b 0.5s steps(1) infinite;
}

/* Ocean Drive and Art Deco signs keep their real colors whatever the week's palette:
   the Colony's blue neon, and the Breakwater's blue letters on a yellow-edged tower */
#miami-scene .colony-sign { fill: #4dc3ff; font-size: 20px; }
#miami-scene .bw-sign     { fill: #4dc3ff; font-size: 12px; }
#miami-scene .bw-fin      { stroke: #ffe14d; }

/* Cruising lane: a full-width strip along the bottom. The white Testarossa drives
   across it left to right on a 16 second loop, passing behind the content panel. */
#miami-scene .cruise {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30vh;
}
#miami-scene .cruise .stage {
  justify-content: flex-start;
  padding: 0 0 7vh;
}
#miami-scene .cruise svg.wide {
  width: 240px;
  color: #f4f4ff;
  animation: cruise 16s linear infinite;
}
@keyframes cruise {
  from { transform: translateX(-260px); }
  to   { transform: translateX(calc(100vw + 20px)); }
}

/* Nightclub: spotlights sweep from the roof (each pivots at its base), marquee bulbs blink in turn */
#miami-scene .spot {
  fill: currentColor;
  stroke: none;
  opacity: 0.16;
  animation: sweep 4s ease-in-out infinite alternate;
}
#miami-scene .spot-l { transform-origin: 60px 112px; }
#miami-scene .spot-r { transform-origin: 140px 112px; animation-delay: -2s; }
#miami-scene .sign.mid { font-family: "Monoton", cursive; font-size: 26px; }
#miami-scene .bulb { fill: #ffe14d; stroke: none; }
#miami-scene .bulb.odd  { animation: flash-a 0.6s steps(1) infinite; }
#miami-scene .bulb.even { animation: flash-b 0.6s steps(1) infinite; }

/* Dancer silhouettes: the "rim" copy is neon and 2.5px fatter all round, the "body" copy is
   dark on top, so only a clean outline around the whole figure glows */
#miami-scene .rim  { fill: currentColor; stroke: currentColor; stroke-width: 5; }
#miami-scene .body { fill: var(--ink); stroke: none; }

/* Dancers: each one sways from their feet, on slightly different timing */
#miami-scene .dance {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: groove 0.8s ease-in-out infinite alternate;
}
#miami-scene .dance.d2 { animation-delay: -0.4s; }
#miami-scene .dance.d3 { animation-delay: -0.2s; animation-duration: 0.7s; }

/* Getaway car tire smoke: colored puffs that grow, drift back, and fade, staggered so it streams */
#miami-scene .smoke {
  stroke: none;
  opacity: 0;
  filter: blur(1.5px);
  transform-box: fill-box;
  transform-origin: center;
  animation: puff 1.2s ease-out infinite;
}
#miami-scene .sm-a { fill: #7dff6a; }  /* lime */
#miami-scene .sm-b { fill: #b45cff; }  /* purple */
#miami-scene .sm-c { fill: #ffe14d; }  /* yellow */
#miami-scene .p2 { animation-delay: -0.2s; }
#miami-scene .p3 { animation-delay: -0.4s; }
#miami-scene .p4 { animation-delay: -0.6s; }
#miami-scene .p5 { animation-delay: -0.8s; }
#miami-scene .p6 { animation-delay: -1s; }

/* The animations used above. flash-a and flash-b are opposites, so red and blue alternate. */
/* Club lasers (Week 3): thin blue beams pivoting at the bottom corners of the screen.
   Each one sweeps back and forth on its own timing and strobes, so they keep crossing. */
#miami-scene .lasers {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s;
}
#miami-scene.lasers-on .lasers { opacity: 1; }

#miami-scene .lasers i {
  position: absolute;
  bottom: 0;
  width: 4px;
  height: 160vh;
  transform-origin: 50% 100%;
  border-radius: 2px;
  background: linear-gradient(to top, #a8c8ff, #4d8bff 30%, rgba(42, 107, 255, 0.7) 60%, rgba(42, 107, 255, 0));
  box-shadow: 0 0 8px 2px #2a6bff, 0 0 24px 5px rgba(42, 107, 255, 0.55);
}
#miami-scene .lasers .beam-l { left: 6%;  animation: laser-l 3.2s ease-in-out infinite alternate, strobe 1.1s steps(1) infinite; }
#miami-scene .lasers .beam-r { right: 6%; animation: laser-r 3.2s ease-in-out infinite alternate, strobe 1.1s steps(1) infinite; }

/* Give each beam a different speed and starting point, plus a different shade of blue */
#miami-scene .lasers .b2 { animation-duration: 2.6s, 0.9s; animation-delay: -1s, -0.3s; }
#miami-scene .lasers .b3 { animation-duration: 3.8s, 1.3s; animation-delay: -2s, -0.6s; filter: hue-rotate(-18deg); }
#miami-scene .lasers .b4 { animation-duration: 2.2s, 0.7s; animation-delay: -0.5s, -0.2s; filter: hue-rotate(14deg); }

@keyframes laser-l { from { transform: rotate(8deg); }   to { transform: rotate(64deg); } }
@keyframes laser-r { from { transform: rotate(-8deg); }  to { transform: rotate(-64deg); } }
@keyframes strobe {
  0%, 70%, 100% { opacity: 1; }
  72%, 78% { opacity: 0.1; }
  76% { opacity: 1; }
}

@keyframes flash-a { 0% { opacity: 1; } 50% { opacity: 0.15; } }
@keyframes flash-b { 0% { opacity: 0.15; } 50% { opacity: 1; } }
@keyframes twinkle { 0% { opacity: 0.85; } 70% { opacity: 0.12; } }
@keyframes buzz {
  0%, 18%, 22%, 60%, 64%, 100% { opacity: 1; }
  20%, 62% { opacity: 0.3; }
}
@keyframes sweep { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes spin { 50% { transform: scaleX(0.15); } }
@keyframes hover { 50% { transform: translateY(-12px); } }
@keyframes groove { from { transform: rotate(-4deg); } to { transform: rotate(4deg) translateY(-6px); } }
@keyframes puff {
  0%   { opacity: 1;   transform: translate(0, 0) scale(0.6); }
  60%  { opacity: 0.8; }
  100% { opacity: 0;   transform: translate(-40px, -12px) scale(1.7); }
}

/* ===================== 6. Overlays: car progress bar, VHS readout, scanlines ===================== */

/* Road strip at the bottom. The car's left position = --p (scroll progress) across the screen,
   and the red trail behind it stretches to match. */

.miami-road {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 46px;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(transparent, rgba(5, 0, 20, 0.85));
}

.miami-road::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 2px;
  background: var(--c2);
  box-shadow: 0 0 10px var(--c2);
}

.miami-road .trail {
  position: absolute;
  left: 0;
  bottom: 17px;
  height: 3px;
  width: calc(var(--p, 0) * (100% - 110px) + 14px);
  background: linear-gradient(90deg, transparent, #ff2040);
  filter: blur(1px);
}

.miami-road .car {
  position: absolute;
  bottom: 7px;
  left: calc(var(--p, 0) * (100% - 110px));
  width: 110px;
  color: var(--c1);
}

.miami-road .car svg {
  width: 100%;
  fill: var(--ink);
  stroke: currentColor;
  stroke-width: 5;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 4px currentColor);
}

.miami-road .car .tail { fill: #ff2040; stroke: none; }

/* VHS corner text. The red/blue text-shadow offset fakes an old tape's color bleed. */
.miami-vhs {
  position: fixed;
  top: 14px;
  z-index: 6;
  pointer-events: none;
  font-family: "Courier New", monospace;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.4;
  letter-spacing: 0.12em;
  color: #fff;
  text-shadow: 2px 0 rgba(255, 0, 80, 0.7), -2px 0 rgba(0, 200, 255, 0.7);
}
.miami-vhs.l { left: 18px; }
.miami-vhs.r { right: 18px; text-align: right; }
.miami-vhs .play { animation: flash-a 2s steps(1) infinite; }

/* Scanlines: a repeating 1px dark line every 3px over the whole screen */
.miami-scan {
  position: fixed;
  inset: 0;
  z-index: 7;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
}

/* ===================== 7. Smaller screens ===================== */

/* Below 1180px wide: hide the VHS text (it would cover the content).
   Below 1000px: the side drawings get dimmer and the panel more solid so text stays readable.
   Below 600px (phones): shorter drawings. */

@media (max-width: 1180px) {
  .miami-vhs { display: none; }
}

@media (max-width: 1000px) {
  #miami-scene .wing { width: 46vw; opacity: 0.45; }
  body { background: rgba(10, 4, 32, 0.9); }
}

@media (max-width: 600px) {
  #miami-scene .stage svg.tall { height: 34vh; }
}

/* Turn off all motion for visitors who ask for less of it */
@media (prefers-reduced-motion: reduce) {
  #miami-scene *,
  #miami-scene *::before,
  #miami-scene *::after,
  .miami-road *,
  .miami-vhs * {
    animation: none !important;
    transition: none !important;
  }
  html.fx body h1:not(.neon-title),
  html.fx body h3,
  html.fx .glitch {
    opacity: 1 !important;
    animation: none !important;
  }
}