/* ============================================================
   scroll_sequence.css · Scroll-Video als Bildfolge (js/scroll_sequence.js, ohne GSAP)
   Section so hoch wie der Scrollweg (--seq-length), Bühne klebt 100vh fest.
   ============================================================ */

.seq {
    position: relative;
    height: var(--seq-length, 300vh);
    background: #0c0d0e;
    color: #f2f2ef;
}

.seq-sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

/* Ersatz, wenn ein Eltern-Element sticky blockiert (JS setzt .seq--pin / .is-fixed / .is-after) */
.seq--pin .seq-sticky { position: absolute; top: 0; left: 0; right: 0; }
.seq--pin.is-fixed .seq-sticky { position: fixed; top: 0; right: auto; }
.seq--pin.is-after .seq-sticky { top: auto; bottom: 0; }

.seq-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* Verlauf unten für die Schrift */
.seq-sticky::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 50%;
    background: linear-gradient(0deg, rgba(12,13,14,.85) 0%, rgba(12,13,14,0) 100%);
    pointer-events: none;
}

/* Texte: liegen übereinander unten links, jeder blendet in seinem Abschnitt ein */
.seq-steps {
    position: absolute;
    left: 0; right: 0; bottom: clamp(40px, 8vh, 96px);
    z-index: 2;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    pointer-events: none;
}

.seq-step {
    position: absolute;
    left: 24px; right: 24px; bottom: 0;
    max-width: 720px;
    opacity: 0;
    -webkit-transform: translateY(24px);
    transform: translateY(24px);
    transition: opacity .6s ease, -webkit-transform .8s cubic-bezier(.16, 1, .3, 1);
    transition: opacity .6s ease, transform .8s cubic-bezier(.16, 1, .3, 1);
}
.seq-step.is-visible {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
}

.seq-eyebrow {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--color-accent, #c9a45c);
}

.seq-title {
    display: block;
    margin: 0 0 14px;
    font-family: var(--font-display, inherit);
    font-size: clamp(44px, 7vw, 110px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.015em;
    text-transform: uppercase;
    color: #f2f2ef;
    text-shadow: 0 2px 7px rgba(0, 0, 0, .3);
}
.seq-title em { font-style: normal; color: var(--color-accent, #c9a45c); }

.seq-text {
    margin: 0;
    font-size: clamp(17px, 1.4vw, 20px);
    line-height: 1.55;
    color: rgba(242, 242, 239, .85);
}

@media (prefers-reduced-motion: reduce) {
    .seq-step { transition: none; }
}