/* ==========================================================
   AFTERDARK BASS
   ANIMATIONS.CSS
   PART 1
========================================================== */

/* ==========================================================
   FADE IN
========================================================== */

.fade {

    opacity: 0;

    animation: fadeIn 1s forwards;

}

@keyframes fadeIn {

    from {

        opacity: 0;

    }

    to {

        opacity: 1;

    }

}

/* ==========================================================
   FADE UP
========================================================== */

.fade-up {

    opacity: 0;

    transform: translateY(40px);

    animation: fadeUp .8s ease forwards;

}

@keyframes fadeUp {

    from {

        opacity: 0;

        transform: translateY(40px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

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

.fade-left {

    opacity: 0;

    transform: translateX(-60px);

    animation: fadeLeft .8s ease forwards;

}

@keyframes fadeLeft {

    from {

        opacity: 0;

        transform: translateX(-60px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

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

.fade-right {

    opacity: 0;

    transform: translateX(60px);

    animation: fadeRight .8s ease forwards;

}

@keyframes fadeRight {

    from {

        opacity: 0;

        transform: translateX(60px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

/* ==========================================================
   ZOOM IN
========================================================== */

.zoom-in {

    opacity: 0;

    transform: scale(.8);

    animation: zoomIn .8s ease forwards;

}

@keyframes zoomIn {

    from {

        opacity: 0;

        transform: scale(.8);

    }

    to {

        opacity: 1;

        transform: scale(1);

    }

}

/* ==========================================================
   FLOAT
========================================================== */

.float {

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

}

@keyframes float {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}

/* ==========================================================
   HERO GLOW
========================================================== */

.hero-logo {

    animation:

        float 5s ease-in-out infinite,

        heroGlow 4s ease infinite;

}

@keyframes heroGlow {

    0% {

        filter: drop-shadow(0 0 15px rgba(177, 60, 255, .45));

    }

    50% {

        filter: drop-shadow(0 0 35px rgba(32, 214, 255, .55));

    }

    100% {

        filter: drop-shadow(0 0 15px rgba(177, 60, 255, .45));

    }

}

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

.btn-main {

    position: relative;

    overflow: hidden;

}

.btn-main::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 120%;

    height: 100%;

    background:

        linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .35),

            transparent);

}

.btn-main:hover::before {

    animation: shine .8s;

}

@keyframes shine {

    from {

        left: -120%;

    }

    to {

        left: 130%;

    }

}

/* ==========================================================
   SCROLL INDICATOR
========================================================== */

.scroll-down {

    animation: scrollBounce 2s infinite;

}

@keyframes scrollBounce {

    0% {

        transform: translate(-50%, 0);

    }

    50% {

        transform: translate(-50%, -10px);

    }

    100% {

        transform: translate(-50%, 0);

    }

}

/* ==========================================================
   AFTERDARK BASS
   ANIMATIONS.CSS
   PART 2
========================================================== */

/* ==========================================================
   NEON PULSE
========================================================== */

@keyframes neonPulse {

    0% {

        box-shadow:
            0 0 0 rgba(177, 60, 255, 0);

    }

    50% {

        box-shadow:
            0 0 18px rgba(177, 60, 255, .45),
            0 0 35px rgba(32, 214, 255, .25);

    }

    100% {

        box-shadow:
            0 0 0 rgba(177, 60, 255, 0);

    }

}

.glass-card:hover,
.player-card:hover {

    animation: neonPulse 1.8s infinite;

}

/* ==========================================================
   ZONE CARD
========================================================== */

.zone-card {

    overflow: hidden;

}

.zone-card img {

    transition:
        transform .8s ease,
        filter .8s ease;

}

.zone-card:hover img {

    transform: scale(1.08);

    filter: brightness(1.1);

}

.zone-card::after {

    content: "";

    position: absolute;

    inset: 0;

    background:

        linear-gradient(135deg,
            rgba(177, 60, 255, .10),
            rgba(32, 214, 255, .05));

    opacity: 0;

    transition: .5s;

}

.zone-card:hover::after {

    opacity: 1;

}

/* ==========================================================
   ZONE BUTTON
========================================================== */

.zone-btn {

    transition: .35s;

}

.zone-card:hover .zone-btn {

    transform: translateX(10px);

}

/* ==========================================================
   ALBUM COVER
========================================================== */

.album-card {

    overflow: hidden;

}

.album-card img {

    transition: .8s;

}

.album-card:hover img {

    transform: scale(1.08);

}

.album-card:hover {

    transform: translateY(-10px);

}

/* ==========================================================
   RELEASE CARDS
========================================================== */

.release-card {

    overflow: hidden;

}

.release-card img {

    transition: .7s;

}

.release-card:hover img {

    transform: scale(1.06);

}

.release-content {

    transition: .35s;

}

.release-card:hover .release-content {

    transform: translateY(-6px);

}

/* ==========================================================
   FEATURE CARD
========================================================== */

.feature-card {

    transition: .4s;

}

.feature-card:hover {

    transform: translateY(-10px);

}

.feature-card i {

    transition: .4s;

}

.feature-card:hover i {

    transform: rotate(10deg) scale(1.15);

}

/* ==========================================================
   PLATFORM CARD
========================================================== */

.platform-card {

    transition: .4s;

}

.platform-card:hover {

    transform: translateY(-10px);

}

.platform-card i {

    transition: .45s;

}

.platform-card:hover i {

    transform: scale(1.2);

}

/* ==========================================================
   SOCIAL CARD
========================================================== */

.social-card {

    transition: .4s;

}

.social-card:hover {

    transform: translateY(-10px);

}

.social-card i {

    transition: .4s;

}

.social-card:hover i {

    transform: rotate(12deg) scale(1.15);

}

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

.hero h1 {

    animation: titleGlow 5s ease infinite;

}

@keyframes titleGlow {

    0% {

        text-shadow:

            0 0 15px rgba(177, 60, 255, .4);

    }

    50% {

        text-shadow:

            0 0 35px rgba(32, 214, 255, .5);

    }

    100% {

        text-shadow:

            0 0 15px rgba(177, 60, 255, .4);

    }

}

/* ==========================================================
   SECTION TITLE
========================================================== */

.section-title h2 {

    position: relative;

}

.section-title h2::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -14px;

    transform: translateX(-50%);

    width: 70px;

    height: 3px;

    border-radius: 30px;

    background: linear-gradient(90deg,

            #b13cff,

            #20d6ff);

    animation: gradientBar 3s linear infinite;

}

@keyframes gradientBar {

    0% {

        width: 70px;

    }

    50% {

        width: 140px;

    }

    100% {

        width: 70px;

    }

}

/* ==========================================================
   IMAGE GLOW
========================================================== */

img:hover {

    transition: .45s;

}

.hero-logo:hover {

    transform: scale(1.04);

}

/* ==========================================================
   AFTERDARK BASS
   ANIMATIONS.CSS
   PART 3
========================================================== */

/* ==========================================================
   BACKGROUND GRADIENT
========================================================== */

.bg-glow {

    animation: bgMove 18s ease-in-out infinite;

}

@keyframes bgMove {

    0% {

        filter: hue-rotate(0deg);

        transform: scale(1);

    }

    50% {

        filter: hue-rotate(20deg);

        transform: scale(1.08);

    }

    100% {

        filter: hue-rotate(0deg);

        transform: scale(1);

    }

}

/* ==========================================================
   GLASS SHIMMER
========================================================== */

.glass-card {

    position: relative;

    overflow: hidden;

}

.glass-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 60%;

    height: 100%;

    background:

        linear-gradient(90deg,

            transparent,

            rgba(255, 255, 255, .10),

            transparent);

    transform: skewX(-20deg);

}

.glass-card:hover::before {

    animation: glassShine 1.2s ease;

}

@keyframes glassShine {

    from {

        left: -120%;

    }

    to {

        left: 140%;

    }

}

/* ==========================================================
   CARD BORDER GLOW
========================================================== */

.zone-card::before,
.release-card::before,
.platform-card::before,
.feature-card::before,
.social-card::before {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    padding: 1px;

    background:

        linear-gradient(135deg,
            rgba(177, 60, 255, .35),
            rgba(32, 214, 255, .35));

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask-composite: exclude;

    opacity: 0;

    transition: .4s;

}

.zone-card:hover::before,
.release-card:hover::before,
.platform-card:hover::before,
.feature-card:hover::before,
.social-card:hover::before {

    opacity: 1;

}

/* ==========================================================
   BUTTON GLOW
========================================================== */

.btn-main {

    animation: buttonGlow 4s ease infinite;

}

@keyframes buttonGlow {

    0% {

        box-shadow:

            0 0 15px rgba(177, 60, 255, .35);

    }

    50% {

        box-shadow:

            0 0 35px rgba(32, 214, 255, .45);

    }

    100% {

        box-shadow:

            0 0 15px rgba(177, 60, 255, .35);

    }

}

/* ==========================================================
   HERO BADGE
========================================================== */

.hero-badge {

    animation: badgePulse 3s infinite;

}

@keyframes badgePulse {

    0% {

        opacity: .8;

    }

    50% {

        opacity: 1;

    }

    100% {

        opacity: .8;

    }

}

/* ==========================================================
   ICON FLOAT
========================================================== */

.platform-card i,
.social-card i,
.feature-card i {

    animation: iconFloat 4s ease-in-out infinite;

}

@keyframes iconFloat {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-6px);

    }

    100% {

        transform: translateY(0);

    }

}

/* ==========================================================
   ALBUM COVER GLOW
========================================================== */

.album-card img {

    transition: .6s;

}

.album-card:hover img {

    filter:

        drop-shadow(0 0 20px rgba(177, 60, 255, .35));

}

/* ==========================================================
   SPOTIFY PLAYER
========================================================== */

.player-card {

    transition: .4s;

}

.player-card:hover {

    box-shadow:

        0 0 30px rgba(29, 185, 84, .30);

}

/* ==========================================================
   VIDEO CARD
========================================================== */

.video-card {

    transition: .4s;

}

.video-card:hover {

    transform: translateY(-8px);

}

/* ==========================================================
   NEWSLETTER
========================================================== */

.newsletter-card {

    animation: newsletterGlow 6s ease infinite;

}

@keyframes newsletterGlow {

    0% {

        box-shadow:

            0 0 20px rgba(177, 60, 255, .20);

    }

    50% {

        box-shadow:

            0 0 40px rgba(32, 214, 255, .30);

    }

    100% {

        box-shadow:

            0 0 20px rgba(177, 60, 255, .20);

    }

}

/* ==========================================================
   FOOTER SOCIAL
========================================================== */

.footer-social a {

    transition: .35s;

}

.footer-social a:hover {

    transform:

        translateY(-6px) scale(1.15) rotate(8deg);

}

/* ==========================================================
   BACK TO TOP
========================================================== */

.back-to-top {

    animation: backTopGlow 3s infinite;

}

@keyframes backTopGlow {

    0% {

        box-shadow:

            0 0 12px rgba(177, 60, 255, .30);

    }

    50% {

        box-shadow:

            0 0 30px rgba(32, 214, 255, .45);

    }

    100% {

        box-shadow:

            0 0 12px rgba(177, 60, 255, .30);

    }

}

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

.reveal {

    opacity: 0;

    transform: translateY(60px);

    transition: 1s;

}

.reveal.active {

    opacity: 1;

    transform: translateY(0);

}

/* ==========================================================
   AFTERDARK BASS
   ANIMATIONS.CSS
   PART 4
========================================================== */

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

@keyframes particleFloat {

    0% {

        transform: translateY(0) translateX(0);

        opacity: .15;

    }

    25% {

        transform: translateY(-20px) translateX(10px);

    }

    50% {

        transform: translateY(-40px) translateX(-8px);

        opacity: .35;

    }

    75% {

        transform: translateY(-20px) translateX(12px);

    }

    100% {

        transform: translateY(0) translateX(0);

        opacity: .15;

    }

}

#particles {

    animation: particleFloat 14s ease-in-out infinite;

}

/* ==========================================================
   HERO OVERLAY
========================================================== */

.hero-overlay {

    animation: overlayPulse 12s ease-in-out infinite;

}

@keyframes overlayPulse {

    0% {

        opacity: .75;

    }

    50% {

        opacity: .88;

    }

    100% {

        opacity: .75;

    }

}

/* ==========================================================
   CYBER GRID
========================================================== */

.hero::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(rgba(255, 255, 255, .025) 1px,

            transparent 1px),

        linear-gradient(90deg,

            rgba(255, 255, 255, .025) 1px,

            transparent 1px);

    background-size: 60px 60px;

    animation: gridMove 18s linear infinite;

    opacity: .35;

}

@keyframes gridMove {

    from {

        transform: translateY(0);

    }

    to {

        transform: translateY(60px);

    }

}

/* ==========================================================
   TEXT FLICKER
========================================================== */

.hero h1 span {

    animation: flicker 6s infinite;

}

@keyframes flicker {

    0%,
    18%,
    22%,
    25%,
    53%,
    57%,
    100% {

        opacity: 1;

    }

    20%,
    24%,
    55% {

        opacity: .7;

    }

}

/* ==========================================================
   RELEASE CARD
========================================================== */

.release-card {

    animation: releaseIdle 6s ease-in-out infinite;

}

@keyframes releaseIdle {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-4px);

    }

    100% {

        transform: translateY(0);

    }

}

/* ==========================================================
   ICON PULSE
========================================================== */

.platform-card i,

.social-card i {

    animation: iconPulse 5s infinite;

}

@keyframes iconPulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.12);

    }

    100% {

        transform: scale(1);

    }

}

/* ==========================================================
   BUTTON RIPPLE
========================================================== */

.btn-main {

    position: relative;

    overflow: hidden;

}

.btn-main:active {

    transform: scale(.97);

}

/* ==========================================================
   FOOTER GLOW
========================================================== */

.footer {

    position: relative;

}

.footer::before {

    content: "";

    position: absolute;

    top: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 70%;

    height: 2px;

    background:

        linear-gradient(90deg,

            transparent,

            rgba(177, 60, 255, .8),

            rgba(32, 214, 255, .8),

            transparent);

}

/* ==========================================================
   BACK TO TOP
========================================================== */

.back-to-top {

    animation: floatButton 4s ease-in-out infinite;

}

@keyframes floatButton {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-6px);

    }

    100% {

        transform: translateY(0);

    }

}

/* ==========================================================
   IMAGE HOVER
========================================================== */

.zone-card img,

.album-card img,

.release-card img {

    will-change: transform;

}

/* ==========================================================
   PERFORMANCE
========================================================== */

.zone-card,

.release-card,

.platform-card,

.social-card,

.feature-card,

.glass-card,

.album-card,

.player-card,

.video-card {

    backface-visibility: hidden;

    transform: translateZ(0);

}

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

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

    * {

        animation: none !important;

        transition: none !important;

    }

}

/* ==========================================================
   END OF ANIMATIONS.CSS
========================================================== */