/* ═══════════════════════════════════════════════════════
   nailswithheads — Synthwave / Outrun Startscreen
   ═══════════════════════════════════════════════════════ */

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

:root {
  --horizon: 62%;            /* Höhe der Horizontlinie */
  --magenta: #ff2d95;
  --cyan: #19e2ff;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #07030f;
  font-family: 'Courier New', monospace;
  color: #e9d6ff;
}

/* ─── Szene (Himmel + Verlauf) ─────────────────────────── */
.scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  /* Himmelsverlauf: tiefes Indigo oben → Violett → sattes Pink/Magenta am Horizont */
  background:
    linear-gradient(
      to bottom,
      #06031a 0%,
      #120a34 24%,
      #2a1054 40%,
      #5e1668 49%,
      #a81d68 55%,
      #ec2570 59%,
      #ff2f92 var(--horizon),
      #07030f calc(var(--horizon) + 0.5%) 100%
    );
  overflow: hidden;
}

/* ─── Sterne ───────────────────────────────────────────── */
.stars {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--horizon);
  pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 3% 8%, #fff, transparent),
    radial-gradient(1px 1px at 9% 22%, #cfe6ff, transparent),
    radial-gradient(1.2px 1.2px at 14% 5%, #fff, transparent),
    radial-gradient(1px 1px at 18% 33%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 22% 14%, #ffe1f0, transparent),
    radial-gradient(1px 1px at 27% 27%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 31% 6%, #fff, transparent),
    radial-gradient(1px 1px at 35% 40%, #cfe6ff, transparent),
    radial-gradient(1.1px 1.1px at 39% 17%, #fff, transparent),
    radial-gradient(1px 1px at 43% 30%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 47% 9%, #fff, transparent),
    radial-gradient(1px 1px at 51% 22%, #ffe1f0, transparent),
    radial-gradient(1.2px 1.2px at 55% 36%, #fff, transparent),
    radial-gradient(1.4px 1.4px at 58% 12%, #cfe6ff, transparent),
    radial-gradient(1px 1px at 62% 4%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 66% 25%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 70% 15%, #fff, transparent),
    radial-gradient(1px 1px at 74% 38%, #cfe6ff, transparent),
    radial-gradient(1.5px 1.5px at 78% 8%, #fff, transparent),
    radial-gradient(1px 1px at 82% 28%, #ffe1f0, transparent),
    radial-gradient(1.2px 1.2px at 86% 18%, #fff, transparent),
    radial-gradient(1px 1px at 89% 6%, #fff, transparent),
    radial-gradient(1.3px 1.3px at 92% 32%, #cfe6ff, transparent),
    radial-gradient(1px 1px at 95% 14%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 97% 24%, #fff, transparent),
    radial-gradient(1px 1px at 6% 44%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 12% 50%, #cfe6ff, transparent),
    radial-gradient(1px 1px at 20% 47%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 25% 38%, #fff, transparent),
    radial-gradient(1px 1px at 33% 52%, #ffe1f0, transparent),
    radial-gradient(1.3px 1.3px at 40% 10%, #fff, transparent),
    radial-gradient(1px 1px at 45% 46%, #fff, transparent),
    radial-gradient(1.1px 1.1px at 50% 5%, #cfe6ff, transparent),
    radial-gradient(1px 1px at 60% 49%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 68% 42%, #fff, transparent),
    radial-gradient(1px 1px at 72% 53%, #ffe1f0, transparent),
    radial-gradient(1.3px 1.3px at 84% 45%, #fff, transparent),
    radial-gradient(1px 1px at 90% 51%, #cfe6ff, transparent);
  animation: twinkle 5s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.5; }
  50%      { opacity: 1; }
}

/* ─── Sonne ────────────────────────────────────────────── */
.sun {
  position: absolute;
  left: 50%;
  top: var(--horizon);
  width: min(38vh, 72vw, 300px);
  aspect-ratio: 1;
  transform: translate(-50%, -100%);
  border-radius: 50%;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    #ffe85a 0%,
    #ffd23d 22%,
    #ffa53d 44%,
    #ff7150 58%,
    #ff4382 75%,
    #ff1f9e 100%
  );
  /* gebänderter Retro-Look: nur untere Hälfte, dünne dunkle Trennstreifen,
     die nach unten enger zusammenrücken (sichtbare Streifen verjüngen sich) */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0 51%,
    transparent 51% 52.2%,
    #000 52.2% 58.4%,
    transparent 58.4% 59.6%,
    #000 59.6% 65.2%,
    transparent 65.2% 66.4%,
    #000 66.4% 71.4%,
    transparent 71.4% 72.6%,
    #000 72.6% 77%,
    transparent 77% 78.2%,
    #000 78.2% 82%,
    transparent 82% 83.2%,
    #000 83.2% 86.4%,
    transparent 86.4% 87.6%,
    #000 87.6% 90.2%,
    transparent 90.2% 91.4%,
    #000 91.4% 93.4%,
    transparent 93.4% 94.6%,
    #000 94.6% 96.2%,
    transparent 96.2% 97.4%,
    #000 97.4% 100%
  );
          mask-image: linear-gradient(
    to bottom,
    #000 0 51%,
    transparent 51% 52.2%,
    #000 52.2% 58.4%,
    transparent 58.4% 59.6%,
    #000 59.6% 65.2%,
    transparent 65.2% 66.4%,
    #000 66.4% 71.4%,
    transparent 71.4% 72.6%,
    #000 72.6% 77%,
    transparent 77% 78.2%,
    #000 78.2% 82%,
    transparent 82% 83.2%,
    #000 83.2% 86.4%,
    transparent 86.4% 87.6%,
    #000 87.6% 90.2%,
    transparent 90.2% 91.4%,
    #000 91.4% 93.4%,
    transparent 93.4% 94.6%,
    #000 94.6% 96.2%,
    transparent 96.2% 97.4%,
    #000 97.4% 100%
  );
  filter: drop-shadow(0 0 55px rgba(255, 120, 90, 0.6))
          drop-shadow(0 0 120px rgba(255, 45, 149, 0.5));
}

/* sanftes Leuchten hinter der Sonne */
.sun::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220%;
  height: 220%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 70, 130, 0.4) 0%, transparent 62%);
  z-index: -1;
}

/* ─── Berge ────────────────────────────────────────────── */
.mountains {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: calc(100% - var(--horizon));
  height: clamp(120px, 24vh, 240px);
  z-index: 2;
  /* kein Weichzeichner → scharfe, klare Gipfelkanten */
  transition: opacity 0.3s ease;
}

/* ─── Re-Roll-Button (unscheinbar) ─────────────────────── */
.reroll {
  position: fixed;
  right: 14px;
  bottom: 11px;
  z-index: 6;
  padding: 6px;
  background: none;
  border: none;
  font: inherit;
  font-size: 13px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.16);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s ease, transform 0.3s ease, text-shadow 0.3s ease;
}

.reroll:hover,
.reroll:focus-visible {
  color: rgba(255, 140, 210, 0.9);
  text-shadow: 0 0 8px rgba(255, 45, 149, 0.7);
  transform: translateY(-1px) rotate(-12deg);
  outline: none;
}

.reroll:active {
  transform: scale(0.88);
}

/* ─── Gitter (Boden Richtung Horizont) ─────────────────── */
.grid-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--horizon);
  bottom: 0;
  perspective: 240px;
  perspective-origin: 50% 0%;
  overflow: hidden;
  z-index: 1;
  /* zum Horizont hin ausblenden */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 100%);
}

.grid {
  position: absolute;
  top: 0;
  left: -100%;
  width: 300%;
  height: 320%;
  transform-origin: 50% 0%;
  transform: rotateX(82deg);
  background-image:
    linear-gradient(to bottom, var(--magenta) 0 2px, transparent 2px),
    linear-gradient(to right,  transparent 0 27px, var(--magenta) 27px 29px, transparent 29px);
  background-size: 100% 56px, 56px 100%;
  filter:
    drop-shadow(0 0 2px var(--magenta))
    drop-shadow(0 0 8px rgba(255, 45, 149, 0.9))
    drop-shadow(0 0 18px rgba(255, 45, 149, 0.5));
  animation: grid-run 1.4s linear infinite;
  will-change: background-position;
}

/* Horizontale Linien laufen Richtung Betrachter (Fahrgefühl);
   vertikale bleiben mittig zentriert (50%) stehen */
@keyframes grid-run {
  from { background-position: 0 0,    50% 0; }
  to   { background-position: 0 56px, 50% 0; }
}

/* satter, weicher Pink/Magenta-Glow direkt auf der Horizontlinie (keine Cyan-Linie mehr);
   liegt hinter den Bergen → Bergfuß und Glow verschmelzen, blutet leicht ins Grid */
.horizon-glow {
  position: absolute;
  left: 0;
  right: 0;
  top: var(--horizon);
  height: clamp(120px, 22vh, 220px);
  transform: translateY(-50%);
  background:
    /* heißer, fast weißer Kern direkt unter der Sonne */
    radial-gradient(
      ellipse 42% 58% at 50% 50%,
      rgba(255, 224, 242, 0.85) 0%,
      rgba(255, 96, 188, 0.72) 22%,
      rgba(255, 55, 155, 0.25) 50%,
      rgba(255, 45, 149, 0) 70%
    ),
    /* schmaler, intensiver Leucht-Streifen über die ganze Breite mit Hotcore */
    linear-gradient(
      to bottom,
      rgba(255, 45, 149, 0) 0%,
      rgba(255, 72, 162, 0.55) 44%,
      rgba(255, 156, 208, 0.92) 50%,
      rgba(255, 72, 162, 0.55) 56%,
      rgba(255, 45, 149, 0) 100%
    );
  filter: blur(5px);
  pointer-events: none;
  z-index: 1;
}

/* ─── Inhalt ───────────────────────────────────────────── */
main {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: clamp(40px, 9vh, 110px) 24px 0;
}

/* ── Marke ── */
.brand {
  font-size: clamp(2rem, 8.5vw, 5rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  user-select: none;
  line-height: 1;
  background: linear-gradient(to bottom, #ffffff 0%, #ffe6fb 45%, #ff7ad0 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: 0 0 4px rgba(255, 45, 149, 0.0);
  filter:
    drop-shadow(0 0 6px rgba(255, 45, 149, 0.9))
    drop-shadow(0 0 22px rgba(255, 45, 149, 0.55))
    drop-shadow(0 2px 0 rgba(140, 0, 90, 0.6));
}

.brand .with {
  background: linear-gradient(to bottom, #bfefff, #19e2ff);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}

/* ── Absprung: blinkender Prompt als Link ── */
.launch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease;
}

.prompt {
  margin: 0;
  font-size: clamp(0.85rem, 2.6vw, 1.25rem);
  font-weight: 700;
  letter-spacing: 0.4em;
  color: var(--cyan);
  text-shadow:
    0 0 8px rgba(25, 226, 255, 0.85),
    0 0 22px rgba(25, 226, 255, 0.45);
  /* bewusst NICHT 1.4s wie das Gitter — teilerfremd, damit beide nicht im Gleichtakt pulsen */
  animation: blink 2.3s steps(1) infinite;
}

@keyframes blink {
  0%, 60%  { opacity: 1; }
  61%, 100% { opacity: 0.2; }
}

.dest {
  font-size: clamp(0.62rem, 1.8vw, 0.78rem);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #b9a6e6;
  text-shadow: 0 0 6px rgba(255, 45, 149, 0.4);
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

/* Hover/Fokus: Blinken anhalten, alles hell hervorheben */
.launch:hover,
.launch:focus-visible {
  transform: translateY(-2px);
  outline: none;
}

.launch:hover .prompt,
.launch:focus-visible .prompt {
  animation: none;
  opacity: 1;
  color: #fff;
  text-shadow:
    0 0 10px var(--cyan),
    0 0 28px rgba(25, 226, 255, 0.7);
}

.launch:hover .dest,
.launch:focus-visible .dest {
  color: #fff;
  text-shadow: 0 0 10px rgba(25, 226, 255, 0.7);
}

/* ─── Footer ───────────────────────────────────────────── */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2.5vh, 20px);
  padding: 0 24px clamp(16px, 3vh, 26px);
  z-index: 4;
}

.copy {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.45);
  text-shadow: 0 0 6px rgba(255, 45, 149, 0.5);
}

/* ─── Korn / Dithering (über Himmel + Berge, unter dem Inhalt) ──── */
.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.12;
  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' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── CRT-Scanlines ────────────────────────────────────── */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0 2px,
    rgba(0, 0, 0, 0.18) 2px 3px
  );
  mix-blend-mode: multiply;
  opacity: 0.5;
}

/* ─── Reduzierte Bewegung respektieren ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  .grid    { animation: none; }
  .stars   { animation: none; opacity: 0.85; }
  .prompt  { animation: none; }
}

/* ─── Kleine Screens ───────────────────────────────────── */
@media (max-width: 480px) {
  :root { --horizon: 58%; }
  .brand { letter-spacing: 0.08em; }
  .start { padding: 14px 28px; }
}