/* smileDentity — Animations & Interaktionen */

/* ---------- Header: scrolled-State ---------- */
header[data-scrolled="true"] {
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
}
header[data-scrolled="true"] > div.relative {
    background-color: rgba(255, 255, 255, 0.85);
}
header[data-scrolled="true"] > div[aria-hidden="true"] {
    opacity: 0;
}

/* Beim Scrollen wird der Header solide-hell (wie die Static): weißer Bg + dunkler
   Text + dunkles Logo. Der dunkle Home-Header (data-theme=dark) bekommt exakt die
   Static-Scrolled-Light-Farben: Nav = --color-mute (#6E6E6E), Telefon = --color-ink-2,
   Burger = --color-ink. (Auf hellen Unterseiten sind diese Farben ohnehin schon aktiv.) */
header[data-scrolled="true"] nav[aria-label="Hauptnavigation"] a {
    color: var(--color-mute);
}
header[data-scrolled="true"] nav[aria-label="Hauptnavigation"] a:hover {
    color: var(--color-ink);
}
header[data-scrolled="true"] a[href^="tel"] {
    color: var(--color-ink-2);
}
header[data-scrolled="true"] a[href^="tel"]:hover {
    color: var(--color-ink);
}
header[data-scrolled="true"] [data-sd-menu-toggle] {
    color: var(--color-ink);
    border-color: var(--color-line-2);
}
header[data-scrolled="true"] .text-white\/85 {
    color: var(--color-ink);
}
header[data-scrolled="true"] img[alt="smileDentity"] {
    filter: brightness(0);
}
/* Top-Info-Leiste beim Scrollen einklappen (wie die Static) — Header wird kompakter */
header[data-scrolled="true"] > div.relative > div:first-child {
    max-height: 0;
    opacity: 0;
}

/* ---------- Mobile Nav Overlay ---------- */
[data-sd-mobile-nav] {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgba(15, 15, 15, 0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    color: #fff;
    transform: translateY(-100%);
    transition: transform 400ms cubic-bezier(0.23, 1, 0.32, 1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    font-family: 'Fraunces', Georgia, serif;
    font-size: 2rem;
}
[data-sd-mobile-nav][data-open="true"] {
    transform: translateY(0);
}
[data-sd-mobile-nav] a {
    color: rgba(255, 255, 255, 0.85);
    transition: color 200ms;
}
[data-sd-mobile-nav] a:hover {
    color: #fff;
}

/* Burger-Button: kein Effekt im desktop */
[data-sd-menu-toggle] {
    cursor: pointer;
}

/* ---------- Scroll-Reveal (nur wenn JS .sd-anim-ready Class auf html setzt) ---------- */
.sd-anim-ready [data-sd-reveal]:not([data-sd-revealed="true"]) {
    opacity: 0;
    transform: translateY(24px);
}
[data-sd-reveal] {
    transition: opacity 700ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 700ms cubic-bezier(0.23, 1, 0.32, 1);
    will-change: opacity, transform;
}
[data-sd-reveal][data-sd-revealed="true"] {
    opacity: 1;
    transform: translateY(0);
}

.sd-anim-ready [data-sd-reveal-stagger]:not([data-sd-revealed="true"]) > * {
    opacity: 0;
    transform: translateY(20px);
}
[data-sd-reveal-stagger] > * {
    transition: opacity 600ms cubic-bezier(0.23, 1, 0.32, 1),
                transform 600ms cubic-bezier(0.23, 1, 0.32, 1);
}
[data-sd-reveal-stagger][data-sd-revealed="true"] > * {
    opacity: 1;
    transform: translateY(0);
}
[data-sd-reveal-stagger][data-sd-revealed="true"] > *:nth-child(1) { transition-delay: 0ms; }
[data-sd-reveal-stagger][data-sd-revealed="true"] > *:nth-child(2) { transition-delay: 80ms; }
[data-sd-reveal-stagger][data-sd-revealed="true"] > *:nth-child(3) { transition-delay: 160ms; }
[data-sd-reveal-stagger][data-sd-revealed="true"] > *:nth-child(4) { transition-delay: 240ms; }
[data-sd-reveal-stagger][data-sd-revealed="true"] > *:nth-child(5) { transition-delay: 320ms; }
[data-sd-reveal-stagger][data-sd-revealed="true"] > *:nth-child(6) { transition-delay: 400ms; }

/* Reduce-Motion respektieren */
@media (prefers-reduced-motion: reduce) {
    [data-sd-reveal],
    [data-sd-reveal-stagger] > * {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    [data-sd-mobile-nav] {
        transition: none !important;
    }
}