/* Site-wide motion — GPU-friendly (opacity + transform only) */

:root {
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --motion-ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
    --motion-fast: 220ms;
    --motion-med: 480ms;
    --motion-slow: 820ms;
    --motion-reveal: 900ms;
    --motion-lift: -5px;
}

/* Hero entrance */
.hero-text h1,
.hero .hero-title,
.hero-content > h1 {
    animation: anim-hero-in var(--motion-slow) var(--motion-ease-soft) both;
}

.hero-text p,
.hero-text .hero-lead,
.hero .hero-subtitle,
.hero-content > p {
    animation: anim-hero-in var(--motion-slow) var(--motion-ease-soft) 0.12s both;
}

.hero-actions {
    animation: anim-hero-in var(--motion-slow) var(--motion-ease-soft) 0.22s both;
}

.hero-text h1::after,
.hero-content > h1::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

@keyframes anim-hero-in {
    from {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes anim-line-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes anim-fade-up {
    from {
        opacity: 0;
        transform: translate3d(0, 28px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

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

/* Scroll reveals — shared + auto-applied */
.reveal-fade,
.team-reveal,
.reviews-reveal,
.gs-reveal,
.news-reveal,
.services-reveal,
.memberships-reveal,
.media-reveal,
.laser-panel-reveal,
.schwerpunkte-reveal,
.why-op-reveal,
.welcome-reveal,
.anim-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition:
        opacity var(--motion-reveal) var(--motion-ease-soft),
        transform var(--motion-reveal) var(--motion-ease-soft);
    transition-delay: var(--reveal-delay, var(--review-delay, var(--service-delay, 0ms)));
}

.reveal-fade.is-visible,
.team-reveal.is-visible,
.reviews-reveal.is-visible,
.gs-reveal.is-visible,
.news-reveal.is-visible,
.services-reveal.is-visible,
.memberships-reveal.is-visible,
.media-reveal.is-visible,
.laser-panel-reveal.is-visible,
.schwerpunkte-reveal.is-visible,
.why-op-reveal.is-visible,
.welcome-reveal.is-visible,
.anim-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.anim-reveal--left {
    transform: translate3d(-28px, 0, 0);
}

.anim-reveal--right {
    transform: translate3d(28px, 0, 0);
}

.anim-reveal--left.is-visible,
.anim-reveal--right.is-visible {
    transform: translate3d(0, 0, 0);
}

.anim-reveal--scale {
    transform: translate3d(0, 16px, 0) scale(0.975);
}

.anim-reveal--scale.is-visible {
    transform: translate3d(0, 0, 0) scale(1);
}

/* Interactive hover / press — cards & CTAs */
.anim-interactive,
.service-card,
.review-card,
.news-card,
.doctor-card,
.team-member-card,
.membership-logo-item,
.overview-card,
.overview-item,
.laser-panel,
.diag-chapter-visual,
.gs-chapter-visual,
.contact-col,
.katarakt-faq details,
.request-card {
    transition:
        transform var(--motion-med) var(--motion-ease),
        box-shadow var(--motion-med) var(--motion-ease),
        border-color var(--motion-fast) ease,
        background-color var(--motion-fast) ease,
        color var(--motion-fast) ease,
        opacity var(--motion-reveal) var(--motion-ease-soft);
}

@media (hover: hover) and (pointer: fine) {
    .anim-interactive:hover,
    .service-card:hover,
    .review-card:hover,
    .news-card:hover,
    .doctor-card:hover,
    .team-member-card:hover,
    .overview-card:hover,
    .overview-item:hover,
    .laser-panel:hover,
    .contact-col:hover,
    .request-card:hover {
        transform: translate3d(0, var(--motion-lift), 0);
    }

    .service-card:hover,
    .review-card:hover,
    .news-card:hover,
    .doctor-card:hover,
    .team-member-card:hover,
    .overview-card:hover,
    .request-card:hover {
        box-shadow: 0 16px 36px rgba(10, 31, 53, 0.12);
    }

    .membership-logo-item:hover {
        transform: translate3d(0, -3px, 0) scale(1.02);
    }

    /* Image zoom inside overflow-hidden parents */
    .doctor-photo img,
    .team-member-photo img,
    .news-card img,
    .service-card img,
    .diag-chapter-visual img,
    .gs-chapter-visual img,
    .practice-story-media img,
    .welcome-image img,
    .op-hero-section img,
    .laser-panel img {
        transition: transform 0.75s var(--motion-ease);
        transform: translateZ(0) scale(1);
    }

    .doctor-photo:hover img,
    .team-member-photo:hover img,
    .news-card:hover img,
    .service-card:hover img,
    .diag-chapter-visual:hover img,
    .gs-chapter-visual:hover img,
    .practice-story-media:hover img,
    .welcome-image:hover img,
    .op-hero-section:hover img,
    .laser-panel:hover img {
        transform: translateZ(0) scale(1.045);
    }
}

/* Buttons & CTAs */
.cta-button,
.hero-cta,
.header-appointment,
.reviews-cta-link,
.contact-appointment-btn,
.cookie-btn,
.anim-btn {
    transition:
        transform var(--motion-fast) var(--motion-ease),
        background-color var(--motion-fast) ease,
        color var(--motion-fast) ease,
        box-shadow var(--motion-med) var(--motion-ease),
        border-color var(--motion-fast) ease,
        gap var(--motion-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
    .cta-button:hover,
    .hero-cta:hover,
    .header-appointment:hover,
    .reviews-cta-link:hover,
    .contact-appointment-btn:hover,
    .anim-btn:hover {
        transform: translate3d(0, -2px, 0);
        box-shadow: 0 10px 24px rgba(10, 31, 53, 0.18);
    }
}

.cta-button:active,
.hero-cta:active,
.header-appointment:active,
.reviews-cta-link:active,
.contact-appointment-btn:active,
.cookie-btn:active,
.anim-btn:active,
.cta-button.is-pressing,
.hero-cta.is-pressing,
.header-appointment.is-pressing,
.reviews-cta-link.is-pressing,
.anim-btn.is-pressing {
    transform: translate3d(0, 1px, 0) scale(0.985);
}

/* Header entrance */
.header {
    animation: anim-header-in 0.55s var(--motion-ease-soft) both;
}

@keyframes anim-header-in {
    from {
        opacity: 0;
        transform: translate3d(0, -12px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Nav polish */
.nav-link {
    transition: color 0.28s ease, opacity 0.28s ease;
}

.dropdown-item {
    transition:
        background-color 0.28s ease,
        color 0.28s ease,
        transform 0.28s var(--motion-ease),
        padding-left 0.28s var(--motion-ease);
}

@media (hover: hover) and (pointer: fine) {
    .dropdown-item:hover {
        transform: translate3d(4px, 0, 0);
    }
}

/* FAQ accordion feel */
.katarakt-faq details,
details.faq-item {
    transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-med) ease;
}

.katarakt-faq details[open],
details.faq-item[open] {
    transform: translate3d(0, -1px, 0);
}

.katarakt-faq summary,
details.faq-item summary {
    transition: color 0.25s ease;
}

.katarakt-faq summary::after,
details.faq-item summary::after {
    transition: transform 0.3s var(--motion-ease), background 0.25s ease, color 0.25s ease;
}

/* Section titles underline accent on reveal */
.section-title.anim-reveal.is-visible,
.anim-reveal .section-title {
    position: relative;
}

/* Soft link underline */
.footer a,
.cookie-content a,
.reviews-lead a {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size 0.35s var(--motion-ease), color 0.25s ease;
}

@media (hover: hover) and (pointer: fine) {
    .footer a:hover,
    .cookie-content a:hover,
    .reviews-lead a:hover {
        background-size: 100% 1px;
    }
}

/* Contact map subtle pulse on ready */
.contact .map-container {
    transition: transform var(--motion-med) var(--motion-ease), box-shadow var(--motion-med) ease;
}

@media (hover: hover) and (pointer: fine) {
    .contact .map-container:hover {
        transform: translate3d(0, -3px, 0);
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.22);
    }
}

/* Stagger helpers for children */
.anim-stagger > .anim-reveal:nth-child(1) { --reveal-delay: 0ms; }
.anim-stagger > .anim-reveal:nth-child(2) { --reveal-delay: 70ms; }
.anim-stagger > .anim-reveal:nth-child(3) { --reveal-delay: 140ms; }
.anim-stagger > .anim-reveal:nth-child(4) { --reveal-delay: 210ms; }
.anim-stagger > .anim-reveal:nth-child(5) { --reveal-delay: 280ms; }
.anim-stagger > .anim-reveal:nth-child(6) { --reveal-delay: 350ms; }
.anim-stagger > .anim-reveal:nth-child(7) { --reveal-delay: 420ms; }
.anim-stagger > .anim-reveal:nth-child(8) { --reveal-delay: 490ms; }

/* Keep revealed interactive cards liftable after animation */
.service-card.services-reveal.is-visible:hover,
.review-card.reviews-reveal.is-visible:hover,
.news-card.news-reveal.is-visible:hover,
.doctor-card.team-reveal.is-visible:hover,
.team-member-card.team-reveal.is-visible:hover,
.anim-reveal.is-visible.anim-interactive:hover {
    transform: translate3d(0, var(--motion-lift), 0);
}

/* Reduce motion / accessibility */
@media (prefers-reduced-motion: reduce) {
    .hero-text h1,
    .hero .hero-title,
    .hero-content > h1,
    .hero-text p,
    .hero-text .hero-lead,
    .hero .hero-subtitle,
    .hero-content > p,
    .hero-actions,
    .hero-text h1::after,
    .hero-content > h1::after,
    .header {
        animation: none !important;
    }

    .reveal-fade,
    .team-reveal,
    .reviews-reveal,
    .gs-reveal,
    .news-reveal,
    .services-reveal,
    .memberships-reveal,
    .media-reveal,
    .laser-panel-reveal,
    .schwerpunkte-reveal,
    .why-op-reveal,
    .welcome-reveal,
    .anim-reveal,
    .anim-reveal--left,
    .anim-reveal--right,
    .anim-reveal--scale {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }

    .anim-interactive:hover,
    .service-card:hover,
    .review-card:hover,
    .news-card:hover,
    .doctor-card:hover,
    .team-member-card:hover,
    .overview-card:hover,
    .overview-item:hover,
    .laser-panel:hover,
    .contact-col:hover,
    .request-card:hover,
    .membership-logo-item:hover,
    .cta-button:hover,
    .hero-cta:hover,
    .header-appointment:hover,
    .reviews-cta-link:hover,
    .contact-appointment-btn:hover,
    .anim-btn:hover,
    .doctor-photo:hover img,
    .team-member-photo:hover img,
    .news-card:hover img,
    .service-card:hover img,
    .diag-chapter-visual:hover img,
    .gs-chapter-visual:hover img,
    .practice-story-media:hover img,
    .welcome-image:hover img,
    .op-hero-section:hover img,
    .laser-panel:hover img,
    .contact .map-container:hover {
        transform: none !important;
        box-shadow: inherit;
    }
}