@keyframes heroFogDriftA {
    0% { transform: translate3d(-3%, 0, 0); }
    50% { transform: translate3d(3%, 1.5%, 0); }
    100% { transform: translate3d(-3%, 0, 0); }
}

@keyframes heroFogDriftB {
    0% { transform: translate3d(2%, 0, 0); }
    50% { transform: translate3d(-3%, -1.2%, 0); }
    100% { transform: translate3d(2%, 0, 0); }
}

@keyframes heroLanternFlicker {
    0%, 100% { opacity: 0.84; filter: brightness(0.95); }
    17% { opacity: 0.92; filter: brightness(1.05); }
    29% { opacity: 0.78; filter: brightness(0.84); }
    63% { opacity: 0.9; filter: brightness(1.08); }
}

@keyframes heroGhostFloat {
    0% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
    100% { transform: translateY(0); }
}

@keyframes heroCardReveal {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroTitleRise {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroSkeleton {
    to { translate: 100% 0; }
}

@keyframes heroVinylSpin {
    to { transform: rotate(360deg); }
}

@keyframes heroPulsePurple {
    0%, 100% { box-shadow: 0 0 0 0 rgba(174, 111, 216, 0.12); }
    50% { box-shadow: 0 0 20px 4px rgba(174, 111, 216, 0.28); }
}

.hb-page-hero.is-in-view .hb-page-hero__title {
    animation: heroTitleRise 0.35s ease;
}

.hb-page-hero.is-in-view .hb-page-hero__cards > * {
    animation: heroCardReveal 0.32s ease both;
}

.hb-page-hero.is-in-view .hb-page-hero__cards > *:nth-child(2) {
    animation-delay: 80ms;
}

.hb-page-hero.is-in-view .hb-page-hero__cards > *:nth-child(3) {
    animation-delay: 160ms;
}

.hb-scene-fog--a {
    animation: heroFogDriftA 30s ease-in-out infinite;
}

.hb-scene-fog--b,
.hb-scene-fog--c {
    animation: heroFogDriftB 36s ease-in-out infinite;
}

.hb-scene-lantern i {
    animation: heroLanternFlicker 4.4s steps(5, end) infinite;
}

.hb-page-hero__visual .scene-ghost {
    animation: heroGhostFloat 4.6s ease-in-out infinite;
}

.hb-page-hero__visual .scene-crystal {
    animation: heroPulsePurple 5s ease-in-out infinite;
}

.hb-page-hero--music[data-phase="eventlive"] .scene-gramophone .vinyl,
.hb-page-hero--music.is-playing .scene-gramophone .vinyl {
    animation: heroVinylSpin 5.2s linear infinite;
}

.hb-page-hero:not(.is-in-view) [data-ambient-motion],
.hb-page-hero:not(.is-in-view) .scene-ghost,
.hb-page-hero:not(.is-in-view) .scene-crystal,
.hb-page-hero:not(.is-in-view) .scene-gramophone .vinyl {
    animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
    .hb-page-hero [data-ambient-motion],
    .hb-page-hero .scene-ghost,
    .hb-page-hero .scene-crystal,
    .hb-page-hero .scene-gramophone .vinyl,
    .hb-page-hero .hb-page-hero__title,
    .hb-page-hero .hb-page-hero__cards > * {
        animation: none !important;
        transition: none !important;
    }
}

.reduced-motion .hb-page-hero [data-ambient-motion],
.reduced-motion .hb-page-hero .scene-ghost,
.reduced-motion .hb-page-hero .scene-crystal,
.reduced-motion .hb-page-hero .scene-gramophone .vinyl,
.reduced-motion .hb-page-hero .hb-page-hero__title,
.reduced-motion .hb-page-hero .hb-page-hero__cards > * {
    animation: none !important;
    transition: none !important;
}