/*
 * MODUL: landing.css
 * ZWECK:    Aussehen der Landing Page — Stil "Living Cells": Tinten-Blau,
 *           biolumineszentes Cyan/Mint, kühl & soft. Inszenierung Tod ->
 *           Zellen-Zerfall -> Titel-Leuchten -> Sog.
 * EINGABE:  index.html (Klassen/IDs), Body-States via stage.js.
 * AUSGABE:  Gestaltete, animierte Oberfläche.
 * BRAUCHT:  Fonts Space Grotesk + Inter (mit System-Fallback).
 * BENUTZT VON: index.html.
 *
 * ZUM ANPASSEN (ein Fakt, eine Stelle): Farben + Titel-Text unten in :root
 * bzw. in index.html (#title). Alles andere richtet sich danach.
 */

:root {
  --bg:        #05070d;
  --bg-deep:   #01020a;
  --text:      #e6f1f5;
  --text-dim:  #7d8a93;
  --cell:      #6ef0c8;   /* lebende Zelle */
  --cell-hot:  #b9fff0;   /* frische Geburt */
  --glow:      #46d6ff;   /* Cyan-Akzent */
  --violet:    #9b8cff;
  --death:     #ff5a6e;   /* "YOU DIED" — kühles Warn-Rot */

  --display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;

  --ease: cubic-bezier(.2,.7,.2,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body {
  background: radial-gradient(125% 120% at 50% 32%, #0c1420 0%, var(--bg-deep) 68%, #000 100%);
  color: var(--text);
  font-family: var(--body);
  overflow: hidden;
  cursor: default;
  -webkit-font-smoothing: antialiased;
}

/* ---- Hintergrund-Ebenen (mit Tiefe/Parallax) ---- */
#life, #embers {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  display: block; pointer-events: none;
  will-change: transform;
}
#life {
  opacity: 0; z-index: 0;
  transform: scale(1.06);
  filter: blur(.3px) brightness(1.3) saturate(1.2);
  transition: opacity 1.4s var(--ease);
}
#embers { z-index: 1; opacity: .9; transform: scale(1.04); }

.vignette {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(150% 100% at 50% 0%, transparent 48%, rgba(1,2,10,.4) 100%),
    radial-gradient(62% 56% at 50% 50%, rgba(1,2,10,.3) 0%, transparent 78%);
}

.cursor-glow {
  position: fixed; top: 0; left: 0; z-index: 3;
  width: 460px; height: 460px; margin: -230px 0 0 -230px;
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, rgba(70,214,255,.12) 0%, transparent 60%);
  mix-blend-mode: screen;
  transition: opacity .6s var(--ease);
}

/* ---- Bühne ---- */
.stage {
  position: relative; z-index: 4; height: 100%;
  display: grid; place-items: center; text-align: center;
  padding: 6vh 7vw;
}

/* ---- 1) YOU DIED ---- */
.death {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: 1rem;
  opacity: 0; pointer-events: none;
}
body.state-dying .death { animation: deathIn 2.6s var(--ease) forwards; }

.death__word {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 11vw, 8rem);
  letter-spacing: .16em;
  color: var(--death);
  text-shadow: 0 0 30px rgba(255,90,110,.5), 0 0 90px rgba(255,45,85,.32);
  filter: blur(8px); transform: scale(1.06);
  animation: sharpen 2.6s var(--ease) forwards, flicker 3.2s steps(1) 1s infinite;
}
.death__sub {
  font-family: var(--display);
  letter-spacing: .5em; text-transform: uppercase;
  color: var(--text-dim); font-size: clamp(.6rem, 2vw, .85rem);
}

@keyframes deathIn { 0%{opacity:0} 14%{opacity:1} 72%{opacity:1} 100%{opacity:0} }
@keyframes sharpen { 0%{filter:blur(14px);transform:scale(1.12)} 30%,100%{filter:blur(0);transform:scale(1)} }
@keyframes flicker { 0%,97%{opacity:1} 98%{opacity:.78} 99%{opacity:1} }

/* ---- 2) Pitch / Landing ---- */
.landing {
  display: grid; gap: clamp(.9rem, 2.2vh, 1.5rem);
  max-width: 48rem;
  opacity: 0; transform: translateY(18px); pointer-events: none;
}
body.state-reborn .landing { opacity: 1; transform: none; pointer-events: auto; }
body.state-reborn .landing > * { animation: rise .9s var(--ease) both; }
body.state-reborn .landing > *:nth-child(1) { animation-delay: .05s; }
body.state-reborn .landing > *:nth-child(2) { animation-delay: .16s; }
body.state-reborn .landing > *:nth-child(3) { animation-delay: .30s; }
body.state-reborn .landing > *:nth-child(4) { animation-delay: .46s; }
body.state-reborn .landing > *:nth-child(5) { animation-delay: .64s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 9vw, 6.2rem);
  line-height: .96; letter-spacing: .05em;
  background: linear-gradient(180deg, #ffffff 0%, #cdfaff 52%, var(--cell) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 0 22px rgba(70,214,255,.55)) drop-shadow(0 0 52px rgba(110,240,200,.3));
}
.subtitle {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(.74rem, 2.2vw, 1rem);
  letter-spacing: .52em; text-transform: uppercase;
  color: var(--cell); opacity: .95;
  text-shadow: 0 0 18px rgba(110,240,200,.45);
}

.tagline {
  font-size: clamp(1rem, 2.6vw, 1.35rem);
  font-weight: 300; line-height: 1.55; color: #dde7ed; margin-top: .4rem;
}
.tagline em { color: var(--cell); font-style: italic; }

.cta-row {
  display: flex; gap: 1rem; justify-content: center; align-items: center;
  flex-wrap: wrap; margin-top: .5rem;
}

.cta {
  position: relative;
  font-family: var(--display);
  font-weight: 600; font-size: clamp(.95rem, 2.4vw, 1.1rem);
  letter-spacing: .14em; text-transform: uppercase;
  color: #04141a;
  padding: 1.05em 2.5em; border: none; border-radius: 999px; cursor: pointer;
  display: inline-grid; gap: .15em;
  background: linear-gradient(180deg, #c7fff3 0%, var(--cell) 52%, #27b8d8 100%);
  box-shadow: 0 0 0 1px rgba(190,255,245,.45), 0 16px 46px -10px rgba(70,214,255,.6),
              inset 0 1px 0 rgba(255,255,255,.55);
  transition: transform .25s var(--ease), box-shadow .35s var(--ease), filter .35s var(--ease);
  will-change: transform;
}
.cta__hint {
  font-family: var(--body); font-weight: 400; font-size: .56em;
  letter-spacing: .3em; opacity: .6; text-transform: lowercase;
}
.cta::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit;
  background: radial-gradient(60% 120% at 50% 0%, rgba(255,255,255,.55), transparent 60%);
  opacity: 0; transition: opacity .35s var(--ease); pointer-events: none;
}
.cta:hover {
  filter: brightness(1.08);
  box-shadow: 0 0 0 1px rgba(210,255,250,.7), 0 24px 64px -12px rgba(70,214,255,.85),
              inset 0 1px 0 rgba(255,255,255,.65);
}
.cta:hover::after { opacity: 1; }
.cta:active { transform: scale(.97); }

.ghost {
  background: none; border: 1px solid rgba(230,241,245,.18);
  color: var(--text-dim); font-family: var(--body);
  font-size: clamp(.8rem, 2vw, .95rem); letter-spacing: .06em;
  padding: .9em 1.5em; border-radius: 999px; cursor: pointer;
  transition: color .3s, border-color .3s, background .3s;
}
.ghost:hover { color: var(--text); border-color: rgba(70,214,255,.5); background: rgba(70,214,255,.05); }

.hint {
  font-family: var(--display);
  font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--text-dim); opacity: .5;
}
body.state-reborn .hint { display: none; }

/* ---- Ton-Schalter ---- */
.sound {
  position: fixed; z-index: 6; right: 1.4rem; bottom: 1.4rem;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(8,14,22,.6); color: var(--text-dim);
  border: 1px solid rgba(230,241,245,.16); cursor: pointer;
  font-size: 1.1rem; backdrop-filter: blur(6px);
  transition: color .3s, border-color .3s, transform .3s;
}
.sound:hover { color: var(--glow); border-color: rgba(70,214,255,.5); transform: scale(1.08); }
.sound[aria-pressed="true"] { color: var(--glow); border-color: rgba(70,214,255,.6); }

/* ---- 3) Sog / Übergang ---- */
.dive {
  position: fixed; inset: 0; z-index: 8; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0%, #01020a 70%);
  transform: scale(2.4);
}
body.state-diving .dive { animation: dive 1s var(--ease) forwards; }
@keyframes dive { 0%{opacity:0;transform:scale(2.4)} 100%{opacity:1;transform:scale(1)} }

.portal {
  position: fixed; inset: 0; z-index: 9;
  display: grid; place-content: center; gap: .6rem; text-align: center;
  opacity: 0; pointer-events: none; background: #01020a;
}
body.state-portal .portal { opacity: 1; pointer-events: auto; transition: opacity .8s var(--ease) .6s; }
.portal__line { font-family: var(--display); font-size: clamp(1.2rem,4vw,2rem); letter-spacing: .1em; color: var(--cell); }
.portal__sub  { color: var(--text-dim); letter-spacing: .3em; text-transform: uppercase; font-size: .75rem; }
.portal__back { margin-top: 1.4rem; justify-self: center; }

/* ---- Reduzierte Bewegung respektieren ---- */
@media (prefers-reduced-motion: reduce) {
  .death, .dive { display: none !important; }
  .landing { opacity: 1 !important; transform: none !important; pointer-events: auto !important; }
  .landing > * { animation: none !important; }
  .death__word { animation: none; }
}

@media (max-width: 540px) {
  .cta-row { flex-direction: column; }
  .stage { padding: 8vh 6vw; }
}