/* ============================================================
   Front-Page "Zoom" — Frame-Scrubbing auf Canvas (Pilot)
   Nur bei ?v=zoom geladen. Scroll spult durch die Frame-Sequenz.
   ============================================================ */

.zoom {
    position: relative;
    background: var(--st-bg-base, #060713);
    touch-action: pan-y;      /* iOS: vertikales Scrollen über der Bühne erzwingen */
}

/* Spacer erzeugt die Scroll-Strecke; Höhe setzt das JS in px (iOS-robust, kein vh-Kollaps) */
.zoom__spacer {
    width: 100%;
}

/* Bühne fixed statt sticky — auf iOS Safari bombenfest (sticky klebt dort nicht) */
.zoom__stage {
    position: fixed;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    background: #000;
    touch-action: pan-y;
    pointer-events: none;     /* reines Visual — Touch geht zum Scroll-Body durch */
    transition: opacity 0.35s ease;
}
.zoom__stage.is-hidden {      /* ausgeblendet, sobald die Zoom-Strecke durchscrollt ist → Blog sichtbar */
    opacity: 0;
    visibility: hidden;
}

.zoom__canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;     /* Canvas fängt sonst auf iOS die Scroll-Geste ab */
    touch-action: pan-y;
}

/* --- Ladeanzeige -------------------------------------------------------- */
.zoom__loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--st-bg-base, #060713);
    z-index: 5;
    transition: opacity 0.6s ease;
}
.zoom__loader.is-done { opacity: 0; pointer-events: none; }
.zoom__loader-bar {
    width: 180px;
    height: 2px;
    background: rgba(255,255,255,0.12);
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.zoom__loader-bar::after {
    content: '';
    position: absolute;
    inset: 0;
    width: var(--p, 0%);
    background: var(--st-gradient-blue, linear-gradient(135deg, #007AFF, #4b8eff));
    transition: width 0.2s ease;
}

/* --- Captions ----------------------------------------------------------- */
.zoom__captions {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.zoom__caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 8vw;
    opacity: 0;
    will-change: opacity;
}
/* Lesbarkeits-Backdrop: dunkler radialer Glow hinter der Caption
   (wichtig auf den hellen Ebenen Stadt/Dashboard) */
.zoom__caption::before {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: min(94vw, 1000px);
    height: min(66vh, 520px);
    background: radial-gradient(ellipse at center,
        rgba(6, 7, 19, 0.72) 0%, rgba(6, 7, 19, 0.45) 42%, rgba(6, 7, 19, 0) 72%);
    z-index: -1;
    pointer-events: none;
}
.zoom__eyebrow {
    font-family: var(--st-font-headline, sans-serif);
    font-size: clamp(0.8rem, 1vw, 0.95rem);
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--st-primary-hover, #4b8eff);
    margin-bottom: 1.25rem;
    text-shadow: 0 0 24px rgba(0, 122, 255, 0.5);
}
.zoom__title {
    font-family: var(--st-font-headline, sans-serif);
    font-weight: 700;
    font-size: clamp(3rem, 8.5vw, 7rem);
    line-height: 0.98;
    letter-spacing: -0.03em;
    color: #fff;
    margin: 0 0 1.5rem;
    text-shadow: 0 4px 50px rgba(6, 7, 19, 0.95), 0 0 70px rgba(0, 122, 255, 0.25);
}
.zoom__sub {
    font-size: clamp(1.1rem, 1.7vw, 1.45rem);
    line-height: 1.5;
    color: var(--st-text, #e2e1f3);
    max-width: 560px;
    margin: 0;
    text-shadow: 0 2px 28px rgba(6, 7, 19, 0.95);
}

/* --- Split-Text: Buchstaben-Einflug je Caption ------------------------- */
.zoom-word { display: inline-block; white-space: nowrap; }   /* Wort bricht nie mitten drin */
.zoom-char {
    display: inline-block;
    opacity: 0;
    will-change: transform, opacity, filter;
    transition:
        opacity 0.5s cubic-bezier(0.2, 0.7, 0.16, 1),
        transform 0.6s cubic-bezier(0.2, 0.7, 0.16, 1),
        filter 0.6s ease;
    transition-delay: calc(var(--i, 0) * 32ms);
}
.zoom__caption.is-revealed .zoom-char {
    opacity: 1;
    transform: none;
    filter: none;
}
/* Default-Zustände je Einflug-Stil */
[data-anim="zoom"]    .zoom-char { transform: scale(3.4); filter: blur(7px); transform-origin: center; }
[data-anim="sides"]   .zoom-char { transform: translateX(var(--dx, 0)); }
[data-anim="rise"]    .zoom-char { transform: translateY(0.9em); }
[data-anim="scatter"] .zoom-char { transform: translate(var(--dx, 0), var(--dy, 0)) rotate(var(--rot, 0deg)); }

@media (prefers-reduced-motion: reduce) {
    .zoom-char { opacity: 1; transform: none; filter: none; transition: none; }
}

/* --- Scroll-Cue --------------------------------------------------------- */
.zoom__cue {
    position: absolute;
    bottom: 34px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--st-text-faint, #8b90a0);
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    will-change: opacity;
}