/* Startseite: Bootsequenz mit Ladebalken, Bootlog, Bildstörung und automatischem Abschalten (Monitor selbst: monitor.css) */
@property --p{syntax:"<integer>";inherits:false;initial-value:94}

:root{
  /* Einschalten 4s; Balken (Wahrheitsgehalt) startet bei 4.05s, erreicht nach 14.24s 94 % und bleibt dort – mehr Gewissheit gibt es nicht.
     Bei 3:00 schaltet der Monitor ab, danach Weiterleitung */
  --t-bar:4.05s; --d-bar:14.24s; --t-next:5.29s; --t-off:180s;
  /* Nachleuchten: startet, wenn das Bild zum Punkt geschrumpft ist; danach Weiterleitung (js/start.js) */
  --t-glow:181.1s;
  /* Bildstörung bei „Halluzinationsprüfung läuft.“ */
  --t-glitch:30s;
}

/* Power-LED: orange beim Einschalten, grün im Betrieb, aus beim automatischen Abschalten */
.led-light{animation:ledboot var(--t-power) linear both,ledout .15s var(--t-off) forwards}
/* Nachleuchten nach dem automatischen Abschalten; danach Weiterleitung (js/start.js) */
.afterglow{animation:afterglow var(--d-glow) cubic-bezier(.2,.6,.3,1) var(--t-glow) forwards}
/* kaum sichtbares Flackern */
.screen::after{animation:flicker .12s steps(2) infinite}

.tube{display:grid;grid-template-rows:auto 1fr auto;gap:2.5cqw;
  padding:5.5cqw 7cqw 3.6cqw;text-align:center;font-size:max(16px,1.6cqw);
  animation:power var(--t-power) linear both,glitch .9s steps(1,end) var(--t-glitch),off var(--d-off) linear var(--t-off) forwards}

h1{font-family:var(--serif);font-weight:700;font-style:italic;
  font-size:6cqw;line-height:1.05;letter-spacing:-.01em;text-wrap:balance}

main{display:grid;grid-template-rows:auto 1fr;gap:2cqw}
.info{display:grid;gap:.15em}
.boot{align-self:center;display:grid;justify-items:center;gap:1em}
.probe{margin-bottom:-.4em}
.barrow{display:flex;align-items:center;gap:1em;width:min(100%,46cqw)}
.bar{flex:1;height:2.4em;padding:.25em;border:.16em solid var(--ink);box-shadow:0 0 .4em var(--glow),inset 0 0 .3em var(--glow)}
.fill{height:100%;background:repeating-linear-gradient(90deg,var(--ink) 0 1.45%,transparent 1.45% 2%);
  clip-path:inset(0 6% 0 0);animation:fill var(--d-bar) var(--t-bar) both}
.pct{min-width:5ch;text-align:left;counter-reset:p var(--p);animation:count var(--d-bar) var(--t-bar) both}
.pct::after{content:counter(p) "\00a0%"}
.next{animation:hold var(--t-next)}
.cursor{display:inline-block;width:.6em;height:1.05em;margin-left:.35em;vertical-align:-.18em;background:var(--ink);
  box-shadow:0 0 .4em var(--glow);animation:blink 1.06s steps(1) var(--t-next) infinite}

/* Bootlog: Meldungen liegen übereinander und sind jeweils nur in ihrem Zeitfenster sichtbar (--a Start, --d Dauer) */
.log{display:grid}
.log>span{grid-area:1/1;visibility:hidden;animation:showwhile var(--d) var(--a)}
.log>span:nth-child(1){--a:6.5s;--d:5s}      /* Sammle Quellen … */
.log>span:nth-child(2){--a:11.5s;--d:7s}     /* Verbindung zu halluziniert.de aufgebaut. */
.log>span:nth-child(3){--a:18.5s;--d:11.5s}  /* Konfidenz: 94 %. Bitte prüfen. */
.log>span:nth-child(4){--a:30s;--d:30s}      /* Halluzinationsprüfung läuft. */
.log>span:nth-child(5){--a:60s;--d:15s}      /* Antwort berechnet: 42. */
.log>span:nth-child(6){--a:75s;--d:15s}      /* Lebe lange und in Frieden. */
.log>span:nth-child(7){--a:90s;--d:15s}      /* Geht ein Zyklop zum Augearzt … */
.log>span:nth-child(8){--a:105s;--d:15s}     /* Hinter dir … ein dreiköpfiger Affe! */
.log>span:nth-child(9){--a:120s;--d:15s}     /* Möge die Macht mit dir sein. */
.log>span:nth-child(10){--a:135s;--d:15s}    /* What are you waiting for? Christmas? */
.log>span:nth-child(11){--a:150s;--d:15s}    /* Es tut mir leid, Dave. … */
.log>span:nth-child(12){--a:165s;--d:20s}    /* Ich komme wieder. */

footer{display:grid}
.legal{display:flex;flex-direction:column;align-items:center;gap:.4em}
.legal ul{display:flex;gap:1.6em;list-style:none}

/* Zeitplan ab Balkenstart: 0,56s→28 % · Stocken 0,88s→32 % · 1,24s→50 % (Link erscheint)
   · langsamer 5,24s→72 % · noch langsamer 14,24s→94 % (Konfidenz-Hinweis) · Stillstand */
@keyframes fill{
  0%{clip-path:inset(0 100% 0 0);animation-timing-function:steps(14,end)}
  3.933%{clip-path:inset(0 72% 0 0);animation-timing-function:steps(2,end)}
  6.18%{clip-path:inset(0 68% 0 0);animation-timing-function:steps(9,end)}
  8.708%{clip-path:inset(0 50% 0 0);animation-timing-function:steps(11,end)}
  36.798%{clip-path:inset(0 28% 0 0);animation-timing-function:steps(11,end)}
  100%{clip-path:inset(0 6% 0 0)}
}
@keyframes count{
  0%{--p:0;animation-timing-function:steps(14,end)}
  3.933%{--p:28;animation-timing-function:steps(2,end)}
  6.18%{--p:32;animation-timing-function:steps(9,end)}
  8.708%{--p:50;animation-timing-function:steps(11,end)}
  36.798%{--p:72;animation-timing-function:steps(11,end)}
  100%{--p:94}
}
/* Bildstörung: zwei kurze Aussetzer mit Versatz und aufgerissenen Farbsäumen (harte Sprünge, kein Helligkeitsblitz) */
@keyframes glitch{
  0%{transform:none}
  8%{transform:translateX(-1.2%) skewX(-3deg);text-shadow:-6px 0 rgba(255,96,96,.75),6px 0 rgba(96,200,255,.75),0 0 .4em var(--glow)}
  16%{transform:translateX(1.6%) skewX(2deg);text-shadow:5px 0 rgba(255,96,96,.75),-5px 0 rgba(96,200,255,.75),0 0 .4em var(--glow)}
  26%{transform:none;text-shadow:-1px 0 var(--fr-a),1px 0 var(--fr-b),0 0 .4em var(--glow)}
  62%{transform:translate(.8%,-.4%);text-shadow:-3px 0 rgba(255,96,96,.6),3px 0 rgba(96,200,255,.6),0 0 .4em var(--glow)}
  70%,100%{transform:none;text-shadow:-1px 0 var(--fr-a),1px 0 var(--fr-b),0 0 .4em var(--glow)}
}
@keyframes hold{from,to{visibility:hidden}}
@keyframes showwhile{from,to{visibility:visible}}
@keyframes blink{0%{opacity:1}50%{opacity:0}}
@keyframes flicker{0%{opacity:.9}50%{opacity:1}}

/* Hochformat & niedrige Querformate: Layout fließt vertikal */
@media (max-aspect-ratio:1/1),(max-height:520px){
  .tube{gap:min(9cqw,4svh);padding:min(12cqw,6svh) 7cqw min(8cqw,4svh);font-size:max(16px,min(4.4cqw,1.25rem))}
  h1{font-size:min(8cqw,3rem)}
  main{gap:min(9cqw,4svh)}
  .barrow{width:100%;flex-direction:column;gap:.5em}
  .bar{width:100%;flex:none}
  .pct{text-align:center}
}
/* Ohne Animation (reduzierte Bewegung, Regel in monitor.css): dauerhaft den Konfidenz-Hinweis zeigen */
@media (prefers-reduced-motion:reduce){
  .log>.conf{visibility:visible}
}