/**
 * ISS Weltkarte Showblock — 2D-Karte mit Home-Marker, ISS-Position,
 * Bodenspur (SGP4) und astronomischem Tag/Nacht-Terminator.
 * Daten: GET /api/iss/map (Live-Position 30s-Cache, Bodenspur/Terminator
 * Cron-Cache alle 10 Min, siehe scripts/calculate_iss_track.py).
 */

/* ============================================================
   Container (self-contained, wie live-earth-asia.css — kein
   Eintrag in layouts.css nötig)
   ============================================================ */

#iss-map {
    position: fixed;
    inset: 0;
    z-index: var(--z-content);
    background: #000;
    overflow: hidden;

    opacity: 1;
    /* KEIN zusätzliches "ease" anhängen — --transition-fade (tokens.css) enthält
       bereits eine eigene Timing-Function (cubic-bezier). Zwei Timing-Functions
       in einer Transition-Deklaration machen die GESAMTE Deklaration ungültig
       (kein Fade mehr, Opacity springt sofort) — per Playwright-Test gefunden,
       betrifft im selben Muster vermutlich auch live-earth-asia.css. */
    transition: opacity var(--transition-fade, 2s);
}

#iss-map.hidden {
    display: none;
}

#iss-map.fade-out {
    opacity: 0 !important;
}

#iss-map.transitioning-in {
    z-index: calc(var(--z-content) + 1);
}

/* ============================================================
   Kartenbild — vorhandene equirektangulare Textur, kein neues Asset
   ============================================================ */

#iss-map-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    /* contain statt cover — auf runden/quadratischen/16:9-Displays (keiner ist
       2:1 wie die Kartentextur) würde cover Längengrade abschneiden. Die ganze
       Welt soll immer sichtbar bleiben (Kernanforderung), auch wenn das oben/
       unten oder seitlich Letterbox-Balken auf dem Container-Hintergrund (#000)
       bedeutet. Per Playwright-Screenshot gefunden: ISS über dem Pazifik war
       mit cover auf einem quadratischen Viewport unsichtbar (außerhalb Crop). */
    object-fit: contain;
    object-position: center center;
}

/* ============================================================
   SVG-Overlay — gleiche Projektion wie #iss-map-bg (preserveAspectRatio
   "meet" = SVG-Äquivalent zu object-fit:contain, damit Marker/Linien exakt
   auf der sichtbaren, nie beschnittenen Kartenposition landen)
   ============================================================ */

#iss-map-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.iss-map-terminator {
    fill: rgba(0, 0, 0, 0.42);
    stroke: none;
}

/* Bodenspur — <polyline>-Kindelemente werden von iss-map.js pro Segment
   dynamisch erzeugt (können die ±180°-Kante mehrfach queren) */
.iss-map-groundtrack-trail polyline,
.iss-map-groundtrack-forward polyline {
    fill: none;
    stroke: var(--color-accent, #64c8ff);
    stroke-width: 2px;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.iss-map-groundtrack-trail polyline {
    opacity: 0.5;
    stroke-dasharray: 5px 5px;
}

.iss-map-groundtrack-forward polyline {
    opacity: 0.85;
}

.iss-map-marker {
    transition: opacity 0.6s ease;
}

.iss-map-marker.hidden {
    opacity: 0;
}

.iss-map-home-marker circle {
    fill: #ffffff;
    stroke: #7c5cff;
    stroke-width: 1px;
    vector-effect: non-scaling-stroke;
}

/* ISS-Marker — kleine Solarpanel-"Flügel" (statisch) + Stroboskop-Punkt in
   der Mitte, kein Glow: die meiste Zeit ein kleiner roter Punkt, unterbrochen
   von zwei sehr kurzen, harten weißen Blitzen — Vorbild: Kollisionswarnlicht
   an Flugzeugen (kurzer heller Blitz, lange dunkle Pause), nicht ein weiches
   Pulsieren. */
.iss-map-iss-marker .iss-icon-wing {
    fill: #ffffff;
    opacity: 0.85;
}

/* Solarzellen-Gitter auf den Flügeln — macht sie auch bei kleiner Größe als
   Solarpanel statt als beliebiges weißes Rechteck erkennbar */
.iss-map-iss-marker .iss-icon-wing-line {
    stroke: #7f96bd;
    stroke-width: 0.5px;
    vector-effect: non-scaling-stroke;
}

.iss-map-iss-marker .iss-icon-strobe {
    fill: #ff2b2b;
    animation: iss-map-strobe 1.4s step-end infinite;
}

@keyframes iss-map-strobe {
    0%   { fill: #ff2b2b; }
    92%  { fill: #ff2b2b; }
    94%  { fill: #ffffff; }
    96%  { fill: #ff2b2b; }
    98%  { fill: #ffffff; }
    100% { fill: #ff2b2b; }
}

/* ============================================================
   Live-Badge oben rechts — Struktur/Farbe: zentrale .live-badge-Basis
   (live-badge.css), Farbe via --badge-color am Element (templates/index.html)
   ============================================================ */

#iss-map-live-badge {
    pointer-events: none;
}

/* ============================================================
   LED-Matrix-Einblendung — Bond-80er-Stil: Label + Wert bauen sich
   Buchstabe für Buchstabe auf/ab, OrbiSky-Blau statt klassischem LED-Grün.
   Zeileninhalt/Timing kommt komplett aus iss-map.js (_runLedSequence()).
   ============================================================ */

.iss-map-led-display {
    position: absolute;
    left: var(--margin-screen, 60px);
    bottom: 18vh;
    z-index: 20;
    max-width: 60%;
    text-align: left;
    pointer-events: none;
}

.iss-map-led-row {
    font-family: "Courier New", "Lucida Console", monospace;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--color-accent, #64c8ff);
    text-shadow: var(--shadow-text, 0 2px 8px rgba(0, 0, 0, 0.9), 0 0 20px rgba(0, 0, 0, 0.6));
    min-height: 1.3em;
    line-height: 1.3;
}

.iss-map-led-row.iss-map-led-row-empty {
    display: none;
}

.iss-map-led-label {
    font-size: 2.3em;
    font-weight: var(--font-weight-medium, 500);
    opacity: 0.82;
}

.iss-map-led-value {
    font-size: 2.3em;
    font-weight: var(--font-weight-bold, 700);
    margin-top: 0.12em;
}

/* Einzelnes Zeichen — Leerzeichen bleiben unangetastete Textknoten (kein
   Span/keine Animation), damit der Zeilenumbruch bei langen Texten (schmale
   Displays) ganz normal funktioniert. */
.led-char {
    display: inline-block;
    animation: iss-map-led-char-on 0.28s ease-out both;
}

.led-char.led-char-off {
    animation: iss-map-led-char-off 0.22s ease-in forwards;
}

/* Blinkender Cursor vor jeder neuen Zeile — überschreibt die Flicker-Animation
   von .led-char mit einem langsamen, klassischen Block-Blinken. 1s/Zyklus,
   damit LED_CURSOR_DURATION (2000ms, iss-map.js) exakt auf 2 volle Blinks fällt. */
.led-char.led-cursor {
    animation: iss-map-led-cursor-blink 1s step-end infinite;
}

@keyframes iss-map-led-cursor-blink {
    0%, 49%  { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes iss-map-led-char-on {
    0%   { opacity: 0; filter: blur(2px); transform: scale(1.5); }
    45%  { opacity: 1; filter: blur(0); transform: scale(0.9); }
    65%  { opacity: 0.35; }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes iss-map-led-char-off {
    0%   { opacity: 1; filter: blur(0); transform: scale(1); }
    40%  { opacity: 0.4; }
    100% { opacity: 0; filter: blur(2px); transform: scale(1.4); }
}