/* ============================================================
   27 – Interlude Video · Stille Videoloops als visuelle Zäsuren
   
   ARCHITEKTUR:
   - Vollflächige, stumme Video-Loops zwischen den Editorial-Sektionen
   - Dual-Video Ping-Pong Crossfade für nahtlose Playlist-Übergänge
   - Videos A+B übereinandergestapelt, Opacity-Crossfade beim Wechsel
   - Kein UI, kein Sound – pure visuelle Textur
   - Lazy Loading via IntersectionObserver (Performance!)
   - Mobile-optimiert: Reduzierte Höhe, aggressive Autoplay
   
   DESIGN:
   - Sanftes Reveal via .is-visible (bestehende Reveal-Animation)
   - Kaum wahrnehmbarer Ken-Burns-Effekt (~4% Zoom)
   ============================================================ */

/* === CONTAINER === */
.interlude-video {
    position: relative;
    z-index: 3; /* Ermöglicht, dass der Schatten auf benachbarte Sektionen fällt */
    width: 100%;
    height: clamp(14rem, 30svh, 22rem);
    /* CLS-Prävention: aspect-ratio als Fallback bis clamp()-Höhe greift.
       Wird von der expliziten height überschrieben, dient aber als
       Dimensionierungshilfe bei initialem Layout-Pass. */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: #0D0D0D;
    contain: layout; /* Hebt das globale contain: paint auf, damit der Box-Shadow sichtbar ist */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), 0 -15px 35px rgba(0, 0, 0, 0.5);
}

/* Goldene Linien oben und unten an den Rändern des Videos */
.interlude-video::before,
.interlude-video::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #0d0d0d; /* Verhindert das Durchscheinen heller Body-Hintergründe an den transparenten Rändern des Dividers */
    background-image: linear-gradient(90deg,
            transparent 5%,
            rgba(196, 161, 105, 0.3) 25%,
            rgba(196, 161, 105, 0.5) 50%,
            rgba(196, 161, 105, 0.3) 75%,
            transparent 95%);
    z-index: 10;
    /* GPU-Guards zur Überlagerung von hardwarebeschleunigten Videos */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

.interlude-video::before {
    top: 0;
}

.interlude-video::after {
    bottom: 0;
}

/* === VIDEO ELEMENTS · Dual Ping-Pong Stack === */
.interlude-video__media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    /* Crossfade: 1.8s für cinema-grade Smoothness */
    opacity: 0;
    transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
    /* ── Anti-Flickering: iOS Safari GPU-Wechsel ──
       Kombination aus backface-visibility:hidden + preserve-3d
       ist PFLICHT – einzeln reicht nicht aus (identisch zu .reveal in 01-globals.css). */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
    /* Ken-Burns: ENTFERNT – Kein Effekt mehr über dem Video */
}

/* Aktives Video ist sichtbar */
.interlude-video__media.is-active {
    opacity: 1;
}

/* === LUXURY TEXT OVERLAY (Vorschlag 3: The Liquid Gold Aura) === */
.interlude-video__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    /* Keine Beeinträchtigung von Klicks */
    z-index: 5;
}

.interlude-video__caption-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    /* FG (Wort) oben, BG (100%) unten */
    justify-content: center;
    align-items: center;
    gap: 0.08rem;
    /* Viel engerer, luxuriös geschlossener Abstand */
    padding: 0 1.5rem;
    /* Seitlicher Schutzpuffer für mobile Endgeräte */
    box-sizing: border-box;
}

/* Hintergrund: Die "100%" (Montserrat Bold, unter dem Wort platziert) */
.interlude-video__caption-bg {
    position: relative;
    /* Nicht mehr absolut positioniert */
    font-family: var(--font-accent);
    font-weight: 700;
    /* 300% mehr Gewicht (von 100 auf 700 Bold) */
    font-size: clamp(1.8rem, 5.4vw, 3.9rem);
    /* 25% größer */
    color: rgba(255, 255, 255, 0.5);
    /* 50% Transparenz auf Wunsch */
    letter-spacing: 0.12em;
    /* 10% mehr Spacing für edle Ziffernöffnung */
    text-align: center;
    white-space: nowrap;
    /* Absoluter Schutz vor Zeilenumbrüchen */
    z-index: 1;
    opacity: 0;
    filter: blur(4px);
    /* Stärkerer Blur-Start für den Aura-Effekt */
    transform: translateY(-8px) scale(0.97);
    /* Sanfter Slide von oben */
    backface-visibility: hidden;
    /* Erzwingt Hardware-Rendering auf iOS/Android (120Hz) */
    transform-style: preserve-3d;
    transition: opacity 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        filter 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 2.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, filter, transform;
}

.interlude-video__caption-percent {
    font-size: 0.5em !important;
    /* 50% kleiner */
    vertical-align: 22%;
    /* Edel leicht hochgestellt */
    margin-left: 0.02em;
    /* Minimaler Abstand für perfekte Ausrichtung */
}

/* Vordergrund: Das Wort in edlem Ophyr-Signatur-Gold (Montserrat) */
.interlude-video__caption-fg {
    position: relative;
    font-family: var(--font-accent);
    font-weight: 900;
    /* 50% mehr Gewicht (von 600 auf 900 Black) */
    font-size: clamp(1.15rem, 2.9vw, 2.1rem);
    color: rgba(255, 255, 255, 0.5);
    /* 50% Transparenz auf Wunsch */
    letter-spacing: 0.25em;
    text-transform: uppercase;
    text-align: center;
    white-space: nowrap;
    /* Absoluter Schutz vor Zeilenumbrüchen */
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.6);
    z-index: 2;
    opacity: 0;
    transform: translateY(8px);
    /* Vertikaler Reveal-Start von unten */
    backface-visibility: hidden;
    /* Erzwingt Hardware-Rendering auf iOS/Android (120Hz) */
    transform-style: preserve-3d;
    transition: opacity 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 1.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.interlude-video__caption-fg--large {
    font-size: clamp(1.944rem, 4.9vw, 3.549rem) !important;
}

.interlude-video__caption-fg--silizium-large {
    font-size: clamp(1.944rem, 4.9vw, 3.549rem) !important;
    color: rgba(255, 255, 255, 0.7);
}

/* BG (100%) im Silizium-Modus: 40% weniger Transparenz */
.interlude-video__caption-bg--silizium {
    color: rgba(255, 255, 255, 0.7);
}

.interlude-video__caption-fg--gold-large {
    font-size: clamp(1.944rem, 4.9vw, 3.549rem) !important;
    color: rgba(255, 255, 255, 0.75);
}

/* BG (100%) im Gold-Modus: 50% weniger Transparenz */
.interlude-video__caption-bg--gold {
    color: rgba(255, 255, 255, 0.75);
}

/* Animations-Trigger */
.interlude-video__caption-bg.is-visible {
    opacity: 1;
    filter: blur(0px);
    /* Wird kristallklar */
    transform: translateY(0) scale(1.0);
}

.interlude-video__caption-fg.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* === REVEAL-STATE · Fade-In beim Reinscollen === */
.interlude-video.reveal {
    opacity: 0;
    transform: none;
    transition: opacity 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.interlude-video.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* ============================================================
   INTERLUDE IMAGE · Vollflächiges Bild als Abschluss
   ============================================================ */

.interlude-image {
    position: relative;
    width: 100%;
    height: clamp(16rem, 40vh, 28rem);
    overflow: hidden;
}

.interlude-image__media {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Gradient-Blending: nur oben (unten kommen die Value Icons) */
.interlude-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(2rem, 5vh, 4rem);
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to bottom,
            var(--ivory) 0%,
            transparent 100%);
}

.interlude-image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: clamp(2rem, 5vh, 4rem);
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to top,
            var(--ivory) 0%,
            transparent 100%);
}

/* === RESPONSIVE === */

/* === Tablet === */
@media (min-width: 48rem) {
    .interlude-video {
        height: clamp(16rem, 35svh, 26rem);
    }

    .interlude-image {
        height: clamp(20rem, 45svh, 32rem);
    }
}

/* === Desktop === */
@media (min-width: 64rem) {
    .interlude-video {
        height: clamp(18rem, 40svh, 30rem);
    }

    .interlude-image {
        height: clamp(22rem, 48svh, 36rem);
    }
}

/* === Grosse Screens === */
@media (min-width: 90rem) {
    .interlude-video {
        height: clamp(20rem, 42svh, 34rem);
    }

    .interlude-image {
        height: clamp(24rem, 50svh, 40rem);
    }
}

/* === Kleine Mobile === */
@media (max-width: 30rem) {
    .interlude-video {
        height: clamp(12rem, 28svh, 18rem);
    }

    .interlude-image {
        height: clamp(14rem, 35svh, 22rem);
    }
}

/* === Sehr kleine Screens === */
@media (max-width: 23.75rem) {
    .interlude-video {
        height: clamp(10rem, 26svh, 16rem);
    }

    .interlude-image {
        height: clamp(12rem, 30svh, 18rem);
    }
}



/* === Reduced Motion · Barrierefreiheit === */
@media (prefers-reduced-motion: reduce) {
    .interlude-video__media {
        animation: none;
    }

    .interlude-video.reveal {
        transition: opacity 0.3s ease;
    }
}

/* ============================================================
   VARIANTE 1: FULL-BLEED EDITORIAL-INTERLUDE (HOMEPAGE)
   ============================================================ */

.home-zone .interlude-video {
    /* FIX: 100vw → 100% für Firefox Android Kompatibilität */
    width: 100% !important;
    max-width: none !important;
    position: relative;
    left: 0;
    right: 0;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0;
}

/* Mobil-Höhe */
@media (max-width: 47.99rem) {
    .home-zone .interlude-video {
        height: clamp(16rem, 35svh, 24rem);
    }
}

/* Desktop-Höhe (Breites Kino-Format) */
@media (min-width: 48rem) {
    .home-zone .interlude-video {
        height: clamp(20rem, 32vh, 28rem);
    }
}

/* Interaktives Verhalten, wenn das Video als Button dient */
.interlude-video[role="button"] {
    cursor: pointer;
}

/* Brightness-Hover – ERSATZLOS ENTFERNT */

.interlude-video[role="button"]:focus-visible {
    outline: 2px solid var(--gold, #c4a169);
    outline-offset: -2px;
}

/* === MORE INDICATOR (Process Page Accordion Trigger Indicator) === */
.interlude-video__more-indicator {
    position: relative;
    z-index: 10;
    margin: clamp(1.5rem, 3.5vh, 2.2rem) auto 0 auto; /* Zentriert und mit edlem Abstand unter dem Video */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    color: var(--gold, #c4a169);
    cursor: pointer;
    width: fit-content;
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                color 0.4s ease;
    /* GPU-Beschleunigung */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

.interlude-video__more-indicator:hover {
    color: var(--gold-light, #d4bc91);
}

.interlude-video__more-indicator .more-text {
    font-family: var(--font-accent);
    font-size: clamp(0.6rem, 1.3vw, 0.72rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.35em;
    opacity: 0.85;
}

.interlude-video__more-indicator .more-chevron {
    width: clamp(2rem, 4.4vw, 2.7rem);  /* 100% grösser (von 1rem-1.35rem) */
    height: clamp(2rem, 4.4vw, 2.7rem); /* 100% grösser (von 1rem-1.35rem) */
    stroke: currentColor;
    stroke-width: 1.2; /* Dünnere Linie für edleren Look bei Verdoppelung der Grösse */
    fill: none;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    animation: interludeChevronBounce 2s ease-in-out infinite;
}

/* Drehung wenn geöffnet */
.interlude-video__more-indicator[aria-expanded="true"] .more-chevron {
    transform: rotate(180deg);
    animation: none; /* Bouncing stoppen wenn geöffnet */
}

@keyframes interludeChevronBounce {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, 6px, 0); /* Stärkerer Bounce passend zur Grösse */
    }
}