/* ════════════════════════════════════════════════════════════════
   LOGIKATO · preloader.css
   Styles für die 2.8s-Boot-Sequenz aus preloader.js
   
   Wichtig: Die Initial-States für GSAP-animierte Elemente
   (Terminal, Reticle, Counter) sind hier auf opacity:0 gesetzt.
   GSAP setzt sie sichtbar per .fromTo(). Ohne JS = unsichtbar.
   ════════════════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────────────────────
   1 · CONTAINER — Vollbild-Overlay, höchster Layer
──────────────────────────────────────────────────────────────── */

.preloader {
  position: fixed;
  inset: 0;
  z-index: var(--z-preloader);

  display: block;
  background: var(--ink);
  color: var(--bone);
  overflow: hidden;

  /* GSAP setzt xPercent für den Wipe — Anker hier */
  will-change: transform, opacity;

  /* Subtile Vignette — zentriert leicht heller, Ränder dunkler.
     Verstärkt das "Boot-Bildschirm"-Gefühl ohne aufdringlich zu sein. */
  background-image:
    radial-gradient(
      ellipse at center,
      transparent 0%,
      rgba(0, 0, 0, 0.35) 100%
    );
}


/* ────────────────────────────────────────────────────────────────
   2 · SCAN-LINE — fährt Phase 1 von oben nach unten
   GSAP animiert die y-Position. Position absolut, läuft frei.
──────────────────────────────────────────────────────────────── */

.preloader__scanline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;

  background: linear-gradient(
    to right,
    transparent 0%,
    var(--primary) 20%,
    var(--primary) 80%,
    transparent 100%
  );

  box-shadow:
    0 0 12px var(--primary-glow),
    0 0 32px var(--primary-faint);

  opacity: 0;                              /* GSAP setzt opacity */
  pointer-events: none;
  will-change: transform;
}


/* ────────────────────────────────────────────────────────────────
   3 · TERMINAL — oben links, Mono, dreizeilig
──────────────────────────────────────────────────────────────── */

.preloader__terminal {
  position: absolute;
  top:  clamp(2rem, 5vh, 4rem);
  left: clamp(2rem, 5vw, 4rem);

  display: flex;
  flex-direction: column;
  gap: var(--sp-2);

  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  line-height: var(--lh-mono);
  letter-spacing: var(--ls-mono);
  text-transform: uppercase;
  color: var(--bone-dim);

  opacity: 0;                              /* GSAP reveal in Phase 2 */
}

.preloader__line {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  white-space: nowrap;

  /* Prefix-Caret — typisches Terminal-Detail */
  position: relative;
  padding-left: 1.25em;
}

.preloader__line::before {
  content: ">";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--primary);
  opacity: 0.6;
}

/* —— Progress-Bar — fester Slot, scaleX vom JS ──────────── */

.preloader__bar {
  display: inline-block;
  width: clamp(120px, 14vw, 200px);
  height: 0.7em;

  background: var(--primary);
  vertical-align: middle;

  transform: scaleX(0);                    /* JS animiert auf 1.0 */
  transform-origin: left center;
  will-change: transform;
}

/* —— Drei-Punkte-Separator zwischen Label und Status ────── */

.preloader__dots {
  color: var(--bone-mute);
  letter-spacing: 0.3em;
  font-size: 0.85em;
}

/* —— Status-Wörter ändern Farbe wenn sie auf READY/ESTABLISHED switchen.
   Da die Texte vom JS gewechselt werden, hängt die Färbung am
   data-Attribut nicht — wir geben dem Container einfach
   default-color = primary für die letzten beiden Spans pro Line. */

.preloader__line [data-link-status],
.preloader__line [data-os-status],
.preloader__line [data-progress-pct] {
  color: var(--primary);
  min-width: 7ch;
  display: inline-block;
}


/* ────────────────────────────────────────────────────────────────
   4 · RETICLE — Phase 3, zentriert, lockt ein
──────────────────────────────────────────────────────────────── */

.preloader__reticle {
  position: absolute;
  top: 50%;
  left: 50%;

  width:  clamp(90px, 12vw, 140px);
  height: clamp(90px, 12vw, 140px);

  margin-top:  calc(-1 * clamp(90px, 12vw, 140px) / 2);
  margin-left: calc(-1 * clamp(90px, 12vw, 140px) / 2);

  color: var(--primary);                   /* SVG erbt via currentColor */
  opacity: 0;                              /* GSAP reveal in Phase 3 */

  /* Beim Lock-In setzt GSAP einen drop-shadow als filter.
     Hier nur Defaults. */
  filter: drop-shadow(0 0 8px var(--primary-faint));
  will-change: transform, filter;
}

.preloader__reticle svg {
  width: 100%;
  height: 100%;
}


/* ────────────────────────────────────────────────────────────────
   5 · COUNTER — Hubtown-Style, riesig, unten rechts
──────────────────────────────────────────────────────────────── */

.preloader__counter {
  position: absolute;
  bottom: clamp(2rem, 5vh, 4rem);
  right:  clamp(2rem, 5vw, 4.5rem);

  display: flex;
  align-items: baseline;

  font-family: var(--font-mono);
  font-size: clamp(5rem, 14vw, 12rem);
  font-weight: 300;
  line-height: 0.82;
  letter-spacing: -0.04em;
  color: var(--bone);

  /* Eigene Tabellen-Ziffern verhindern Layout-Jitter beim Zählen */
  font-variant-numeric: tabular-nums;

  /* Subtiler Glow auf der Riesenzahl — verbindet zum Reticle */
  text-shadow: 0 0 32px rgba(184, 164, 255, 0.08);
}

.preloader__counter-pct {
  font-size: 0.32em;
  margin-left: 0.15em;
  color: var(--primary);
  letter-spacing: 0;
  font-weight: 400;
}


/* ────────────────────────────────────────────────────────────────
   6 · ACCESSIBILITY — reduced-motion-Fallback
   JS überspringt schon zum Instant-Ready, aber falls jemand
   reduced-motion während der Sequence aktiviert wird die Seite
   trotzdem sauber lesbar.
──────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {

  .preloader__scanline {
    display: none;
  }

  .preloader__terminal,
  .preloader__reticle,
  .preloader__counter {
    opacity: 1;
  }

  .preloader__bar {
    transform: scaleX(1);
  }

  .preloader__reticle {
    filter: none;
  }
}


/* ────────────────────────────────────────────────────────────────
   7 · RESPONSIVE — Mobile-Reduktion
──────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {

  .preloader__terminal {
    top:  var(--sp-5);
    left: var(--sp-5);
    font-size: 0.625rem;                   /* 10px — eng aber lesbar */
    gap: var(--sp-1);
  }

  .preloader__line {
    padding-left: 1em;
    gap: var(--sp-2);
  }

  .preloader__bar {
    width: 80px;
  }

  .preloader__counter {
    bottom: var(--sp-5);
    right:  var(--sp-5);
    font-size: clamp(4rem, 22vw, 7rem);
  }

  .preloader__reticle {
    width:  90px;
    height: 90px;
    margin-top: -45px;
    margin-left: -45px;
  }
}


/* ────────────────────────────────────────────────────────────────
   8 · PRINT — falls jemand die Seite druckt während Boot läuft
──────────────────────────────────────────────────────────────── */

@media print {
  .preloader {
    display: none !important;
  }
}