/* ==========================================================================
   Bewegung – dezent und elegant.
   - Ohne JS (Klasse .js fehlt) ist alles sofort sichtbar.
   - Einblenden: ease-out bzw. ease-in-out für Vorhang-Reveals; Ausblenden immer schneller.
   - prefers-reduced-motion: keine Bewegung, aber weiche Überblendungen bleiben.
   ========================================================================== */

/* ---- Scroll-Reveal ---- */
.js [data-reveal] {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
    transition-delay: var(--delay, 0ms);
}

.js [data-reveal].is-visible {
    opacity: 1;
    transform: none;
}

/* ---- Hero (Startseite) und Seitenköpfe ----
   Text im ersten Bildschirm hat kein data-reveal und ist sofort da.
   Startseite: Die Kacheln erscheinen nur beim ersten Aufruf einer Sitzung
   nacheinander (.first-visit, wie die Logo-Animation), sonst kurzes Überblenden.
   Unterseiten: Das Kopfbild öffnet sich von unten nach oben. */
.js .page-hero__media[data-reveal] {
    transform: none;
    /* negative Ränder, damit der Schatten nach dem Reveal nicht abgeschnitten wird */
    clip-path: inset(100% -48px -72px -48px);
    transition: clip-path 1000ms var(--ease-in-out) 100ms, opacity var(--dur-slow) var(--ease-out);
}

.js .page-hero__media[data-reveal] img {
    transform: scale(1.08);
    transition: transform 1400ms var(--ease-out) 100ms;
}

.js .page-hero__media.is-visible {
    clip-path: inset(-48px -48px -72px -48px);
}

.js .page-hero__media.is-visible img {
    transform: none;
}

/* Hero-Signet: beim ersten Aufruf einer Sitzung sanft von unten, danach
   nur kurzes Überblenden. */
.js .hero-emblem[data-reveal] {
    transform: none;
    transition: opacity 200ms ease;
}

.first-visit .hero-emblem[data-reveal] {
    transform: translateY(14px);
    transition: opacity 600ms var(--ease-out) 150ms, transform 800ms var(--ease-out) 150ms;
}

.first-visit .hero-emblem[data-reveal].is-visible {
    transform: none;
}

/* Lief beim Seitenwechsel schon eine View-Transition (Klasse .vt aus dem
   Inline-Skript in header.php), wird der Seitenkopf nicht noch einmal
   eingeblendet. */
.vt .page-hero [data-reveal],
.vt .page-hero [data-reveal] img {
    opacity: 1;
    clip-path: none;
    transform: none;
    transition: none;
}

/* ---- Goldene Schwunglinie: zeichnet sich nach, sobald der Abschnitt erscheint ---- */
.js [data-reveal] .flourish path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 900ms var(--ease-in-out) calc(var(--delay, 0ms) + 250ms);
}

.js [data-reveal] .flourish path + path {
    transition-delay: calc(var(--delay, 0ms) + 750ms);
    transition-duration: 600ms;
}

.js [data-reveal].is-visible .flourish path {
    stroke-dashoffset: 0;
}

/* ---- Logo: Silhouette erscheint von unten – nur beim ersten Aufruf der Sitzung ---- */
.first-visit .site-header .brand__mark {
    animation: logo-in 900ms var(--ease-out) 150ms both;
}

.first-visit .site-header .brand__text {
    animation: fade-in 600ms ease 450ms both;
}

@keyframes logo-in {
    from {
        clip-path: inset(100% 0 0 0);
        opacity: 0;
        transform: translateY(4px);
    }
    40% {
        opacity: 1;
    }
    to {
        clip-path: inset(0 0 0 0);
        transform: none;
    }
}

@keyframes fade-in {
    from { opacity: 0; }
}

/* ---- Seitenwechsel (Browser mit View-Transitions; andere ignorieren das) ---- */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root) {
        animation: 140ms ease both vt-out;
    }

    ::view-transition-new(root) {
        animation: 220ms var(--ease-out) both vt-in;
    }

    /* Der Kopfbereich bleibt einfach stehen */
    ::view-transition-group(site-header) {
        animation: none;
    }
}

@keyframes vt-out {
    to { opacity: 0; }
}

@keyframes vt-in {
    from { opacity: 0; transform: translateY(6px); }
}

/* ---- Reduzierte Bewegung ---- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    /* Einblenden bleibt erhalten, Bewegung entfällt */
    .js [data-reveal],
    .first-visit .hero-emblem[data-reveal] {
        transform: none;
        transition: opacity 400ms ease;
    }

    .js .page-hero__media[data-reveal] {
        clip-path: none;
        transition: opacity 400ms ease;
    }

    .js .page-hero__media[data-reveal] img {
        transform: none;
        transition: none;
    }

    .js [data-reveal] .flourish path {
        stroke-dashoffset: 0;
        transition: none;
    }

    .first-visit .site-header .brand__mark {
        animation: fade-in 400ms ease both;
    }

    .main-nav__list li {
        transform: none !important;
    }

    .lightbox[open] .lightbox__figure {
        animation-name: lb-fade;
    }

    .lightbox.is-switching .lightbox__img,
    .lightbox.is-switching .lightbox__caption {
        filter: none;
    }

    /* Hover-Bewegungen (Anheben, Zoomen, Pfeile) entfallen; Farbe und Schatten bleiben */
    .course-card__link,
    .course-card__dancer,
    .contact-card,
    .gallery__item img,
    .course-jump a,
    .slot a,
    .link-arrow .icon,
    .btn--ghost .icon,
    .brand__mark,
    .site-header__call {
        transform: none !important;
    }

    /* Header schrumpft ohne Größen-Animation, die Unterzeile blendet nur aus */
    .site-header__inner,
    .brand__mark,
    .brand__tagline {
        transition-property: opacity;
    }
}