:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-xl: clamp(1.25rem, 1rem + 1.2vw, 2rem);
  --text-hero: clamp(3rem, 1rem + 6vw, 6rem);
  --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-6: 1.5rem;
  --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem;
  --font-display: 'Tanker', 'Impact', sans-serif;
  --font-body: 'Satoshi', 'Helvetica Neue', sans-serif;
  --bg: #060606; --text: #E9E4DA; --muted: #9A9489; --line: #2A2724;
  --accent: #FF5A1F;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  display: flex; flex-direction: column; min-height: 100svh; overflow-x: hidden;
}
::selection { background: var(--accent); color: #000; }
:focus-visible { outline: 1px solid var(--text); outline-offset: 4px; }
.sr, .hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Atmosphere */
.grain {
  position: fixed; inset: -50%; z-index: 3; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 1.2s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 20% { transform: translate(-3%,2%); } 40% { transform: translate(2%,-3%); }
  60% { transform: translate(-2%,-1%); } 80% { transform: translate(3%,3%); } 100% { transform: translate(0,0); }
}
.vignette {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 90% 75% at 50% 45%, transparent 30%, rgba(0,0,0,.5) 80%, #000 100%);
}

.stage {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  padding: var(--space-10) var(--space-6);
  width: 100%; max-width: 760px; margin-inline: auto;
}

/* Figure */
.figure { position: relative; width: min(340px, 62vw); margin-bottom: var(--space-8); }
.figure img { position: relative; z-index: 1; display: block; width: 100%; height: auto; filter: brightness(0); }
.spot {
  position: absolute; z-index: 0; left: 50%; top: 52%; width: 170%; aspect-ratio: 1; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(233,228,218,.16) 0%, rgba(233,228,218,.06) 32%, transparent 62%);
  animation: breathe 6s ease-in-out infinite;
}
.ledge { position: relative; z-index: 2; height: 1px; margin: -1px -20% 0; background: linear-gradient(90deg, transparent, var(--line) 20%, var(--muted) 50%, var(--line) 80%, transparent); }
@keyframes breathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }

/* Slow reveal */
.r { opacity: 0; filter: blur(8px); animation: reveal 1.6s cubic-bezier(.2,.6,.2,1) forwards; }
.r0 { animation-delay: .1s; animation-duration: 3s; }
.r1 { animation-delay: 1s; animation-duration: 2s; }
.r2 { animation-delay: 1.8s; }
.r3 { animation-delay: 2.2s; }
.r4 { animation-delay: 2.5s; }
.r5 { animation-delay: 2.8s; }
@keyframes reveal { to { opacity: 1; filter: blur(0); } }

.title {
  margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--text-hero);
  line-height: .88; text-transform: uppercase; letter-spacing: .01em;
  text-shadow: 0 0 40px rgba(233,228,218,.08);
}
.title span { display: inline-block; animation: flicker 9s linear 5s infinite; }
.title span + span { animation-delay: 7.3s; }
@keyframes flicker {
  0%, 92%, 100% { opacity: 1; }
  92.5% { opacity: .35; } 93% { opacity: 1; } 93.6% { opacity: .55; } 94% { opacity: 1; }
}

.status {
  margin: var(--space-8) 0 0; font-size: var(--text-xs); font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase; color: var(--muted);
}
.cursor { color: var(--accent); margin-left: .1em; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.lede { margin: var(--space-10) 0 0; font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.05; text-transform: uppercase; letter-spacing: .04em; }
.sub { margin: var(--space-3) 0 0; color: var(--muted); max-width: 40ch; font-size: var(--text-sm); }

.signup { margin-top: var(--space-10); display: flex; width: 100%; max-width: 480px; border-bottom: 1px solid var(--line); transition: border-color .4s; }
.signup:focus-within { border-color: var(--text); }
.signup input[type="email"] {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 var(--space-2);
  background: transparent; border: 0; color: var(--text);
  font: 500 var(--text-xs) var(--font-body); letter-spacing: .22em; text-transform: uppercase;
}
.signup input[type="email"]::placeholder { color: var(--muted); opacity: 1; }
.signup input[type="email"]:focus { outline: none; }
.signup button {
  min-height: 52px; padding: 0 var(--space-2) 0 var(--space-4); border: 0; cursor: pointer;
  background: transparent; color: var(--text);
  font: 700 var(--text-xs) var(--font-body); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  transition: color .3s, letter-spacing .4s;
}
.signup button:hover { color: var(--accent); letter-spacing: .28em; }
.signup button:disabled { opacity: .5; cursor: wait; }
.msg { min-height: 1.6em; margin: var(--space-4) 0 0; font-size: var(--text-xs); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.msg[data-state="ok"] { color: var(--text); }
.msg[data-state="error"] { color: var(--accent); }

@media (max-width: 520px) {
  .signup { flex-direction: column; border-bottom: 0; }
  .signup input[type="email"] { text-align: center; border-bottom: 1px solid var(--line); }
  .signup button { margin-top: var(--space-4); padding: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .r { animation: none; opacity: 1; filter: none; }
  .grain, .title span, .cursor, .spot { animation: none; }
}