/* =========================================================
   AUT0LOTTO – ANIMATIONEN UND INTERAKTIONEN
========================================================= */

/* Scroll Reveal */

.reveal-element {
    opacity: 0;

    transform:
        translateY(30px)
        scale(0.985);

    transition:
        opacity 720ms ease var(--reveal-delay, 0ms),
        transform 720ms cubic-bezier(
            0.22,
            1,
            0.36,
            1
        ) var(--reveal-delay, 0ms);

    will-change:
        opacity,
        transform;
}

.reveal-element.is-visible {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}

/* Hero Animation */

.hero-copy.reveal-element {
    transform: translateX(-28px);
}

.hero-copy.reveal-element.is-visible {
    transform: translateX(0);
}

.hero-visual.reveal-element {
    transform:
        translateX(38px)
        scale(0.97);
}

.hero-visual.reveal-element.is-visible {
    transform:
        translateX(0)
        scale(1);
}

/* Kartenbewegung */

.hero-information-card,
.how-step,
.winner-card,
.faq-home-item {
    backface-visibility: hidden;
}

/* Buttons */

.al-button,
.header-ticket-button,
.newsletter-submit {
    position: relative;

    overflow: hidden;
}

.al-button::before,
.header-ticket-button::before,
.newsletter-submit::before {
    content: "";

    position: absolute;
    top: -70%;
    bottom: -70%;
    left: -65%;

    width: 38%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.2),
            transparent
        );

    transform: rotate(20deg);

    transition:
        left 650ms ease;
}

.al-button:hover::before,
.header-ticket-button:hover::before,
.newsletter-submit:hover::before {
    left: 130%;
}

/* Logo */

.brand-symbol,
.footer-brand-symbol {
    transition:
        transform 450ms ease,
        filter 450ms ease;
}

.brand:hover .brand-symbol,
.footer-brand:hover .footer-brand-symbol {
    transform:
        rotate(18deg)
        scale(1.08);

    filter:
        drop-shadow(
            0 0 13px rgba(255, 200, 61, 0.42)
        );
}

/* Fahrzeugbild */

.hero-car-frame {
    animation:
        heroCarEntrance 900ms
        cubic-bezier(0.22, 1, 0.36, 1)
        both;
}

@keyframes heroCarEntrance {
    from {
        opacity: 0;

        transform:
            translateX(55px)
            scale(0.94);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }
}

/* Hintergrund-Orbs */

.hero-background-orb-one {
    animation:
        backgroundOrbMoveOne
        12s ease-in-out infinite;
}

.hero-background-orb-two {
    animation:
        backgroundOrbMoveTwo
        15s ease-in-out infinite;
}

@keyframes backgroundOrbMoveOne {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(-25px, 18px, 0)
            scale(1.06);
    }
}

@keyframes backgroundOrbMoveTwo {
    0%,
    100% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    50% {
        transform:
            translate3d(35px, -15px, 0)
            scale(0.94);
    }
}

/* FAQ */

.faq-home-item.is-open {
    animation:
        faqOpenGlow
        480ms ease;
}

@keyframes faqOpenGlow {
    0% {
        box-shadow:
            0 14px 34px rgba(0, 0, 0, 0.18);
    }

    50% {
        box-shadow:
            0 20px 48px rgba(0, 0, 0, 0.24),
            0 0 38px rgba(47, 109, 246, 0.1);
    }

    100% {
        box-shadow:
            0 20px 45px rgba(0, 0, 0, 0.24),
            0 0 30px rgba(47, 109, 246, 0.055);
    }
}

/* Live Badge */

.current-gallery-live-badge {
    isolation: isolate;
}

.current-gallery-live-badge::before {
    content: "";

    position: absolute;
    inset: -1px;
    z-index: -1;

    border-radius: inherit;

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255, 255, 255, 0.13),
            transparent 80%
        );

    background-size: 220% 100%;

    animation:
        liveBadgeShine
        3.5s linear infinite;
}

@keyframes liveBadgeShine {
    from {
        background-position: 220% 0;
    }

    to {
        background-position: -220% 0;
    }
}

/* Scrollbar */

html {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(74, 128, 255, 0.65)
        rgba(4, 13, 24, 0.8);
}

::-webkit-scrollbar {
    width: 11px;
}

::-webkit-scrollbar-track {
    background: #040d18;
}

::-webkit-scrollbar-thumb {
    border: 3px solid #040d18;
    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            #4c82ff,
            #285bd0
        );
}

::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            #6594ff,
            #3471ed
        );
}

/* Eingeschränkte Bewegung */

@media (prefers-reduced-motion: reduce) {
    .reveal-element {
        opacity: 1 !important;

        transform: none !important;

        transition: none !important;
    }

    .hero-car-frame,
    .hero-background-orb-one,
    .hero-background-orb-two,
    .lottery-ball,
    .current-gallery-live-badge::before {
        animation: none !important;
    }

    .al-button::before,
    .header-ticket-button::before,
    .newsletter-submit::before {
        display: none;
    }
}