/* oettam.ch – Onepager im Terminal-Look
   Farben, Schrift und Tempo über die Variablen anpassen. */

:root {
  color-scheme: dark;
  --color-bg: #01796f;      /* Pine Green */
  --color-text: #eafff4;    /* Phosphor-Weiss mit Grünstich */
  --color-glow: rgb(140 255 200 / 0.55);
  --color-glitch-a: #ff3b6b; /* Farbversatz beim Glitch */
  --color-glitch-b: #3bf0ff;
  --font: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", "DejaVu Sans Mono", monospace;
  /* Wächst mit dem Bildschirm, begrenzt durch Breite UND Höhe → passt immer */
  --title-size: min(22vw, 30vh, 14rem);
  --letters: 6;             /* Anzahl Buchstaben; bei Änderung auch steps(6) in @keyframes typing und caret anpassen */
  --cycle: 8s;              /* Dauer: tippen, stehen, löschen, Pause */
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #013f3a;    /* dunkleres Pine Green */
  }
}

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

/* Kein Scrollen: Seite ist genau bildschirmhoch */
html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
}

/* Scanlines und leichte Vignette wie auf einem alten Monitor */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.1) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / 0.35) 100%);
}

main {
  height: 100vh;
  height: 100dvh; /* berücksichtigt die Adressleiste auf Handys */
  display: grid;
  place-content: center;
  justify-items: center;
  gap: min(4vh, 2rem);
  padding: 1rem;
}

/* Titel ------------------------------------------------------------------- */
h1 {
  /* Feste Breite = nur das Wort → exakt zentriert; der Cursor liegt ausserhalb */
  position: relative;
  width: calc(var(--letters) * 1ch);
  margin: 0;
  white-space: nowrap; /* Cursor bleibt immer auf derselben Zeile */
  font-size: var(--title-size);
  font-weight: 700;
  line-height: 1;
  /* Im HTML klein geschrieben, damit Screenreader ein Wort statt Buchstaben lesen */
  text-transform: uppercase;
  text-shadow:
    0 0 0.04em var(--color-text),
    0 0 0.25em var(--color-glow);
  animation: flicker 5s infinite;
}

/* Schreibmaschine: Breite wächst Buchstabe für Buchstabe */
.type {
  display: inline-block;
  vertical-align: bottom;
  box-sizing: content-box; /* width = nur der Text, ohne Polster */
  /* Platz für das Leuchten, damit overflow es nicht als Rechteck abschneidet */
  padding: 0.3em 0 0.3em 0.3em;
  margin: -0.3em 0 -0.3em -0.3em;
  overflow: hidden;
  white-space: nowrap;
  animation: typing var(--cycle) infinite;
}

/* Blinkender Strich-Cursor. Absolut positioniert, zählt also nicht zur
   Zentrierung; wandert synchron zum Tippen mit (gleiche Dauer und Schritte). */
h1::after {
  content: "";
  position: absolute;
  top: 0.08em;
  left: calc(var(--letters) * 1ch + 0.04em);
  width: 0.05em;
  height: 0.85em;
  background: currentColor;
  box-shadow: 0 0 0.2em var(--color-glow);
  animation:
    caret var(--cycle) infinite,
    cursor 0.9s step-end infinite;
}

/* Untertitel – bewusst ohne Animation */
.soon {
  margin: 0;
  font-size: clamp(0.875rem, min(3.6vw, 4vh), 1.5rem);
  letter-spacing: 0.05em;
}

/* Animationen ------------------------------------------------------------- */

/* 0–30 % tippen, 30–70 % stehen, 70–76 % schnell löschen, Rest Pause */
@keyframes typing {
  0%   { width: 0; animation-timing-function: steps(6, end); }
  30%  { width: calc(var(--letters) * 1ch); }
  70%  { width: calc(var(--letters) * 1ch); animation-timing-function: steps(6, end); }
  76%  { width: 0; }
  100% { width: 0; }
}

/* Gleicher Ablauf wie typing, nur für die Position des Cursors */
@keyframes caret {
  0%   { left: 0.04em; animation-timing-function: steps(6, end); }
  30%  { left: calc(var(--letters) * 1ch + 0.04em); }
  70%  { left: calc(var(--letters) * 1ch + 0.04em); animation-timing-function: steps(6, end); }
  76%  { left: 0.04em; }
  100% { left: 0.04em; }
}

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

/* Neon-Flackern mit Glitch: kurze Aussetzer mit Farbversatz (max. 2 pro Sekunde) */
@keyframes flicker {
  0%, 19%, 21.5%, 24%, 61%, 63%, 100% {
    opacity: 1;
    transform: none;
  }
  20% {
    opacity: 0.45;
    transform: translateX(0.03em);
    text-shadow: -0.04em 0 var(--color-glitch-a), 0.04em 0 var(--color-glitch-b);
  }
  23% {
    opacity: 0.6;
    transform: translateX(-0.02em) skewX(-4deg);
    text-shadow: 0.03em 0 var(--color-glitch-a), -0.03em 0 var(--color-glitch-b);
  }
  62% {
    opacity: 0.4;
    text-shadow: none;
  }
}

/* Bewegung reduzieren (Systemeinstellung): ruhiger, vollständiger Text */
@media (prefers-reduced-motion: reduce) {
  h1,
  .type,
  h1::after {
    animation: none;
  }
}