/* ============================================================
   22 – Paracelsus Quote Carousel · VARIANTE A: Cinematic Dolly Zoom
   
   EFFEKT: Text startet 25% größer + stark verschwommen,
   zoomt dann zusammen und wird scharf.
   Dramatisch, filmisch, starker visueller Impact.
   
   TECHNIK: transform + opacity + filter + clip-path.
   GPU-optimiert. 120Hz-bereit.
   ============================================================ */

/* Override: quote-container wird zum Grid-Stack */
.paracelsus-quote .quote-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    align-items: center;
    justify-items: center;
    min-height: 4rem;
    position: relative;
}

/* Subtiler Gold-Aura-Puls während Phase 3 */
.paracelsus-quote .quote-container::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(196, 161, 105, 0.04), transparent 70%);
    opacity: 0;
    transition: opacity 1.2s ease;
    pointer-events: none;
    z-index: 0;
}

.paracelsus-quote.is-revealing .quote-container::before {
    opacity: 1;
}

/* Goldlinie – deaktiviert */
.paracelsus-quote .quote-container::after {
    content: '';
    position: absolute;
    left: 15%;
    right: 15%;
    height: 0.5px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    top: -2%;
}

.paracelsus-quote.is-revealing .quote-container::after {
    animation: none;
}

@keyframes golden-wipe-line {
    0%   { top: -2%;  opacity: 0; }
    6%   { opacity: 0; }
    94%  { opacity: 0; }
    100% { top: 102%; opacity: 0; }
}

/* === SLIDE STATES === */

.quote-slide {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 55rem;
    z-index: 2;

    /* VARIANTE A: Groß + Unscharf → Klein + Scharf (Dolly Zoom) */
    opacity: 0;
    transform: scale(1.25) translate3d(0, 0, 0);
    filter: blur(20px);
    clip-path: inset(0 0 100% 0);

    /* Dolly-Zoom Easing: Transform langsamer als Opacity für dramatischen Effekt */
    transition:
        opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.8s cubic-bezier(0.22, 1, 0.36, 1),
        filter 1.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
        clip-path 1.4s cubic-bezier(0.77, 0, 0.175, 1);

    will-change: transform, opacity; /* filter/clip-path sind Main-Thread → kein will-change nötig */
}

/* Typografisches Atmen: Letter-Spacing kontrahiert dramatisch beim Einblenden */
.quote-slide .quote-text {
    letter-spacing: 0.45em;
    transition: letter-spacing 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.quote-slide.is-active .quote-text {
    letter-spacing: 0.25em;
}

/* Active: Kristallklar, normalgröße, scharf */
.quote-slide.is-active {
    opacity: 1;
    transform: scale(1) translate3d(0, 0, 0);
    filter: blur(0);
    clip-path: inset(0 0 0 0);
}

/* Leaving: Wächst leicht und verschwindet in Unschärfe */
.quote-slide.is-leaving {
    opacity: 0;
    transform: scale(1.12) translate3d(0, 0, 0);
    filter: blur(12px);
    clip-path: inset(0 0 0 0);
    transition-duration: 1.2s;
    transition-delay: 0s;
}

/* Leaving: Letter-Spacing expandiert beim Ausblenden */
.quote-slide.is-leaving .quote-text {
    letter-spacing: 0.40em;
}

/* Autor: Letter-Spacing Spread + Stagger */
.quote-slide .quote-author {
    opacity: 0;
    transform: scale(1.1) translateY(0.2rem);
    letter-spacing: 0.3em;
    transition:
        opacity 1.0s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1.4s cubic-bezier(0.22, 1, 0.36, 1),
        letter-spacing 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.quote-slide.is-active .quote-author {
    opacity: 1;
    transform: scale(1) translateY(0);
    letter-spacing: 0.4em;
    transition-delay: 0.5s;
}

/* Exakte Store-Farben für den Autor */
.paracelsus-quote .quote-slide .quote-author {
    color: var(--gold);
}

/* Goldlinie-Puls der Section-Ränder */
.paracelsus-quote::before,
.paracelsus-quote::after {
    transition: opacity 1.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.paracelsus-quote.is-transitioning::before,
.paracelsus-quote.is-transitioning::after {
    opacity: 0.5;
}