/* ============================================================
   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:
   - Subtiler dunkler Overlay für Tiefenwirkung
   - Gradient-Blending an Ober-/Unterkante → nahtloser Ivory-Übergang
   - Sanftes Reveal via .is-visible (bestehende Reveal-Animation)
   - Kaum wahrnehmbarer Ken-Burns-Effekt (~4% Zoom)
   ============================================================ */

/* === CONTAINER === */
.interlude-video {
    position: relative;
    width: 100%;
    height: clamp(14rem, 30vh, 22rem);
    overflow: hidden;
    background-color: #0D0D0D;
}

/* === 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;
    will-change: opacity;
    /* Crossfade: 1.8s für cinema-grade Smoothness */
    opacity: 0;
    transition: opacity 1.8s cubic-bezier(0.4, 0, 0.2, 1);
    /* Ken-Burns: kaum wahrnehmbarer Zoom über 25s */
    animation: interlude-ken-burns 25s ease-in-out infinite alternate;
}

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

/* === DARK OVERLAY · Subtile Tiefenwirkung === */
.interlude-video__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg,
            rgba(0, 0, 0, 0.12) 0%,
            rgba(0, 0, 0, 0.04) 50%,
            rgba(0, 0, 0, 0.12) 100%);
    z-index: 1;
    pointer-events: none;
}

/* === OBER-/UNTERKANTEN · Sanfter Übergang zur Ivory-Sektion === */
.interlude-video::before,
.interlude-video::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: clamp(2rem, 5vh, 4rem);
    z-index: 2;
    pointer-events: none;
}

.interlude-video::before {
    top: 0;
    background: linear-gradient(to bottom,
            var(--ivory) 0%,
            transparent 100%);
}

.interlude-video::after {
    bottom: 0;
    background: linear-gradient(to top,
            var(--ivory) 0%,
            transparent 100%);
}

/* === KEN BURNS KEYFRAMES === */
@keyframes interlude-ken-burns {
    0% {
        transform: scale(1) translate3d(0, 0, 0);
    }

    100% {
        transform: scale(1.04) translate3d(-0.5%, -0.3%, 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, 35vh, 26rem);
    }

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

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

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

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

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

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

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

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

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

/* === HOMEPAGE · Keine Gradient-Overlays auf Interlude-Videos === */
[data-page="home"] .interlude-video::before,
[data-page="home"] .interlude-video::after {
    display: none;
}

[data-page="home"] .interlude-video__overlay {
    display: none;
}

/* === STORE PAGE · Keine Gradient-Overlays auf dem Interlude-Video === */
[data-page="store"] .interlude-video::before,
[data-page="store"] .interlude-video::after {
    display: none;
}

[data-page="store"] .interlude-video__overlay {
    display: none;
}

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

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