.hero::before,
.hero::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 0;
}

.hero::before {
    top: -40px;
    left: -60px;
    width: 360px;
    height: 260px;
    background:
        radial-gradient(circle, rgba(65, 105, 225, 0.52), transparent 62%);
    filter: blur(34px);
    animation: atmosphericShift 16s ease-in-out infinite alternate;
}

.hero::after {
    top: 30px;
    right: 10px;
    width: 280px;
    height: 220px;
    background:
        radial-gradient(circle, rgba(152, 182, 255, 0.3), transparent 66%);
    filter: blur(38px);
    animation: atmosphericShift 18s ease-in-out infinite alternate-reverse;
}

.featured-release,
.playlist-section,
.support-section {
    animation: riseIn 0.75s ease both;
}

.featured-release {
    animation-delay: 0.06s;
}

.playlist-section {
    animation-delay: 0.12s;
}

.support-section {
    animation-delay: 0.18s;
}

.animated-button {
    position: relative;
}

.animated-button::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    border: 1px solid rgba(156, 184, 255, 0);
    background: radial-gradient(circle at center, rgba(156, 184, 255, 0.28), transparent 72%);
    opacity: 0;
    transition: opacity 0.25s ease, border-color 0.25s ease;
}

.animated-button:hover::after {
    opacity: 1;
    border-color: rgba(156, 184, 255, 0.54);
}

.hero .hero-title {
    animation: heroTitleEntrance 2.25s cubic-bezier(0.16, 1, 0.3, 1) 0.22s both;
}

.hero .text-logo {
    animation: heroLogoSettle 2.08s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

.scroll-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--reveal-index, 0) * 0.055s);
    will-change: opacity, transform;
}

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

.lightning-effect {
    display: none;
}

@keyframes riseIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroTitleEntrance {
    from {
        opacity: 0;
        transform: translate3d(-56px, 0, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes heroLogoSettle {
    from {
        opacity: 0;
        transform: scale(1.18) translate3d(0, 8px, 0);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes heroMotesReveal {
    from {
        opacity: 0;
        transform: translate3d(-10px, 16px, 0) scale(1.08);
    }

    to {
        opacity: 0.9;
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes heroMotesDrift {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(14px, -12px, 0);
    }
}

@keyframes ctaFireflyOrbit {
    from {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(0.96);
    }

    50% {
        transform: translate3d(0, -2px, 0) rotate(10deg) scale(1.02);
    }

    to {
        transform: translate3d(0, 0, 0) rotate(360deg) scale(0.96);
    }
}

@keyframes ctaFireflyOrbitReverse {
    from {
        transform: translate3d(0, 0, 0) rotate(0deg) scale(0.94);
    }

    50% {
        transform: translate3d(0, 2px, 0) rotate(-12deg) scale(1);
    }

    to {
        transform: translate3d(0, 0, 0) rotate(-360deg) scale(0.94);
    }
}

@keyframes atmosphericShift {
    from {
        transform: translate3d(0, 0, 0) scale(1);
    }

    to {
        transform: translate3d(0, -12px, 0) scale(1.04);
    }
}

@keyframes proofPanelSweep {
    0%,
    38% {
        opacity: 0;
        transform: translateX(0) skewX(-14deg);
    }

    46% {
        opacity: 1;
    }

    64% {
        opacity: 0;
        transform: translateX(430%) skewX(-14deg);
    }

    100% {
        opacity: 0;
        transform: translateX(430%) skewX(-14deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}