// ══ Interstitial Slides ════════════════════════════════════
// Visual styles only. Stacking layout (margin-top, z-index)
// is handled entirely by initStack() in container-fullheight-slider.js.
//
// Background modifiers:
//   &--gradient          — brand gradient (with hardcoded fallback)
//   &--violet            — solid violet
//   &--image             — dark bg + semi-transparent image overlay
//   &--image-transparent — image only, transparent bg
//   &--image-opaque      — dark bg + fully opaque image overlay
//
// Headline modifier:
//   &--gradient          — gradient clip text

// Hardcoded fallback gradient — used if --noventi-gradient CSS custom
// property chain fails (any of --noventi-color-* undefined in scope).
$ar-gradient-fallback: linear-gradient(
        to right,
        #f38549   0%,
        #d3405e  22%,
        #c02f80  45%,
        #9a2575  68%,
        #762589 100%
);

.ar-int-wrapper {
    position:   relative;
    height:     300vh; // CHANGED: was 400vh — JS timer handles timing now
    background: #1a0a1e; // solid bg so semi-transparent images blend
    // against this colour, not the section below

    .ar-interstitial {
        position:        sticky;
        top:             0;
        height:          100vh;
        display:         flex;
        align-items:     center;
        justify-content: center;
        overflow:        hidden;

        // Default background — ensures semi-transparent bg images
        // always blend against a solid colour rather than showing
        // through to the section below in the z-stack.
        background: #1a0a1e;

        // position:sticky does not reliably create a containing block
        // for position:absolute children across all browsers.
        // A CSS transform forces the element to become a containing block
        // (CSS spec §10.1) so .ar-int-bg-img { inset:0 } resolves to
        // this 100vh element instead of the 300vh .ar-int-wrapper parent.
        overflow:  hidden;
        transform: translateZ(0);

        // ── Gradient background ───────────────────────────────
        // var() with fallback: if --noventi-gradient resolves to
        // invalid/transparent (any token in the chain is undefined),
        // $ar-gradient-fallback guarantees a visible background.
        &--gradient {
            background: var(--noventi-gradient, #{$ar-gradient-fallback});
        }

        // ── Solid violet ──────────────────────────────────────
        &--violet {
            background: #602965;
        }

        // ── Image with semi-transparent overlay ───────────────
        &--image {
            background: #fdf9f7;
        }

        // ── Image only, no background colour ─────────────────
        &--image-transparent {
            background: #fdf9f7;
        }

        // ── Image with opaque dark overlay ────────────────────
        &--image-opaque {
            background: #1a0a1e;
        }

        // ── Inner content ─────────────────────────────────────
        .ar-int-inner {
            text-align: center;
            color:      #fff;
            padding:    0 48px;
            position:   relative;
            z-index:    2;
        }

        // ── Large display headline ────────────────────────────
        .ar-int-headline {
            font-size:      clamp(52px, 9vw, 130px);
            font-weight:    700;
            line-height:    2;
            color:          #fff;
            margin:         0;

            // Gradient clip text — used on image backgrounds
            &--gradient {
                background:              var(--ar-header-gradient);
                -webkit-background-clip: text;
                background-clip:         text;
                -webkit-text-fill-color: transparent;
                color:                   transparent;
            }
        }
    }
}

// ── Background image layers ───────────────────────────────
// Semi-transparent: opacity driven by --ar-int-opacity (0–100)
.ar-int-bg-img {
    position: absolute;
    inset:    0;
    z-index:  1;

    &__img {
        width:      100%;
        height:     100%;
        object-fit: cover;
        opacity:    0.2;
    }
}

// Fully opaque version — no opacity reduction
.ar-int-bg-img-opaque {
    position: absolute;
    inset:    0;
    z-index:  1;

    &__img {
        width:      100%;
        height:     100%;
        object-fit: cover;
        opacity:    1;
    }
}

// ── Mobile (<700px) ───────────────────────────────────────
// JS skips initStack and the interstitial engine below 700px.
// CSS resets the sticky structure so all sections flow normally
// below each other — no stack mechanic, no auto-advance.
@media (max-width: 800px) {
    .ar-int-wrapper {
        height: auto;        // no tall scroll container needed
        .ar-interstitial {
            position: relative;  // not sticky — flows in document order
            height:   auto;
            min-height: 50vh;    // still visually prominent as a section break
            .ar-int-inner { padding: 0 28px; }
        }
    }

}