/* =========================================================
   PEWJAY OFFICIAL
   ANIMATION.CSS
   Global Animation & Motion Effects
   ========================================================= */


/* =========================================================
   1. PAGE LOAD
   ========================================================= */

body {
    opacity: 0;
}

body.page-loaded {
    opacity: 1;

    transition:
        opacity 0.8s ease;
}


/* =========================================================
   2. FADE UP
   ========================================================= */

@keyframes fadeUp {

    from {
        opacity: 0;

        transform:
            translateY(30px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   3. FADE DOWN
   ========================================================= */

@keyframes fadeDown {

    from {
        opacity: 0;

        transform:
            translateY(-25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   4. FADE LEFT
   ========================================================= */

@keyframes fadeLeft {

    from {
        opacity: 0;

        transform:
            translateX(-35px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


/* =========================================================
   5. FADE RIGHT
   ========================================================= */

@keyframes fadeRight {

    from {
        opacity: 0;

        transform:
            translateX(35px);
    }

    to {
        opacity: 1;

        transform:
            translateX(0);
    }

}


/* =========================================================
   6. HERO ENTRANCE
   ========================================================= */

.hero-label {
    animation:
        fadeDown 0.8s ease 0.15s both;
}


.hero-text h1 {
    animation:
        fadeLeft 0.9s ease 0.25s both;
}


.hero-subtitle {
    animation:
        fadeLeft 0.9s ease 0.4s both;
}


.hero-buttons {
    animation:
        fadeUp 0.8s ease 0.55s both;
}


.hero-stats {
    animation:
        fadeUp 0.8s ease 0.7s both;
}


/* =========================================================
   7. HERO LIGHT PULSE
   ========================================================= */

@keyframes bluePulse {

    0%,
    100% {
        opacity: 0.45;

        transform:
            scale(1);
    }

    50% {
        opacity: 0.75;

        transform:
            scale(1.08);
    }

}


.hero-section::before {
    animation:
        bluePulse 7s ease-in-out infinite;
}


/* =========================================================
   8. GLOW PULSE
   ========================================================= */

@keyframes glowPulse {

    0%,
    100% {
        box-shadow:
            0 0 0
            rgba(40, 170, 255, 0);
    }

    50% {
        box-shadow:
            0 0 18px
            rgba(40, 170, 255, 0.18);
    }

}


/* =========================================================
   9. BUTTON HOVER
   ========================================================= */

.btn,
.slider-arrow,
.menu-toggle,
.footer-social a {
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease,
        background 0.3s ease,
        color 0.3s ease;
}


.btn:hover {
    transform:
        translateY(-3px);
}


/* =========================================================
   10. BUTTON PRESS
   ========================================================= */

.btn:active,
.slider-arrow:active,
.menu-toggle:active {
    transform:
        scale(0.96);
}


/* =========================================================
   11. BUTTON RIPPLE
   ========================================================= */

.btn,
.slider-arrow,
.footer-social a {
    position:
        relative;

    overflow:
        hidden;
}


.button-ripple {
    position:
        absolute;

    border-radius:
        50%;

    pointer-events:
        none;

    background:
        rgba(100, 210, 255, 0.20);

    transform:
        scale(0);

    animation:
        buttonRipple 0.6s ease-out;
}


@keyframes buttonRipple {

    to {
        transform:
            scale(2.5);

        opacity:
            0;
    }

}


/* =========================================================
   12. SECTION REVEAL
   ========================================================= */

.portfolio-section,
.event-card {
    opacity: 0;

    transform:
        translateY(35px);

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


.portfolio-section.section-visible,
.portfolio-section.active-section,
.event-card {
    opacity: 1;

    transform:
        translateY(0);
}


/* =========================================================
   13. PLAYLIST IMAGE HOVER
   ========================================================= */

.playlist-track img {
    transition:
        transform 0.45s ease,
        filter 0.45s ease,
        box-shadow 0.45s ease;
}


.playlist-track img:hover {
    transform:
        scale(1.025);

    filter:
        brightness(1.08);

    box-shadow:
        0 0 22px
        rgba(25, 145, 255, 0.16);
}


/* =========================================================
   14. SELECTED IMAGE
   ========================================================= */

.playlist-track img.selected-image {
    transform:
        scale(1.025);

    filter:
        brightness(1.1);

    box-shadow:
        0 0 28px
        rgba(35, 165, 255, 0.24);
}


/* =========================================================
   15. IMAGE SHINE
   ========================================================= */

.playlist-track {
    position:
        relative;
}


.playlist-track::after {
    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        -120%;

    width:
        70%;

    height:
        100%;

    pointer-events:
        none;

    background:
        linear-gradient(
            110deg,
            transparent,
            rgba(150, 225, 255, 0.08),
            transparent
        );

    transform:
        skewX(-20deg);

    transition:
        left 0.8s ease;
}


.playlist:hover .playlist-track::after {
    left:
        150%;
}


/* =========================================================
   16. ANIMATION CARD
   ========================================================= */

.animation-card {
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


.animation-card:hover {
    transform:
        translateY(-7px);

    box-shadow:
        0 20px 50px
        rgba(0, 0, 0, 0.30),

        0 0 25px
        rgba(25, 145, 255, 0.08);
}


/* =========================================================
   17. ANIMATION CARD IMAGE
   ========================================================= */

.animation-card-image {
    overflow:
        hidden;
}


.animation-card-image img {
    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    transition:
        transform 0.6s ease,
        filter 0.6s ease;
}


.animation-card:hover
.animation-card-image img {
    transform:
        scale(1.05);

    filter:
        brightness(1.06);
}


/* =========================================================
   18. EVENT CARD
   ========================================================= */

.event-card {
    animation:
        fadeUp 0.8s ease both;
}


.event-card:nth-child(1) {
    animation-delay:
        0.15s;
}


.event-card:nth-child(2) {
    animation-delay:
        0.30s;
}


.event-card:nth-child(3) {
    animation-delay:
        0.45s;
}


/* =========================================================
   19. COUNTDOWN PULSE
   ========================================================= */

.countdown-item strong {
    animation:
        countdownPulse 1s ease-in-out infinite;
}


@keyframes countdownPulse {

    0%,
    100% {
        opacity:
            0.82;
    }

    50% {
        opacity:
            1;
    }

}


/* =========================================================
   20. COUNTDOWN NUMBER CHANGE
   ========================================================= */

.countdown-item.changed strong {
    animation:
        numberChange 0.35s ease;
}


@keyframes numberChange {

    0% {
        transform:
            translateY(-5px);

        opacity:
            0;
    }

    100% {
        transform:
            translateY(0);

        opacity:
            1;
    }

}


/* =========================================================
   21. MENU ANIMATION
   ========================================================= */

.mobile-menu {
    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-12px);

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}


.mobile-menu.active {
    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);
}


/* =========================================================
   22. HAMBURGER
   ========================================================= */

.menu-toggle span {
    transition:
        transform 0.3s ease,
        opacity 0.25s ease;
}


.menu-toggle.active span:first-child {
    transform:
        translateY(4px)
        rotate(45deg);
}


.menu-toggle.active span:last-child {
    transform:
        translateY(-4px)
        rotate(-45deg);
}


/* =========================================================
   23. FOOTER SOCIAL
   ========================================================= */

.footer-social a:hover {
    transform:
        translateY(-4px);

    box-shadow:
        0 0 18px
        rgba(30, 155, 255, 0.20);
}


/* =========================================================
   24. FLOATING GLOW
   ========================================================= */

@keyframes floatingGlow {

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

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

}


/* Apply only to elements explicitly marked */

.float-glow {
    animation:
        floatingGlow 4s ease-in-out infinite;
}


/* =========================================================
   25. GLOW LINE
   ========================================================= */

@keyframes glowLine {

    0% {
        opacity:
            0.35;

        transform:
            scaleX(0.85);
    }

    50% {
        opacity:
            1;

        transform:
            scaleX(1);
    }

    100% {
        opacity:
            0.35;

        transform:
            scaleX(0.85);
    }

}


.glow-line {
    animation:
        glowLine 3s ease-in-out infinite;
}


/* =========================================================
   26. 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;
    }

}

/* =========================================================
   PEWJAY OFFICIAL
   FANS PAGE OPENING ANIMATION
   Blue Night • Soft Light • Cinematic Reveal
   ========================================================= */


/* =========================================================
   OPENING SCREEN
   ========================================================= */

.page-intro {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        #020B18;

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transition:
        opacity 0.9s ease,
        visibility 0.9s ease;
}


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

.page-intro::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(5, 30, 60, 0.35),
            transparent 45%,
            rgba(10, 90, 160, 0.10)
        );

    opacity: 0;

    animation:
        introBackground
        2.8s
        ease
        forwards;
}


/* =========================================================
   CENTER LIGHT
   ========================================================= */

.page-intro-light {
    position: absolute;

    width: 650px;
    height: 650px;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%)
        scale(0.35);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(45, 180, 255, 0.20) 0%,
            rgba(45, 160, 255, 0.08) 32%,
            transparent 70%
        );

    filter:
        blur(35px);

    opacity: 0;

    animation:
        introLightReveal
        3s
        ease-in-out
        forwards;
}


/* =========================================================
   SMALL LIGHT CORE
   ========================================================= */

.page-intro-light::after {
    content: "";

    position: absolute;

    width: 160px;
    height: 160px;

    top: 50%;
    left: 50%;

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

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(110, 215, 255, 0.13),
            transparent 70%
        );

    filter:
        blur(12px);

    animation:
        introCore
        2.5s
        ease-in-out
        infinite alternate;
}


/* =========================================================
   CONTENT
   ========================================================= */

.page-intro-content {
    position: relative;

    z-index: 2;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;
}


/* =========================================================
   PEWJAY LABEL
   ========================================================= */

.page-intro-content span {
    color:
        #5CC7FF;

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        5px;

    text-transform:
        uppercase;

    opacity: 0;

    transform:
        translateY(10px);

    animation:
        introFadeUp
        0.7s
        ease
        0.2s
        forwards;
}


/* =========================================================
   FANS TITLE
   ========================================================= */

.page-intro-content h1 {
    position: relative;

    margin:
        14px 0;

    color:
        #F3FAFF;

    font-size:
        clamp(48px, 9vw, 90px);

    font-weight:
        900;

    line-height:
        0.9;

    letter-spacing:
        -3px;

    text-transform:
        uppercase;

    opacity: 0;

    transform:
        translateY(20px)
        scale(0.94);

    text-shadow:
        0 0 25px
        rgba(50, 180, 255, 0.12);

    animation:
        introTitleReveal
        1s
        cubic-bezier(.16, 1, .3, 1)
        0.35s
        forwards;
}

/* =========================================================
   LINE
   ========================================================= */

.page-intro-line {
    width:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #48BAFF,
            transparent
        );

    box-shadow:
        0 0 14px
        rgba(55, 185, 255, 0.30);

    animation:
        introLineReveal
        0.8s
        ease
        0.95s
        forwards;
}


/* =========================================================
   SUBTITLE
   ========================================================= */

.page-intro-content::after {
    content:
        "PLEASE WAIT...";

    margin-top:
        14px;

    color:
        rgba(190, 220, 240, 0.62);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        3px;

    opacity:
        0;

    animation:
        introFade
        0.7s
        ease
        1.15s
        forwards;
}


/* =========================================================
   EXIT
   ========================================================= */

.page-intro.intro-hidden {
    opacity:
        0;

    visibility:
        hidden;

    pointer-events:
        none;
}


/* =========================================================
   BODY LOCK
   ========================================================= */

body.intro-active {
    overflow:
        hidden;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */


/* BACKGROUND */

@keyframes introBackground {

    0% {
        opacity:
            0;
    }

    100% {
        opacity:
            1;
    }

}


/* MAIN LIGHT */

@keyframes introLightReveal {

    0% {
        opacity:
            0;

        transform:
            translate(-50%, -50%)
            scale(0.35);
    }

    40% {
        opacity:
            1;

        transform:
            translate(-50%, -50%)
            scale(0.9);
    }

    75% {
        opacity:
            0.75;

        transform:
            translate(-50%, -50%)
            scale(1.08);
    }

    100% {
        opacity:
            0.55;

        transform:
            translate(-50%, -50%)
            scale(1.15);
    }

}


/* CORE */

@keyframes introCore {

    0% {
        opacity:
            0.35;

        transform:
            translate(-50%, -50%)
            scale(0.8);
    }

    100% {
        opacity:
            0.75;

        transform:
            translate(-50%, -50%)
            scale(1.15);
    }

}


/* FADE UP */

@keyframes introFadeUp {

    0% {
        opacity:
            0;

        transform:
            translateY(10px);
    }

    100% {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


/* TITLE */

@keyframes introTitleReveal {

    0% {
        opacity:
            0;

        transform:
            translateY(20px)
            scale(0.94);
    }

    100% {
        opacity:
            1;

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

}


/* TITLE SWEEP */

@keyframes introTitleSweep {

    0% {
        left:
            -25%;
    }

    45% {
        left:
            120%;
    }

    100% {
        left:
            120%;
    }

}


/* LINE */

@keyframes introLineReveal {

    0% {
        width:
            0;

        opacity:
            0;
    }

    100% {
        width:
            190px;

        opacity:
            1;
    }

}


/* SUBTITLE */

@keyframes introFade {

    0% {
        opacity:
            0;

        transform:
            translateY(5px);
    }

    100% {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .page-intro-light {
        width:
            450px;

        height:
            450px;
    }


    .page-intro-content span {
        font-size:
            7px;

        letter-spacing:
            3px;
    }


    .page-intro-content h1 {
        font-size:
            52px;

        letter-spacing:
            -2px;
    }


    .page-intro-content::after {
        font-size:
            6px;

        letter-spacing:
            2px;
    }


    .page-intro-line {
        animation-duration:
            0.7s;
    }

}


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

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

    .page-intro,
    .page-intro::before,
    .page-intro-light,
    .page-intro-light::after,
    .page-intro-content span,
    .page-intro-content h1,
    .page-intro-content h1::after,
    .page-intro-line,
    .page-intro-content::after {

        animation:
            none;

        transition:
            none;
    }

}