/* Atlas Production — Cinematic wake -> Arcade boot -> Pixel world
   Setzt basis.css voraus (Token, Rücksetzung, CRT-Schicht, Fußzeile).
   Hier steht nur, was allein die Startseite braucht. */

:root {
  --bezel-1:   #2a3340;
  --bezel-2:   #10161f;
}

body {
  font-family: var(--display);
  overflow-x: hidden;
}

/* ============ HERO ============ */

.hero__stage {
  position: relative;
  height: 100vh;   /* Fallback fuer aeltere Safari ohne svh */
  height: 100svh;
  overflow: hidden;
  background: #02040a;
}

.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 40%;   /* keep Atlas' head in frame when cropping */
}

.hero__stage::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 24%;
  background: linear-gradient(180deg, transparent, var(--bg) 94%);
  pointer-events: none;
  z-index: 5;              /* the fade swallows even the foreground cutout */
}

.wordmark {
  position: absolute;
  left: 50%; top: 15%;
  transform: translateX(-50%);
  text-align: center;
  opacity: 0;
  transition: opacity 1400ms ease;
  pointer-events: none;
  z-index: 2;              /* over the video, under the foreground cutout */
}
.lit .wordmark { opacity: 1; }

.wordmark__main {
  font-size: clamp(3rem, 13vw, 9.5rem);
  font-weight: 400;
  color: var(--ice);
  letter-spacing: 0.04em;
  text-shadow:
    0 0 16px rgba(210, 240, 255, 0.55),
    0 0 44px rgba(191, 233, 255, 0.4),
    0 0 130px rgba(120, 180, 255, 0.35);
  /* NO blend mode here: iOS Safari cannot blend text with a video layer
     and renders it broken. Plain glow reads the same over the night sky. */
  animation: markglow 4s ease-in-out infinite;
}
@keyframes markglow {
  0%, 100% {
    text-shadow:
      0 0 16px rgba(210, 240, 255, 0.55),
      0 0 44px rgba(191, 233, 255, 0.4),
      0 0 130px rgba(120, 180, 255, 0.35);
  }
  50% {
    text-shadow:
      0 0 20px rgba(225, 245, 255, 0.8),
      0 0 60px rgba(191, 233, 255, 0.55),
      0 0 150px rgba(120, 180, 255, 0.48);
  }
}
.wordmark__sub {
  margin-top: 0.9em;
  font-size: clamp(0.6rem, 1.7vw, 0.95rem);
  color: var(--ice);
  letter-spacing: 1.05em;
  padding-left: 1.05em;     /* optical centering against tracking */
  opacity: 0.82;
}

/* studio line + claim live IN the hero picture, above the fade */
.hero__pitch {
  position: absolute;
  z-index: 4;              /* always above the foreground cutout */
  left: 50%;
  bottom: 11vh;    /* Fallback */
  bottom: 11svh;
  transform: translateX(-50%);
  width: min(92vw, 760px);
  text-align: center;
  opacity: 0;
  transition: opacity 1100ms ease 500ms;
  pointer-events: none;
}
.lit .hero__pitch { opacity: 1; }

.studio-line {
  font-family: var(--mono);
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: var(--ink);
  letter-spacing: 0.02em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.85);
}
.claim {
  margin-top: 14px;
  font-size: clamp(1.2rem, 3.8vw, 2.2rem);
  color: var(--amber);
  animation: claimglow 2.8s ease-in-out infinite;
}
@keyframes claimglow {
  0%, 100% {
    text-shadow:
      0 0 12px rgba(255, 198, 58, 0.45),
      0 0 34px rgba(255, 198, 58, 0.22),
      0 2px 14px rgba(0, 0, 0, 0.85);
  }
  50% {
    text-shadow:
      0 0 18px rgba(255, 198, 58, 0.85),
      0 0 60px rgba(255, 198, 58, 0.45),
      0 0 120px rgba(255, 160, 40, 0.25),
      0 2px 14px rgba(0, 0, 0, 0.85);
  }
}

/* the quiet title-screen START inside the hero */
.herostart {
  position: relative;      /* anchor for the copied-note */
  margin-top: clamp(20px, 3.4vh, 34px);
  margin-top: clamp(20px, 3.4svh, 34px);
  display: inline-flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 0.85em 1.5em;
  text-decoration: none;
  pointer-events: auto;
  border: 1px solid rgba(255, 198, 58, 0.35);
  background: rgba(5, 7, 12, 0.32);
  animation: startglow 3s ease-in-out infinite;
  transition: border-color 160ms ease, background 160ms ease, transform 80ms ease;
}
@keyframes startglow {
  0%, 100% { box-shadow: 0 0 0 rgba(255, 198, 58, 0); }
  50%      { box-shadow: 0 0 22px rgba(255, 198, 58, 0.18); }
}
.herostart__line {
  font-size: clamp(0.68rem, 1.7vw, 0.92rem);
  letter-spacing: 0.14em;
  color: var(--amber);
  animation: blink 1.3s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0.22; } }
.herostart__sub {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-dim);
}
.herostart:hover {
  border-color: var(--amber);
  background: rgba(5, 7, 12, 0.55);
}
/* The blink is never switched off. Touch devices keep :hover stuck on the
   last-tapped element, and on desktop the pointer still rests on the button
   after a cancelled mail dialog — either way a hover rule that stops the
   animation would kill it for good. Hover speaks through border and ground. */

/* Pressed: the button takes the hit (2px down, amber floods in), then fires
   a short arcade acknowledgement. The .pressed class outlives :active, which
   drops the moment the mail handler takes over and would show nothing. */
.herostart:active { transform: translateY(2px); }
.herostart.pressed {
  border-color: var(--amber);
  background: rgba(255, 198, 58, 0.14);
  animation: startpress 420ms ease-out 1;
}
.herostart.pressed .herostart__line { animation: startflash 420ms steps(1) 1; }
@keyframes startpress {
  0%   { box-shadow: 0 0 0 0 rgba(255, 198, 58, 0.55); }
  22%  { box-shadow: 0 0 30px 4px rgba(255, 198, 58, 0.45); }
  100% { box-shadow: 0 0 0 0 rgba(255, 198, 58, 0); }
}
@keyframes startflash {
  0%   { opacity: 1; }
  14%  { opacity: 0.06; }
  28%  { opacity: 1; }
  42%  { opacity: 0.06; }
  56%  { opacity: 1; }
  70%  { opacity: 0.06; }
  100% { opacity: 1; }
}

/* The address, laid under the button once it is in the clipboard. Absolute,
   so the button never changes width when the text appears. */
.herostart__note {
  position: absolute;
  top: calc(100% + 9px); left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--amber);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.herostart.noted .herostart__note { opacity: 1; }

.scrollcue {
  position: absolute; left: 50%;
  bottom: 3vh;     /* Fallback */
  bottom: 3svh;
  z-index: 6;
  transform: translateX(-50%);
  color: var(--ice);
  font-size: 0.8rem;
  opacity: 0;
  transition: opacity 900ms ease 600ms;
  animation: cue 1.6s ease-in-out infinite;
}
.done .scrollcue { opacity: 0.6; }
@keyframes cue { 50% { transform: translate(-50%, 7px); } }

/* ============ BOOT (arcade black) ============ */

.hero__info {
  width: min(1000px, 100%);
  margin: 0 auto;
  padding: clamp(48px, 8vh, 96px) clamp(24px, 5vw, 56px) clamp(64px, 10vh, 120px);
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}

.boot { width: 100%; }

.boot__line {
  font-size: clamp(0.62rem, 1.5vw, 0.8rem);
  color: var(--ice);          /* system voice: cold rim-light, NOT the neon cyan */
  text-shadow: 0 0 10px rgba(191, 233, 255, 0.25);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 420ms steps(4), transform 420ms ease;
}
.boot__line + .boot__line { margin-top: 0.9em; }
.boot__line.on { opacity: 1; transform: none; }
.boot__ready { margin-top: 1.6em; }

/* --- capabilities: giant neon words igniting one by one --- */

.caps {
  list-style: none;
  margin-top: clamp(28px, 5vh, 48px);
  display: flex; flex-direction: column;
  gap: clamp(14px, 2.6vh, 26px);
}

.cap {
  /* floor derived from the longest word (Advertising) on 280px screens */
  font-size: clamp(0.95rem, 5.6vw, 3rem);
  letter-spacing: 0.05em;
  color: rgba(70, 240, 216, 0.09);   /* dark tubes before power */
  transition: color 160ms ease;
}
.cap.on {
  color: var(--cyan);
  text-shadow:
    0 0 14px rgba(70, 240, 216, 0.55),
    0 0 46px rgba(70, 240, 216, 0.28),
    0 0 120px rgba(70, 240, 216, 0.16);
  animation: ignite 640ms steps(1) both;
}
.cap.on:hover {
  color: var(--amber);
  text-shadow:
    0 0 14px rgba(255, 198, 58, 0.6),
    0 0 46px rgba(255, 198, 58, 0.3),
    0 0 120px rgba(255, 198, 58, 0.18);
}
/* neon tube striking: uneven flicker, then steady */
@keyframes ignite {
  0%   { opacity: 0.15; }
  8%   { opacity: 1; }
  18%  { opacity: 0.3; }
  30%  { opacity: 1; }
  44%  { opacity: 0.45; }
  58%  { opacity: 1; }
  100% { opacity: 1; }
}

/* ============ RIDE — one threshold, then top-to-bottom ============ */

.ride { height: 380vh; height: 380svh; position: relative; }   /* Aki 10.8.: die Fahrt zügiger */
.ride__stick {
  position: sticky; top: 0;
  height: 100vh;   /* Fallback */
  height: 100svh;
  display: flex; align-items: center; justify-content: center;
  /* sticky traps its children's z-index — lift the whole stick above the
     global CRT overlay (90), or the gold frame keeps its scanlines */
  z-index: 91;
}
/* the lift removes the global overlay here, so the stick re-creates it for
   everything around the frame — same stripes, same vignette, gold stays clean */
.ride__stick::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: var(--streifen), var(--vignette);
  mix-blend-mode: multiply;
}

/* --- the golden frame: Aki's photoreal gold, sliced as border-image --- */
.bezel {
  border: clamp(16px, 2.4vw, 32px) solid transparent;
  /* one slice per side — the photo's borders differ a few px, a shared
     slice leaves seams at the corners */
  /* WebP, nicht PNG: der Rahmen ist ein Foto — 1700 KB gegen 107 KB, gemessen.
     Die verlustfreie Quelle liegt als roh/rahmen-gold.png. */
  border-image: url("media/rahmen-gold.webp") 141 138 143 143 stretch;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.65),
    0 0 46px rgba(255, 205, 90, 0.14);
  /* above the stick's own scanline layer: real gold has no scanlines (Aki) */
  position: relative;
  z-index: 1;
}
.bezel__lip { /* pass-through; the photo frame carries its own inner lip */ }
.bezel__window {
  position: relative;
  overflow: hidden;
  background: #04121a;
  box-shadow:
    inset 0 0 0 2px rgba(20, 12, 0, 0.85),
    inset 0 0 30px rgba(0, 0, 0, 0.5);
}
/* the screen behind the glass keeps its own scanlines */
.bezel__window::after {
  content: "";
  position: absolute; inset: 0; z-index: 7;
  pointer-events: none;
  background: var(--streifen);
  mix-blend-mode: multiply;
}

/* --- the living stage: 480x858 logical pixels, scaled as one --- */
#stageshift { will-change: transform; }
#stage {
  position: relative;
  width: 480px; height: 858px;
  transform-origin: top left;
}
#stage img, #stage div {
  position: absolute;
  image-rendering: pixelated;
}
.voll { left: 0; top: 0; width: 480px; height: 858px; }
.folge { opacity: 0; }
.folge.an { opacity: 1; }

.vogel { animation: fliegen linear infinite; animation-duration: calc(var(--dauer) * 1s); }
@keyframes fliegen {
  from { transform: translate(-20px, 0); }
  50%  { transform: translate(250px, -14px); }
  to   { transform: translate(520px, 4px); }
}

.blatt {
  width: 3px; height: 3px;
  background-image: url("bilder/blatt.png");
  background-repeat: no-repeat;
  animation: fallen linear infinite, kippen steps(4) infinite;
  animation-duration: calc(var(--dauer) * 1s), calc(var(--dauer) * 0.22s);
}
@keyframes kippen {
  from { background-position: 0 0; }
  to   { background-position: -12px 0; }
}
@keyframes fallen {
  from { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: 1; }
  25%  { transform: translate(9px, 60px); }
  50%  { transform: translate(-6px, 120px); }
  75%  { transform: translate(8px, 180px); }
  95%  { opacity: 1; }
  to   { transform: translate(-3px, 250px); opacity: 0; }
}

.blume { height: 12px; background-repeat: no-repeat; }
.fisch { height: 8px; background-repeat: no-repeat; opacity: 0.6; }
.laterne { background-repeat: no-repeat; }
.gecko { height: 11px; background-repeat: no-repeat; }

.ride__canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  z-index: 5;
}

.hud {
  position: absolute; left: 50%; top: 50%;
  z-index: 6;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 20px 24px;
  background: rgba(5, 7, 12, 0.74);
  border: 2px solid rgba(70, 240, 216, 0.32);
  transition: opacity 260ms ease;
}
.hud__label { font-size: clamp(0.68rem, 1.7vw, 0.85rem); color: var(--cyan); letter-spacing: 0.18em; }
.loadbar {
  width: min(300px, 56vw); height: 14px;
  border: 2px solid var(--cyan);
  padding: 2px;
}
.loadbar__fill {
  height: 100%; width: 0%;
  background: repeating-linear-gradient(90deg, var(--cyan) 0 8px, transparent 8px 12px);
}
.hud__pct { font-size: 0.7rem; color: var(--ink-dim); font-family: var(--mono); }

/* Die Fußzeile steht vollständig in basis.css — alle Seiten teilen sie. */

/* ============ Short viewports (phones in landscape) ============ */
/* Below ~540px height the hero's absolute layers would collide:
   wordmark from the top, pitch from the bottom. Cap everything by
   viewport HEIGHT too, and drop what has no room. */
@media (max-height: 540px) and (orientation: landscape) {
  .wordmark { top: 7%; }
  .wordmark__main { font-size: min(11vw, 16svh); }
  .wordmark__sub { font-size: min(1.6vw, 3.6svh); margin-top: 0.5em; }
  .hero__pitch { bottom: 4svh; }
  .studio-line { font-size: min(2vw, 4.2svh); }
  .claim { margin-top: 6px; font-size: min(3.4vw, 6svh); }
  .herostart { margin-top: 10px; padding: 0.55em 1.1em; gap: 4px; }
  .herostart__line { font-size: min(1.7vw, 3.8svh); }
  .herostart__sub { font-size: min(1.5vw, 3.2svh); }
  .scrollcue { display: none; }
  /* Der Knopf sitzt hier dicht am unteren Rand. Die kopierte Adresse würde
     unter ihm aus der Bühne laufen und von deren overflow abgeschnitten —
     also legt sie sich hier über den Knopf statt darunter. */
  .herostart__note { top: auto; bottom: calc(100% + 7px); }
}

/* ============ Motion preferences ============ */

@media (prefers-reduced-motion: reduce) {
  .scrollcue, .herostart, .herostart__line, .claim { animation: none !important; }
  .cap.on { animation: none; }
  .wordmark, .hero__pitch { transition: none; }
  .wordmark__main { animation: none; }

  /* Auch das Gemälde hält an. Vorher lief die ganze Welt weiter — Vögel,
     Blätter, Mühle, Wasser —, obwohl der Besucher im System ausdrücklich
     um weniger Bewegung gebeten hat. Die Takte in main.js hören auf dasselbe
     Signal; hier stehen nur die, die CSS allein steuert. */
  .vogel, .blatt { animation: none !important; }
  .blatt { opacity: 0.85; }

  /* Der Druck auf den Knopf bleibt spürbar: kein Blitzen, aber der Rahmen
     leuchtet und der Knopf gibt nach. Rückmeldung ist keine Zierde. */
  .herostart.pressed { border-color: var(--amber); background: rgba(255, 198, 58, 0.14); }
}