/**
 * OrbiSky v2 — Wetter-Tipp Hintergrundanimationen
 *
 * Phase 1 (Einleitungstext, 7s): Optisches Teleskop, schwenkt zum Himmel.
 * Phase 4 (Claude-Tipp, 10s):   Radioteleskop, scannt mit pulsierenden Funkwellen.
 *
 * Beide Layer liegen hinter dem Text-Overlay (.sky-text-overlay) und
 * werden vom Observation-Tips-Modul über die Klassen
 *   .layout-observation-tips.weather-phase-1
 *   .layout-observation-tips.weather-phase-4
 * eingeblendet (1.2s opacity-Transition).
 */

/* ============= Container-Layer ============= */

.weather-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease;
    overflow: hidden;
    /* Hinter dem Canvas, hinter dem Text-Overlay */
    z-index: 1;
}

.layout-observation-tips.weather-phase-1 .weather-bg-phase1 { opacity: 1; }
.layout-observation-tips.weather-phase-4 .weather-bg-phase4 { opacity: 1; }

/* Text-Overlay liegt darüber */
.layout-observation-tips .sky-text-overlay { z-index: 5; }
.layout-observation-tips .sky-info-bar     { z-index: 6; }

/* Phase 1 + 4 (Wetter-Tipp): Text als Hauptereignis im oberen Bildbereich,
   Animation darunter — anders als bei allen anderen Tipps */
.layout-observation-tips.weather-phase-1 .sky-text-overlay,
.layout-observation-tips.weather-phase-4 .sky-text-overlay {
    bottom: auto;
    top: 22%;
    transform: none;
}

/* ============= PHASE 1 — OPTISCHES TELESKOP ============= */

.weather-bg-phase1 {
    background:
        radial-gradient(ellipse at 25% 15%, rgba(255, 200, 120, 0.10) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 85%, rgba(60, 90, 180, 0.18) 0%, transparent 60%),
        linear-gradient(180deg, #050a18 0%, #0a1530 45%, #14213f 100%);
}

/* Sterne (analog ISS-Flyover, dezenter) */
.weather-bg-phase1 .weather-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(2px 2px at 12% 18%, rgba(255, 240, 210, 0.95) 0%, transparent 100%),
        radial-gradient(2px 2px at 78% 12%, rgba(255, 230, 180, 0.9)  0%, transparent 100%),
        radial-gradient(2px 2px at 88% 60%, rgba(255, 220, 180, 0.8)  0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 35% 8%,  rgba(255, 255, 255, 0.7) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 60% 25%, rgba(255, 240, 220, 0.7) 0%, transparent 100%),
        radial-gradient(1.5px 1.5px at 5% 55%,  rgba(255, 245, 210, 0.65) 0%, transparent 100%),
        radial-gradient(1px 1px at 45% 32%, rgba(255, 255, 255, 0.55) 0%, transparent 100%),
        radial-gradient(1px 1px at 92% 30%, rgba(255, 235, 200, 0.55) 0%, transparent 100%),
        radial-gradient(1px 1px at 22% 42%, rgba(255, 255, 255, 0.45) 0%, transparent 100%),
        radial-gradient(1px 1px at 68% 50%, rgba(255, 240, 210, 0.45) 0%, transparent 100%);
    animation: weatherStarsTwinkle 7s ease-in-out infinite;
}

@keyframes weatherStarsTwinkle {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 1; }
}

/* Teleskop selbst: mittig unten platziert, Tubus schwenkt von links nach rechts (immer nach oben) */
.weather-bg-phase1 .telescope {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 56vh;
    height: 56vh;
    opacity: 0.9;
    filter: drop-shadow(0 0 16px rgba(232, 93, 31, 0.35));
}

.weather-bg-phase1 .telescope-tube {
    transform-origin: 200px 300px;
    animation: telescopeScan 22s ease-in-out infinite;
}

/* Schwenkt vom linken zum rechten Himmelsbereich, immer nach oben gerichtet
   (-45° = oben-rechts, -90° = Zenit, -135° = oben-links) */
@keyframes telescopeScan {
    0%, 100% { transform: rotate(-40deg); }
    50%      { transform: rotate(-140deg); }
}

/* Subtiler Lichtstrahl, der aus dem Tubus austritt */
.weather-bg-phase1 .telescope-beam {
    transform-origin: 200px 300px;
    animation: telescopeScan 22s ease-in-out infinite;
    opacity: 0.35;
    mix-blend-mode: screen;
}

/* ============= PHASE 4 — NACHTHIMMEL + RADIOTELESKOP ============= */

.weather-bg-phase4 {
    background: #010408; /* Solid base — Night-Sky-SVG deckt alles ab */
}

/* Vollflächiger Night-Sky-SVG */
.weather-bg-phase4 .p4-nightsky {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* Radioteleskop: schlankes Tripod-Design, mittig unten */
.weather-bg-phase4 .radio-telescope {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 40vh;
    height: 40vh;
    opacity: 0.92;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.5));
}

/* Schüssel scannt den Himmel: mal nach links (oben-links), mal nach rechts (oben-rechts).
   Gezeichnet bei 0° (öffnet nach rechts), CSS dreht:
   −130° → Öffnung oben-links, −50° → Öffnung oben-rechts. */
.weather-bg-phase4 .radio-dish-group {
    transform-origin: 150px 194px;
    animation: dishScan 40s ease-in-out infinite;
}

@keyframes dishScan {
    0%   { transform: rotate(-130deg); }
    20%  { transform: rotate(-130deg); }
    47%  { transform: rotate(-50deg);  }
    67%  { transform: rotate(-50deg);  }
    90%  { transform: rotate(-130deg); }
    100% { transform: rotate(-130deg); }
}