/* DEAD MIAMI - deadmiami.com
   One night on Ocean Drive: the sky behind the page moves from golden hour to the hurricane as you scroll, the order
   the game's five levels play in. The neon sign in the hero is the one thing that moves on its own. */

:root {
  --dusk: #170C2B;
  /* Storm slate (Todd, 2026-10-22): the dark base, the lead accent (frames, glows) and the second (labels) are teal;
     the buttons keep the sign's pink */
  --base: #0E1216; --base-rgb: 14 18 22;
  --lead: #1DE9C8; --lead-rgb: 29 233 200;
  --second: #1DE9C8; --second-rgb: 29 233 200;
  --pink: #FF2E88;
  --teal: #1DE9C8;
  --amber: #FF8A3D;
  --bone: #EFE6D6;
  --blood: #7A0E16;
  --ink: #000000;
  --muted: rgba(239, 230, 214, 0.72);
  --line: rgba(239, 230, 214, 0.16);

  /* the sky, set per section by main.js */
  --sky-top: #0A0D10;
  --sky-mid: #12181C;
  --sky-low: #1C2426;

  --deco: "Limelight", "Didot", serif;
  --sans: "Jost", "Futura", "Avenir Next", system-ui, sans-serif;

  --step--1: clamp(0.84rem, 0.8rem + 0.2vw, 0.95rem);
  --step-0: clamp(1rem, 0.95rem + 0.25vw, 1.15rem);
  --step-1: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --step-2: clamp(1.6rem, 1.3rem + 1.4vw, 2.5rem);
  --step-3: clamp(2.2rem, 1.6rem + 3vw, 4.2rem);

  --gutter: clamp(16px, 4vw, 56px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--base);
  color: var(--bone);
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--second); outline-offset: 3px; border-radius: 2px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.wrap { width: min(1200px, 100% - 2 * var(--gutter)); margin-inline: auto; }
.narrow { width: min(760px, 100% - 2 * var(--gutter)); }

/* the sky: a fixed gradient behind everything, its colours eased as each section takes the screen */
.sky {
  position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-low) 100%);
  transition: --sky-top 1.4s ease, --sky-mid 1.4s ease, --sky-low 1.4s ease;
}
@property --sky-top { syntax: "<color>"; inherits: true; initial-value: #0A0D10; }
@property --sky-mid { syntax: "<color>"; inherits: true; initial-value: #12181C; }
@property --sky-low { syntax: "<color>"; inherits: true; initial-value: #1C2426; }
.sky::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 120%, transparent 30%, rgba(0, 0, 0, 0.55) 100%);
}

/* top bar */
.bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px var(--gutter);
  background: linear-gradient(180deg, rgb(var(--base-rgb) / 0.85), rgb(var(--base-rgb) / 0));
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
/* past the hero the bar gets a dark glass backing, so the page doesn't show through its links */
.bar.is-solid {
  background: rgb(var(--base-rgb) / 0.78);
  -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(239, 230, 214, 0.08);
}
.bar-mark {
  font-family: var(--deco); font-size: 1.15rem; letter-spacing: 0.06em; text-decoration: none;
  color: var(--bone);
}
.bar nav { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 32px); }
.bar nav a { text-decoration: none; font-size: var(--step--1); color: var(--muted); }
.bar nav a:hover { color: var(--bone); }
.bar nav .bar-cta {
  color: var(--bone); padding: 6px 14px; border: 1px solid var(--lead); border-radius: 999px;
  box-shadow: 0 0 12px rgb(var(--lead-rgb) / 0.35), inset 0 0 8px rgb(var(--lead-rgb) / 0.25);
}
@media (max-width: 760px) {
  .bar nav a:not(.bar-cta) { display: none; }
}

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px; border-radius: 999px;
  font-family: var(--sans); font-weight: 500; font-size: var(--step-0); text-decoration: none;
  transition: box-shadow 0.25s ease, background 0.25s ease;
}
.btn-neon, .bar nav .bar-cta { --lead: #FF2E88; --lead-rgb: 255 46 136; }
.btn-neon {
  color: #fff; background: rgb(var(--lead-rgb) / 0.12); border: 2px solid var(--lead);
  box-shadow: 0 0 18px rgb(var(--lead-rgb) / 0.55), inset 0 0 12px rgb(var(--lead-rgb) / 0.35);
  text-shadow: 0 0 8px rgb(var(--lead-rgb) / 0.9);
}
.btn-neon:hover { background: rgb(var(--lead-rgb) / 0.25); box-shadow: 0 0 28px rgb(var(--lead-rgb) / 0.8), inset 0 0 14px rgb(var(--lead-rgb) / 0.5); }
.btn-ghost { color: var(--bone); border: 1px solid rgba(239, 230, 214, 0.45); background: rgba(0, 0, 0, 0.25); }
.btn-ghost:hover { border-color: var(--second); box-shadow: 0 0 16px rgb(var(--second-rgb) / 0.4); }
.btn-off { opacity: 0.55; cursor: not-allowed; filter: saturate(0.5); }

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 100svh; display: grid; place-items: center;
  padding: 96px var(--gutter) 64px; isolation: isolate; overflow: hidden;
}
.hero-art, .hero-art img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-art { z-index: -2; }
.hero-art img { object-fit: cover; object-position: 50% 60%; }
.hero-shade {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgb(var(--base-rgb) / 0.72), rgb(var(--base-rgb) / 0.15) 70%),
    linear-gradient(180deg, rgb(var(--base-rgb) / 0.2) 60%, var(--sky-top) 100%);
}

.sign { margin: 0; width: min(980px, 100%); }
.sign-svg { width: 100%; height: auto; overflow: visible; }
.sign text {
  font-family: var(--sans); font-weight: 500; font-size: 200px; letter-spacing: 0.06em;
  fill: none; stroke-width: 7; stroke-linejoin: round; stroke-linecap: round;
}
.tubes-pink text { stroke: #FFD6E8; }
.tubes-teal text { stroke: #D4FFF7; }
.tubes-pink { color: var(--pink); }
.tubes-teal { color: var(--teal); }
/* the colour of a lit tube: a coloured outer stroke under the white-hot core */
.sign .tubes text { paint-order: stroke; }
.tubes-pink text tspan { stroke: #FFE3EF; filter: drop-shadow(0 0 2px var(--pink)) drop-shadow(0 0 10px var(--pink)); }
.tubes-teal text tspan { stroke: #E0FFF9; filter: drop-shadow(0 0 2px var(--teal)) drop-shadow(0 0 10px var(--teal)); }

/* the sign powers on, tube by tube; the A in DEAD fights to stay lit */
.t { opacity: 0.08; animation: tube-on 0.5s steps(1, end) forwards; }
.t1 { animation-delay: 0.6s; } .t2 { animation-delay: 0.85s; } .t3 { animation-delay: 1.05s; } .t4 { animation-delay: 1.3s; }
.t5 { animation-delay: 1.75s; } .t6 { animation-delay: 1.95s; } .t7 { animation-delay: 2.1s; } .t8 { animation-delay: 2.3s; } .t9 { animation-delay: 2.45s; }
@keyframes tube-on {
  0% { opacity: 0.08; } 20% { opacity: 1; } 32% { opacity: 0.15; } 46% { opacity: 1; } 58% { opacity: 0.4; } 70%, 100% { opacity: 1; }
}
.stutter { animation: tube-on 0.5s steps(1, end) 1.05s forwards, stutter 7s steps(1, end) 3.5s infinite; }
@keyframes stutter {
  0%, 91%, 100% { opacity: 1; } 92% { opacity: 0.2; } 93% { opacity: 1; } 95% { opacity: 0.35; } 96.5% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .t, .stutter { animation: none; opacity: 1; }
}

.hero-copy { width: min(640px, 100%); text-align: center; margin-top: clamp(8px, 2vw, 24px); }
.hero-line { font-size: var(--step-1); font-weight: 300; line-height: 1.5; margin: 0 0 28px; color: var(--bone);
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.8); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.hero-copy { opacity: 0; animation: rise 0.9s ease 2.9s forwards; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-copy { animation: none; opacity: 1; } }

/* ---------- premise ---------- */
.deco { font-family: var(--deco); font-weight: 400; line-height: 1.15; letter-spacing: 0.01em; }
.premise { padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 8vw, 110px); }
.premise h2 { font-size: var(--step-2); margin: 0 0 28px; text-wrap: balance; }
.lede { font-size: var(--step-1); font-weight: 300; color: var(--bone); margin: 0 0 40px; max-width: 62ch; }
.facts {
  list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 28px;
}
.facts li { color: var(--muted); font-size: var(--step--1); line-height: 1.4; }
.facts strong { display: block; font-family: var(--deco); font-weight: 400; font-size: var(--step-1); color: var(--bone); }

/* ---------- the night ---------- */
.night { padding-bottom: 0; }
.section-title { font-size: var(--step-3); margin: 0 0 10px; text-wrap: balance; }
.section-sub { color: var(--muted); margin: 0 0 clamp(40px, 6vw, 72px); max-width: 60ch; }

.level {
  position: relative; min-height: min(92vh, 900px); display: grid; align-items: end;
  margin-bottom: clamp(28px, 4vw, 48px); isolation: isolate; overflow: hidden;
}
.level-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.level::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgb(var(--base-rgb) / 0.88) 0%, rgb(var(--base-rgb) / 0.55) 38%, rgb(var(--base-rgb) / 0) 68%),
              linear-gradient(0deg, rgb(var(--base-rgb) / 0.85) 0%, rgb(var(--base-rgb) / 0) 45%);
}
.level-flip::before {
  background: linear-gradient(270deg, rgb(var(--base-rgb) / 0.88) 0%, rgb(var(--base-rgb) / 0.55) 38%, rgb(var(--base-rgb) / 0) 68%),
              linear-gradient(0deg, rgb(var(--base-rgb) / 0.85) 0%, rgb(var(--base-rgb) / 0) 45%);
}
.level-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: clamp(24px, 5vw, 80px);
  align-items: end; padding: clamp(40px, 7vw, 90px) 0;
}
.level-flip .level-body { grid-template-columns: minmax(220px, 320px) minmax(0, 1fr); }
.level-flip .level-text { order: 2; text-align: right; justify-self: end; }
.level-flip .boss { order: 1; }
.level-text { max-width: 46ch; }
.level-num { margin: 0 0 6px; font-weight: 500; color: var(--second); letter-spacing: 0.04em; }
.level-num span { color: var(--muted); font-weight: 400; margin-left: 10px; }
.level-name { font-size: var(--step-3); margin: 0 0 16px; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7); }
.level-text p:last-child { margin: 0; color: var(--bone); }

.boss { margin: 0; }
.boss img {
  aspect-ratio: 4 / 5; object-fit: cover; width: 100%;
  border: 1px solid rgb(var(--lead-rgb) / 0.55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 32px rgb(var(--lead-rgb) / 0.28), 0 24px 60px rgba(0, 0, 0, 0.6);
}
.boss figcaption { margin-top: 14px; font-size: var(--step--1); line-height: 1.5; color: rgba(239, 230, 214, 0.9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9); }
.boss-name {
  display: block; font-family: var(--deco); font-size: var(--step-1); color: #fff; margin-bottom: 4px;
  text-shadow: 0 0 10px var(--lead), 0 0 22px rgb(var(--lead-rgb) / 0.6);
}

@media (max-width: 760px) {
  .level { min-height: auto; align-items: stretch; }
  .level-art { position: relative; height: 56vw; z-index: 0; }
  .level::before { display: none; }
  .level-body, .level-flip .level-body { grid-template-columns: 1fr; padding: 24px 0 8px; }
  .level-flip .level-text { order: 0; text-align: left; justify-self: start; }
  .boss { width: min(320px, 78%); }
}

/* ---------- arsenal ---------- */
.arsenal { padding: clamp(48px, 6vw, 90px) 0 clamp(70px, 10vw, 140px); }
.arsenal-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 90px); align-items: start; }
.survivors img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 28px;
  box-shadow: 0 0 40px rgb(var(--second-rgb) / 0.18), 0 30px 70px rgba(0, 0, 0, 0.55); }
.survivors h2 { font-size: var(--step-2); margin: 0 0 16px; text-wrap: balance; }
.survivors p { margin: 0; max-width: 60ch; }

.manifest { width: 100%; border-collapse: collapse; font-size: var(--step--1); font-variant-numeric: tabular-nums; }
.manifest caption { text-align: left; font-family: var(--deco); font-size: var(--step-1); padding-bottom: 12px; }
.manifest th, .manifest td { padding: 11px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.manifest thead th { color: var(--muted); font-size: 0.8em; border-bottom-color: rgb(var(--second-rgb) / 0.5); }
.manifest tbody th { color: var(--bone); font-weight: 500; }
.manifest td { color: var(--muted); }
.manifest td:last-child, .manifest th:last-child { text-align: right; }
@media (max-width: 900px) { .arsenal-grid { grid-template-columns: 1fr; } }

/* ---------- play ---------- */
.play { padding: clamp(70px, 10vw, 140px) 0; }
.modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); margin: 28px 0 clamp(48px, 7vw, 90px); }
.mode { border-top: 2px solid var(--second); padding-top: 18px; }
.mode h3 { font-family: var(--deco); font-weight: 400; font-size: var(--step-1); margin: 0 0 8px; }
.mode p { margin: 0; color: var(--muted); }
@media (max-width: 760px) { .modes { grid-template-columns: 1fr; } }

.join { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: clamp(28px, 5vw, 70px); align-items: start; }
.join h3 { font-family: var(--deco); font-weight: 400; font-size: var(--step-2); margin: 0 0 16px; }
.join ol { margin: 0; padding-left: 1.2em; }
.join li { margin-bottom: 10px; padding-left: 6px; }
.join li::marker { color: var(--second); font-weight: 600; }
.join em { font-style: normal; color: var(--second); }
@media (max-width: 760px) { .join { grid-template-columns: 1fr; } }

.status {
  padding: 24px 26px; border: 1px solid var(--line); background: rgb(var(--base-rgb) / 0.55);
  border-radius: 14px; backdrop-filter: blur(6px);
}
.status-head { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; font-size: var(--step-1); font-weight: 500; }
.status-light { width: 12px; height: 12px; border-radius: 50%; background: #8a8195; flex: none; }
.status[data-state="online"] .status-light { background: var(--second); box-shadow: 0 0 10px var(--second), 0 0 22px var(--second); }
.status[data-state="offline"] .status-light { background: var(--blood); box-shadow: 0 0 8px rgb(var(--lead-rgb) / 0.5); }
.status-detail { margin: 0; color: var(--muted); font-size: var(--step--1); }

/* ---------- download ---------- */
.download { padding: clamp(80px, 12vw, 160px) 0; text-align: center; }
.download-inner { display: grid; justify-items: center; }
.download-icon { width: 128px; height: 128px; margin-bottom: 22px; filter: drop-shadow(0 0 26px rgb(var(--lead-rgb) / 0.45)); }
.download h2 { font-size: var(--step-3); margin: 0 0 12px; }
.download p { margin: 0 0 6px; color: var(--bone); }
.download .download-note { color: var(--muted); margin-bottom: 26px; }

/* ---------- footer ---------- */
.foot { padding: 32px 0 44px; border-top: 1px solid var(--line); background: rgba(0, 0, 0, 0.45); }
.foot-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
.foot p { margin: 0; font-size: var(--step--1); color: var(--muted); }