/* =========================================================
   RION ZION WEBSITE ANIMATIONS
   File: css/animations.css
========================================================= */


/* =========================================================
   ANIMATED AURORA BACKGROUND
========================================================= */

body::before,
body::after {
    content: "";
    position: fixed;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    filter: blur(130px);
    opacity: 0.28;
    pointer-events: none;
    z-index: -2;
}

body::before {
    top: -180px;
    left: -180px;
    background: var(--primary);
    animation: auroraMoveOne 14s ease-in-out infinite alternate;
}

body::after {
    right: -180px;
    bottom: -180px;
    background: var(--accent);
    animation: auroraMoveTwo 18s ease-in-out infinite alternate;
}

@keyframes auroraMoveOne {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(180px, 150px) scale(1.2);
    }

    100% {
        transform: translate(40px, 300px) scale(0.95);
    }
}

@keyframes auroraMoveTwo {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(-170px, -120px) scale(1.15);
    }

    100% {
        transform: translate(-60px, -280px) scale(0.9);
    }
}


/* =========================================================
   HERO BACKGROUND GRID
========================================================= */

#hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

#hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.025) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 90%
        );

    z-index: -1;
}


/* =========================================================
   HERO CONTENT ENTRANCE
========================================================= */

.hero-content {
    animation: heroFadeUp 1.1s ease forwards;
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(45px);
    }

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


/* =========================================================
   GLOWING HERO TITLE
========================================================= */

.hero-content h1 {
    position: relative;

    background:
        linear-gradient(
            90deg,
            #ffffff,
            var(--primary-light),
            var(--accent),
            #ffffff
        );

    background-size: 250% auto;

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;

    animation:
        titleGradient 6s linear infinite,
        titleGlow 3s ease-in-out infinite alternate;
}

@keyframes titleGradient {
    from {
        background-position: 0% center;
    }

    to {
        background-position: 250% center;
    }
}

@keyframes titleGlow {
    from {
        filter:
            drop-shadow(
                0 0 8px rgba(108, 77, 255, 0.25)
            );
    }

    to {
        filter:
            drop-shadow(
                0 0 22px rgba(179, 109, 255, 0.6)
            );
    }
}


/* =========================================================
   FLOATING ALBUM ARTWORK
========================================================= */

.floating-album {
    position: relative;

    animation:
        albumFloat 5s ease-in-out infinite;

    transform-style: preserve-3d;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.floating-album img {
    width: min(420px, 90vw);

    border-radius: 24px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    box-shadow:
        0 35px 80px rgba(0, 0, 0, 0.55),
        0 0 45px rgba(108, 77, 255, 0.25);
}

.floating-album::before {
    content: "";

    position: absolute;

    inset: 10%;

    background:
        var(--primary);

    filter: blur(70px);

    opacity: 0.28;

    z-index: -1;
}

@keyframes albumFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}


/* =========================================================
   ALBUM SHINE
========================================================= */

.album-shine {
    position: absolute;

    inset: 0;

    overflow: hidden;

    border-radius: 24px;

    pointer-events: none;
}

.album-shine::after {
    content: "";

    position: absolute;

    top: -40%;

    left: -70%;

    width: 45%;

    height: 180%;

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

    transform: rotate(25deg);

    animation:
        albumShine 6s ease-in-out infinite;
}

@keyframes albumShine {
    0%,
    25% {
        left: -70%;
    }

    60%,
    100% {
        left: 130%;
    }
}


/* =========================================================
   MUSIC EQUALIZER
========================================================= */

.equalizer {
    display: flex;

    justify-content: center;

    align-items: flex-end;

    gap: 6px;

    height: 42px;

    margin: 28px auto;
}

.equalizer span {
    width: 6px;

    min-height: 8px;

    border-radius: 10px;

    background:
        linear-gradient(
            to top,
            var(--primary),
            var(--accent)
        );

    box-shadow:
        0 0 14px rgba(108, 77, 255, 0.45);

    animation:
        equalizerBounce 1.1s ease-in-out infinite alternate;
}

.equalizer span:nth-child(1) {
    animation-delay: 0s;
}

.equalizer span:nth-child(2) {
    animation-delay: 0.15s;
}

.equalizer span:nth-child(3) {
    animation-delay: 0.3s;
}

.equalizer span:nth-child(4) {
    animation-delay: 0.45s;
}

.equalizer span:nth-child(5) {
    animation-delay: 0.6s;
}

.equalizer span:nth-child(6) {
    animation-delay: 0.25s;
}

.equalizer span:nth-child(7) {
    animation-delay: 0.4s;
}

@keyframes equalizerBounce {
    from {
        height: 10px;
        opacity: 0.65;
    }

    to {
        height: 42px;
        opacity: 1;
    }
}


/* =========================================================
   FLOATING PARTICLES
========================================================= */

.particle-container {
    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: -1;
}

.particle {
    position: absolute;

    bottom: -50px;

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.7);

    box-shadow:
        0 0 14px var(--primary-light);

    animation:
        particleRise linear infinite;
}

@keyframes particleRise {
    from {
        transform:
            translateY(0)
            translateX(0);

        opacity: 0;
    }

    10% {
        opacity: 0.8;
    }

    85% {
        opacity: 0.55;
    }

    to {
        transform:
            translateY(-110vh)
            translateX(80px);

        opacity: 0;
    }
}


/* =========================================================
   SCROLL REVEAL
========================================================= */

.reveal {
    opacity: 0;

    transform:
        translateY(45px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal.active {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   FADE FROM LEFT
========================================================= */

.reveal-left {
    opacity: 0;

    transform:
        translateX(-55px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal-left.active {
    opacity: 1;

    transform:
        translateX(0);
}


/* =========================================================
   FADE FROM RIGHT
========================================================= */

.reveal-right {
    opacity: 0;

    transform:
        translateX(55px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal-right.active {
    opacity: 1;

    transform:
        translateX(0);
}


/* =========================================================
   CARD TILT FOUNDATION
========================================================= */

.tilt-card {
    transform-style: preserve-3d;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.tilt-card > * {
    transform:
        translateZ(18px);
}


/* =========================================================
   BUTTON PULSE
========================================================= */

.spotify-btn {
    position: relative;

    overflow: hidden;

    isolation: isolate;
}

.spotify-btn::before {
    content: "";

    position: absolute;

    inset: -5px;

    border-radius: inherit;

    border:
        1px solid rgba(149, 123, 255, 0.55);

    animation:
        buttonPulse 2.2s ease-out infinite;

    pointer-events: none;
}

@keyframes buttonPulse {
    0% {
        transform: scale(0.95);
        opacity: 0.85;
    }

    80%,
    100% {
        transform: scale(1.25);
        opacity: 0;
    }
}


/* =========================================================
   GLOWING CARD BORDER
========================================================= */

.glow-card {
    position: relative;

    overflow: hidden;
}

.glow-card::before {
    content: "";

    position: absolute;

    inset: -2px;

    z-index: -1;

    border-radius: inherit;

    background:
        linear-gradient(
            135deg,
            transparent 15%,
            rgba(108, 77, 255, 0.7),
            rgba(179, 109, 255, 0.65),
            transparent 80%
        );

    opacity: 0;

    transition:
        opacity 0.35s ease;
}

.glow-card:hover::before {
    opacity: 1;
}


/* =========================================================
   STAT NUMBER GLOW
========================================================= */

.stat-card h3 {
    text-shadow:
        0 0 18px rgba(149, 123, 255, 0.45);
}


/* =========================================================
   NAVIGATION UNDERLINE
========================================================= */

.nav-links a {
    position: relative;
}

.nav-links a::after {
    content: "";

    position: absolute;

    left: 50%;

    bottom: -8px;

    width: 0;

    height: 2px;

    border-radius: 4px;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--accent)
        );

    transform:
        translateX(-50%);

    transition:
        width 0.3s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    width: 100%;
}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (
    prefers-reduced-motion: reduce
) {

    *,
    *::before,
    *::after {
        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;
    }

    .reveal,
    .reveal-left,
    .reveal-right {
        opacity: 1;

        transform: none;
    }

}