/* =============================================================================
   ORBISKY V2 - ECLIPSE LIVESTREAM
   Sonnenfinsternis-Livestream: Badge, Overlay, Countdown
   ============================================================================= */

/* === Eclipse Live-Badge (Orange-Rot, pulsierend) === */
.layout-livestream .live-badge.eclipse-badge {
    background: linear-gradient(135deg, #ff6b35, #e63946);
    color: #fff;
    font-weight: var(--font-weight-bold);
    animation: eclipse-badge-pulse 2s ease-in-out infinite;
}

@keyframes eclipse-badge-pulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(255, 107, 53, 0.6);
    }
    50% {
        box-shadow: 0 0 30px rgba(230, 57, 70, 1), 0 0 50px rgba(255, 107, 53, 0.6);
    }
}

/* === Punkt im Badge === */
.layout-livestream .live-badge.eclipse-badge .eclipse-dot {
    display: inline-block;
    width: 0.6em;
    height: 0.6em;
    background: #fff;
    border-radius: 50%;
    margin-right: 0.3em;
    vertical-align: middle;
    animation: eclipse-dot-blink 1s ease-in-out infinite;
}

@keyframes eclipse-dot-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* === Overlay Container === */
.eclipse-overlay {
    position: absolute;
    bottom: var(--margin-screen-v);
    left: var(--margin-screen);
    font-size: 2.4em;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    text-shadow: var(--shadow-text);
    transition: opacity 2s ease-in-out;
    opacity: 1;
    max-width: 92%;
    padding: 0 4%;
    box-sizing: border-box;
    z-index: calc(var(--z-overlay) + 10);
    line-height: 1.3;
}

.eclipse-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.eclipse-overlay.fade-out {
    opacity: 0;
}

/* === Akzent-Farbe (Orange-Gold) === */
.eclipse-overlay strong {
    color: #ff6b35;
}

/* === Countdown-Anzeige (gross, prominent) === */
.eclipse-overlay .eclipse-countdown {
    font-size: 1.4em;
    font-weight: var(--font-weight-bold);
    color: #ff6b35;
}

.eclipse-overlay .eclipse-countdown.totality {
    color: #e63946;
    animation: totality-glow 1s ease-in-out infinite;
}

@keyframes totality-glow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(230, 57, 70, 0.8), var(--shadow-text);
    }
    50% {
        text-shadow: 0 0 25px rgba(230, 57, 70, 1), 0 0 40px rgba(255, 107, 53, 0.5), var(--shadow-text);
    }
}

/* === Sicherheitshinweis === */
.eclipse-overlay .eclipse-safety {
    color: #ffd166;
    font-weight: var(--font-weight-bold);
}

/* === Override-Modus: Permanenter Countdown oben rechts === */
.eclipse-override-countdown {
    position: absolute;
    top: var(--margin-screen-v);
    right: var(--margin-screen);
    font-size: 3em;
    font-weight: var(--font-weight-bold);
    color: #ff6b35;
    text-shadow: var(--shadow-text);
    z-index: calc(var(--z-overlay) + 20);
    text-align: right;
    line-height: 1.2;
}

.eclipse-override-countdown .countdown-label {
    font-size: 0.4em;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text);
    display: block;
}

.eclipse-override-countdown .countdown-time {
    font-variant-numeric: tabular-nums;
}

.eclipse-override-countdown.totality-active .countdown-time {
    color: #e63946;
    animation: totality-glow 1s ease-in-out infinite;
}

/* =============================================================================
   LUNAR ECLIPSE VARIANTE (Kupferrot / Blutmond)
   Aktiviert via .lunar-eclipse Klasse auf #eclipse-livestream
   ============================================================================= */

/* Badge: Kupferrot-Gradient */
.lunar-eclipse .live-badge.eclipse-badge {
    background: linear-gradient(135deg, #cd5c5c, #8b2252);
}

@keyframes lunar-badge-pulse {
    0%, 100% {
        box-shadow: 0 0 15px rgba(205, 92, 92, 0.6);
    }
    50% {
        box-shadow: 0 0 30px rgba(139, 34, 82, 1), 0 0 50px rgba(205, 92, 92, 0.6);
    }
}

.lunar-eclipse .live-badge.eclipse-badge {
    animation: lunar-badge-pulse 2s ease-in-out infinite;
}

/* Overlay Akzent-Farbe: Kupfer */
.lunar-eclipse .eclipse-overlay strong {
    color: #cd5c5c;
}

/* Countdown: Kupfer statt Orange */
.lunar-eclipse .eclipse-overlay .eclipse-countdown {
    color: #cd5c5c;
}

.lunar-eclipse .eclipse-overlay .eclipse-countdown.totality {
    color: #8b2252;
    animation: lunar-totality-glow 1s ease-in-out infinite;
}

@keyframes lunar-totality-glow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(139, 34, 82, 0.8), var(--shadow-text);
    }
    50% {
        text-shadow: 0 0 25px rgba(139, 34, 82, 1), 0 0 40px rgba(205, 92, 92, 0.5), var(--shadow-text);
    }
}

/* Lunar-Hinweis (statt Sicherheitswarnung) */
.eclipse-overlay .eclipse-lunar-hint {
    color: #b8d4e3;
    font-weight: var(--font-weight-bold);
}

/* Override-Countdown: Kupfer */
.lunar-eclipse .eclipse-override-countdown {
    color: #cd5c5c;
}

.lunar-eclipse .eclipse-override-countdown.totality-active .countdown-time {
    color: #8b2252;
    animation: lunar-totality-glow 1s ease-in-out infinite;
}