/* ============================================================
   Rikuna IT — Coming-Soon-Seite
   Aufbau: 1) Grundlagen  2) Hintergrund  3) Inhalt  4) Animationen
   ============================================================ */

/* ---------- 1) Grundlagen ---------- */

/* CSS-Variablen: Farben an EINER Stelle, überall wiederverwendbar */
:root {
  --violet:       #904DDD;   /* Markenviolett hell */
  --violet-dark:  #592BA0;   /* Markenviolett dunkel */
  --violet-glow:  #B57CFF;   /* für Leuchteffekte */
  --bg:           #07030F;   /* fast schwarz, passend zum Bild */
  --text:         #F2EEFF;
  --font: "Segoe UI", "Noto Sans", Roboto, system-ui, sans-serif;
  --breath: 20s;             /* Dauer eines Atemzugs: 10 s ein, 10 s aus — eine Stelle für beide Ebenen */
}

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

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;              /* keine Scrollbalken auf der Einseiter-Seite */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* ---------- 2) Hintergrund ---------- */

/* Das Bild liegt als eigene Ebene hinter allem (z-index -2)
   und zoomt ganz langsam rein — das wirkt lebendig, ohne abzulenken. */
.bg {
  position: fixed;
  inset: 0;                     /* = top/right/bottom/left: 0 */
  z-index: -2;
  background: url("../assets/background.png") center / cover no-repeat;
  /* Atmen: das Bild hebt und senkt sich wie ein Brustkorb — dehnt sich beim
     Einatmen leicht aus und wird heller, beim Ausatmen zieht es sich zurück */
  animation: breathe-bg var(--breath) ease-in-out infinite;
}

/* Leuchten in der Mitte: atmet im selben Rhythmus mit, dehnt sich dabei aus */
.bg-glow {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(circle at 50% 55%,
              rgba(144, 77, 221, 0.38) 0%,
              rgba(89, 43, 160, 0.16) 30%,
              transparent 65%);
  transform-origin: 50% 55%;
  animation: breathe-glow var(--breath) ease-in-out infinite;
}

/* ---------- 3) Inhalt ---------- */

.hero {
  text-align: center;
  padding: 0 1.5rem;
  max-width: 900px;
}

.logo {
  width: min(520px, 85vw);
  filter: drop-shadow(0 0 25px rgba(144, 77, 221, 0.6));
  opacity: 0;
  /* "Punch": kommt riesig & unscharf von vorne und rastet ein */
  animation: punch 0.8s cubic-bezier(0.2, 0.9, 0.3, 1.2) 0.4s forwards;
}

/* Die Überschrift steht im Logo-Bild schon drin. Als Text bleibt sie nur für
   Suchmaschinen und Screenreader — visuell versteckt ("sr-only"-Technik). */
.title {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Terminal-Block: Befehlszeile und Slogan liegen ÜBEREINANDER in derselben
   Grid-Zelle (grid-area 1/1). So erscheint der Slogan exakt dort, wo der
   Befehl vorher stand — nichts rutscht. */
.terminal {
  position: relative;            /* Bezugspunkt für den absolut platzierten Enter-Hinweis */
  margin-top: 1.5rem;
  display: grid;
  place-items: center;
  min-height: 4.5em;             /* Platz reservieren, damit nichts springt, während getippt wird */
}
.cmd-line, .slogan { grid-area: 1 / 1; }

/* "ENTER drücken": hängt unter dem Terminal-Block, ohne Platz im Layout zu brauchen
   (position: absolute) — so rutscht nichts, wenn er kommt oder geht. */
.enter-hint {
  position: absolute;
  top: 100%;
  left: 0; right: 0;
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(217, 204, 245, 0.55);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.enter-hint.show { opacity: 1; animation: pulse-soft 1.6s ease-in-out infinite; }
.enter-hint.gone { opacity: 0; animation: none; }
.enter-hint kbd {
  font-family: "JetBrains Mono", "Fira Code", "DejaVu Sans Mono", monospace;
  border: 1px solid rgba(181, 124, 255, 0.5);
  border-radius: 4px;
  padding: 0.1em 0.5em;
  margin-right: 0.4em;
  color: var(--violet-glow);
}

.cmd-line {
  font-family: "JetBrains Mono", "Fira Code", "DejaVu Sans Mono", monospace;
  font-size: clamp(0.9rem, 2vw, 1.15rem);
  color: #C9B8F0;
  opacity: 0;
  animation: fade-up 0.6s ease-out 1.3s forwards;   /* erscheint, sobald das Logo eingerastet ist */
  transition: opacity 0.5s ease, transform 0.5s ease;
}
/* Wird per JS gesetzt, wenn der Befehl "ausgeführt" wurde: sanft nach oben wegblenden */
.cmd-line.gone {
  animation: none;
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}
.prompt { color: var(--violet-glow); margin-right: 0.5em; }

.slogan {
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  font-weight: 300;
  line-height: 1.5;
  color: #D9CCF5;
  text-align: center;
}

/* Jedes Wort ist ein eigener <span> (baut das JS) und fliegt von unten ein.
   --i = Nummer des Worts → jedes Wort startet ein Stück später (Staffelung). */
.slogan .word {
  display: inline-block;         /* nur Blöcke lassen sich verschieben (transform) */
  opacity: 0;
  transform: translateY(1.2em);
  filter: blur(4px);
  /* Dauer und Abstand kommen als CSS-Variablen vom JS (WORD_ANIM / WORD_DELAY) */
  animation: word-in var(--word-anim, 800ms) cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * var(--word-delay, 170ms));
}

@keyframes word-in {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

/* Blinkender Cursor hinter dem getippten Text */
.cursor {
  color: var(--violet-glow);
  animation: blink 0.8s step-end infinite;
}
.cursor-slogan { opacity: 0; animation: none; }   /* nur im Typewriter-Modus aktiv */
.cursor-slogan.active { opacity: 1; animation: blink 0.8s step-end infinite; }
.cursor.done { animation: none; opacity: 0; }     /* nach dem Tippen ausblenden */

.reveal {
  margin-top: 2.5rem;
  display: grid;
  place-items: center;
}
.coming-soon, .year { grid-area: 1 / 1; }

.year {
  font-size: clamp(1.6rem, 4.5vw, 2.6rem);
  font-weight: 700;
  letter-spacing: 0.25em;
  color: var(--violet-glow);
  opacity: 0;
}
.year.show {
  animation: rise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.1) forwards,
             pulse 2.5s ease-in-out 0.9s infinite;
}

/* Wegwischen: Text zieht zur Seite weg, verzerrt und verschwimmt dabei */
.coming-soon.show.wash {   /* 3 Klassen → schlägt .coming-soon.show, egal wo es steht */
  animation: wash 0.6s cubic-bezier(0.6, 0, 0.9, 0.4) forwards;
}

.coming-soon {
  position: relative;            /* Bezugspunkt für die Splash-Bühne */
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--violet-glow);
  opacity: 0;
}
/* Wassertropfen-Splash — Choreografie (Zeiten ab .show):
     0,00 s  Tropfen fällt von oben
     0,45 s  Aufprall: Wellenringe (flach, wie auf einer Wasseroberfläche) + Spritzer
     0,55 s  Text steigt aus der Welle hoch, danach dauerhaftes Pulsieren
   Die Elemente (.drop, .ring, .droplet) erzeugt das JS beim Aufruf und räumt sie wieder weg. */
.coming-soon.show {
  animation: rise 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.1) 0.55s forwards,
             pulse 2.5s ease-in-out 1.4s infinite;
}

/* Bühne für die Effekte: liegt genau in der Mitte des Texts, nimmt keinen Platz ein */
.splash-fx {
  position: absolute;
  left: 50%; top: 50%;
  width: 0; height: 0;
  pointer-events: none;
}
.splash-fx > * {
  position: absolute;
  left: 0; top: 0;
  border-radius: 50%;
}

.drop {
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  background: var(--violet-glow);
  box-shadow: 0 0 12px var(--violet-glow);
  animation: drop-fall 0.45s cubic-bezier(0.5, 0, 1, 1) forwards;   /* beschleunigt wie Schwerkraft */
}

.ring {
  width: 1.2em; height: 1.2em;
  margin: -0.6em 0 0 -0.6em;
  border: 2px solid var(--violet-glow);
  opacity: 0;
  animation: ripple 1.4s ease-out forwards;
  animation-delay: calc(0.45s + var(--i) * 0.12s);   /* jeder Ring etwas später */
}

/* Aufprall-Blitz: kurzer heller Fleck, wie das Wasser, das beim Klatschen hochkommt */
.flash {
  width: 3em; height: 3em;
  margin: -1.5em 0 0 -1.5em;
  background: radial-gradient(circle, rgba(220, 200, 255, 0.9) 0%, rgba(144, 77, 221, 0.5) 40%, transparent 70%);
  opacity: 0;
  animation: flash 0.5s ease-out 0.45s forwards;
}

.droplet {
  width: var(--size, 6px); height: var(--size, 6px);
  margin: calc(var(--size, 6px) / -2) 0 0 calc(var(--size, 6px) / -2);
  background: var(--violet-glow);
  box-shadow: 0 0 6px var(--violet-glow);
  opacity: 0;
  animation: spray var(--dur, 0.9s) cubic-bezier(0.15, 0.6, 0.5, 1) 0.45s forwards;
}

/* Boden wackelt beim Aufprall (wird per JS auf .hero gesetzt) */
.hero.shake { animation: shake 0.4s ease-out 0.45s; }

.footer {
  position: fixed;
  bottom: 1.2rem;
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: rgba(217, 204, 245, 0.45);
}

/* ---------- 4) Animationen ---------- */

/* Atem-Rhythmus: Einatmen bis 50 % (10 s), Ausatmen bis 100 % (10 s) — bei 20 s Gesamtdauer
   ist der Takt so langsam, dass er sich nicht mehr nach Metronom anfühlt. */
@keyframes breathe-bg {
  0%, 100% { transform: scale(1.02); filter: brightness(0.88); }
  50%      { transform: scale(1.07); filter: brightness(1.06); }
}

@keyframes breathe-glow {
  0%, 100% { opacity: 0.45; transform: scale(0.9); }
  50%      { opacity: 1;    transform: scale(1.18); }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes punch {
  0%   { opacity: 0; transform: scale(3);    filter: blur(14px); }
  60%  { opacity: 1; transform: scale(0.94); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1; }
}

@keyframes pulse {
  0%, 100% { text-shadow: 0 0 10px rgba(181, 124, 255, 0.5); }
  50%      { text-shadow: 0 0 25px rgba(181, 124, 255, 1), 0 0 50px rgba(144, 77, 221, 0.8); }
}

/* --- Wassertropfen-Splash --- */

/* Tropfen: fällt von oben, wird beim Aufprall flachgedrückt und verschwindet */
@keyframes drop-fall {
  0%   { opacity: 0; transform: translateY(-140px) scaleY(1.4); }
  15%  { opacity: 1; }
  85%  { transform: translateY(0) scaleY(1); }
  100% { opacity: 0; transform: translateY(0) scale(1.8, 0.3); }
}

/* Welle: flacher Ring (Wasseroberfläche aus schräger Sicht), läuft weit nach außen */
@keyframes ripple {
  0%   { opacity: 1; transform: scale(0, 0); border-width: 4px; }
  100% { opacity: 0; transform: scale(26, 8); border-width: 1px; }
}

@keyframes flash {
  0%   { opacity: 1; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(2.2); }
}

/* Spritzer: schießt in seine Richtung (--dx/--dy vom JS), bremst oben ab
   und fällt dann mit Schwerkraft wieder runter (Y wird am Ende größer) */
@keyframes spray {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  45%  { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(0.9); }
  100% { opacity: 0; transform: translate(calc(var(--dx) * 1.35), calc(var(--dy) + 110px)) scale(0.4); }
}

@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20%  { transform: translate(-3px, 4px); }
  40%  { transform: translate(4px, -2px); }
  60%  { transform: translate(-2px, 3px); }
  80%  { transform: translate(2px, -1px); }
}

@keyframes wash {
  0%   { opacity: 1; transform: translateX(0) skewX(0); filter: blur(0); }
  100% { opacity: 0; transform: translateX(90px) skewX(-25deg); filter: blur(10px); }
}

/* Text: steigt aus der Welle hoch, kurz überleuchtet, rastet ein */
@keyframes rise {
  0%   { opacity: 0; transform: translateY(14px) scale(0.6); filter: blur(6px); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.05); filter: blur(0);
         text-shadow: 0 0 35px rgba(181, 124, 255, 1), 0 0 70px rgba(144, 77, 221, 0.9); }
  100% { opacity: 1; transform: translateY(0) scale(1);
         text-shadow: 0 0 10px rgba(181, 124, 255, 0.5); }
}

/* Barrierefreiheit: wer im System "weniger Bewegung" eingestellt hat,
   bekommt alles sofort sichtbar und ohne Zoom/Puls. */
@media (prefers-reduced-motion: reduce) {
  .bg, .bg-glow, .cursor { animation: none; }
  .logo, .year, .year.show { animation: none; opacity: 1; transform: none; filter: none; }
  .coming-soon, .coming-soon.show { animation: none; opacity: 0; }
  .hero.shake, .splash-fx * { animation: none; }
}