/* =========================================================
   PEWJAY OFFICIAL
   FANS.CSS
   Fans Page — Blue Night / Cinematic Design
   ========================================================= */


/* =========================================================
   FANS HERO
   ========================================================= */

.fans-hero {
    position: relative;

    width: 100%;
    min-height: 100vh;

    display: flex;

    align-items: flex-end;

    overflow: hidden;

    background-color:
        #020B18;

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;
}


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

.fans-hero-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(2, 11, 24, 0.20) 0%,
            rgba(2, 11, 24, 0.30) 40%,
            rgba(2, 11, 24, 0.92) 100%
        );

    pointer-events:
        none;
}


/* =========================================================
   HERO LIGHT
   ========================================================= */

.fans-hero::after {
    content: "";

    position: absolute;

    width: 600px;
    height: 300px;

    left: 45%;
    bottom: -170px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse,
            rgba(35, 160, 255, 0.18),
            transparent 70%
        );

    filter:
        blur(30px);

    pointer-events:
        none;

    animation:
        fansHeroLight 7s
        ease-in-out
        infinite
        alternate;
}


/* =========================================================
   NEW UPDATE LABEL
   ========================================================= */

.fans-update {
    position: absolute;

    top: 125px;
    left: 6%;

    z-index: 3;

    padding:
        9px 15px;

    border-left:
        2px solid
        #43B9FF;

    color:
        #DDF4FF;

    background:
        rgba(2, 15, 30, 0.65);

    backdrop-filter:
        blur(6px);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

    animation:
        fansUpdateReveal
        0.9s
        ease
        forwards;
}


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

.fans-hero-content {
    position:
        relative;

    z-index:
        2;

    width:
        100%;

    max-width:
        850px;

    padding:
        0 6% 90px;

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


/* =========================================================
   HERO KICKER
   ========================================================= */

.fans-kicker {
    display:
        block;

    margin-bottom:
        14px;

    color:
        #58C4FF;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        4px;

    text-transform:
        uppercase;
}


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

.fans-hero-content h1 {
    margin:
        0;

    color:
        #FFFFFF;

    font-size:
        clamp(48px, 7vw, 92px);

    font-weight:
        900;

    line-height:
        0.9;

    letter-spacing:
        -2px;

    text-transform:
        uppercase;

    text-shadow:
        0 5px 30px
        rgba(0, 0, 0, 0.45);
}


/* =========================================================
   HERO DATE
   ========================================================= */

.fans-hero-content p {
    margin:
        22px 0 0;

    color:
        rgba(220, 240, 250, 0.78);

    font-size:
        13px;

    font-weight:
        700;

    letter-spacing:
        2px;

    text-transform:
        uppercase;
}


/* =========================================================
   FAN WORLD SECTIONS
   ========================================================= */

.fan-world {
    position:
        relative;

    width:
        100%;

    min-height:
        760px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background-color:
        #020B18;

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;
}


/* =========================================================
   WORLD OVERLAY
   ========================================================= */

.fan-world-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            rgba(2, 11, 24, 0.42),
            rgba(2, 11, 24, 0.70)
        );

    pointer-events:
        none;
}


/* =========================================================
   SIDE DARKNESS
   ========================================================= */

.fan-world::before {
    content:
        "";

    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(2, 11, 24, 0.30),
            transparent 50%,
            rgba(2, 11, 24, 0.30)
        );

    pointer-events:
        none;
}


/* =========================================================
   WORLD LIGHT
   ========================================================= */

.fan-world::after {
    content:
        "";

    position:
        absolute;

    width:
        700px;

    height:
        320px;

    left:
        50%;

    bottom:
        -190px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse,
            rgba(40, 170, 255, 0.15),
            transparent 70%
        );

    filter:
        blur(35px);

    pointer-events:
        none;

    animation:
        fansWorldLight
        8s
        ease-in-out
        infinite
        alternate;
}


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

.fan-world-content {
    position:
        relative;

    z-index:
        3;

    width:
        min(700px, 90%);

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    text-align:
        center;

    padding:
        80px 0;
}


/* =========================================================
   WORLD LOGO
   ========================================================= */

.fan-world-logo {
    display:
        block;

    width:
        min(380px, 70vw);

    max-height:
        190px;

    object-fit:
        contain;

    margin-bottom:
        45px;

    filter:
        drop-shadow(
            0 10px 25px
            rgba(0, 0, 0, 0.35)
        );

    opacity:
        0;

    transform:
        translateY(25px)
        scale(0.96);

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


/* =========================================================
   WORLD DESCRIPTION
   ========================================================= */

.fan-world-content p {

    font-family:
        "Inter",
        sans-serif;

    max-width:
        620px;

    margin:
        0;

    color:
        rgba(238, 248, 255, 0.82);

    font-size:
        14px;

    font-weight:
        400;

    line-height:
        1.9;

    letter-spacing:
        0.15px;

    text-shadow:
        0 3px 15px
        rgba(0, 0, 0, 0.55);

    opacity:
        0;

    transform:
        translateY(20px);

    animation:
        fanDescriptionReveal
        1s
        ease
        0.3s
        forwards;
}

/* =========================================================
   TROLLS SECTION
   ========================================================= */

.trolls-world {
    background-color:
        #071426;
}


/* =========================================================
   ELEMENTAL SECTION
   ========================================================= */

.elemental-world {
    background-color:
        #061322;
}


.elemental-world .fan-world-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(3, 16, 29, 0.42),
            rgba(3, 16, 29, 0.76)
        );
}


/* =========================================================
   COMING SOON
   ========================================================= */

.fan-coming-soon {
    position:
        relative;

    width:
        100%;

    min-height:
        620px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    background-color:
        #020B18;

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;
}


/* =========================================================
   COMING SOON OVERLAY
   ========================================================= */

.fan-coming-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            180deg,
            rgba(2, 11, 24, 0.65),
            rgba(2, 11, 24, 0.88)
        );
}


/* =========================================================
   COMING SOON LIGHT
   ========================================================= */

.fan-coming-soon::after {
    content:
        "";

    position:
        absolute;

    width:
        600px;

    height:
        280px;

    left:
        50%;

    bottom:
        -160px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

    background:
        radial-gradient(
            ellipse,
            rgba(40, 170, 255, 0.20),
            transparent 70%
        );

    filter:
        blur(35px);

    animation:
        comingLight
        6s
        ease-in-out
        infinite
        alternate;
}


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

.fan-coming-content {
    position:
        relative;

    z-index:
        3;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    text-align:
        center;
}


/* =========================================================
   COMING LOGO
   ========================================================= */

.coming-logo {
    width:
        min(400px, 75vw);

    max-height:
        180px;

    object-fit:
        contain;

    margin-bottom:
        35px;

    filter:
        drop-shadow(
            0 10px 30px
            rgba(0, 0, 0, 0.4)
        );

    animation:
        comingLogoFloat
        4s
        ease-in-out
        infinite;
}


/* =========================================================
   COMING LABEL
   ========================================================= */

.coming-label {
    color:
        #58C4FF;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        5px;

    text-transform:
        uppercase;

    animation:
        comingText
        3s
        ease-in-out
        infinite;
}


/* =========================================================
   COMING DATE
   ========================================================= */

.fan-coming-content h2 {
    margin:
        18px 0 0;

    color:
        #FFFFFF;

    font-size:
        clamp(36px, 6vw, 64px);

    font-weight:
        900;

    letter-spacing:
        2px;

    line-height:
        1;

    text-shadow:
        0 0 20px
        rgba(50, 175, 255, 0.15);
}


/* =========================================================
   HERO ANIMATION
   ========================================================= */

@keyframes fansHeroLight {

    0% {
        opacity:
            0.35;

        transform:
            translateX(-50%)
            scale(0.9);
    }

    100% {
        opacity:
            0.75;

        transform:
            translateX(-50%)
            scale(1.08);
    }

}


@keyframes fansUpdateReveal {

    0% {
        opacity:
            0;

        transform:
            translateX(-20px);
    }

    100% {
        opacity:
            1;

        transform:
            translateX(0);
    }

}


@keyframes fansHeroContent {

    0% {
        opacity:
            0;

        transform:
            translateY(35px);
    }

    100% {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   WORLD ANIMATION
   ========================================================= */

@keyframes fansWorldLight {

    0% {
        opacity:
            0.35;

        transform:
            translateX(-50%)
            scale(0.9);
    }

    100% {
        opacity:
            0.70;

        transform:
            translateX(-50%)
            scale(1.08);
    }

}


@keyframes fanLogoReveal {

    0% {
        opacity:
            0;

        transform:
            translateY(25px)
            scale(0.96);
    }

    100% {
        opacity:
            1;

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

}


@keyframes fanDescriptionReveal {

    0% {
        opacity:
            0;

        transform:
            translateY(20px);
    }

    100% {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   COMING SOON ANIMATION
   ========================================================= */

@keyframes comingLight {

    0% {
        opacity:
            0.35;

        transform:
            translateX(-50%)
            scale(0.9);
    }

    100% {
        opacity:
            0.75;

        transform:
            translateX(-50%)
            scale(1.08);
    }

}


@keyframes comingLogoFloat {

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

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

}


@keyframes comingText {

    0%,
    100% {
        opacity:
            0.65;
    }

    50% {
        opacity:
            1;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .fans-hero {
        min-height:
            850px;
    }


    .fans-hero-content {
        padding:
            0 5% 75px;
    }


    .fans-update {
        top:
            110px;

        left:
            5%;
    }


    .fan-world {
        min-height:
            680px;
    }


    .fan-world-content {
        width:
            85%;
    }


    .fan-world-content p {
        font-size:
            13px;

        line-height:
            1.8;
    }

}


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

@media (max-width: 600px) {

    .fans-hero {
        min-height:
            720px;

        background-position:
            center;
    }


    .fans-update {
        top:
            95px;

        left:
            20px;

        padding:
            7px 11px;

        font-size:
            7px;

        letter-spacing:
            2px;
    }


    .fans-hero-content {
        padding:
            0 20px 55px;
    }


    .fans-kicker {
        margin-bottom:
            10px;

        font-size:
            8px;

        letter-spacing:
            2.5px;
    }


    .fans-hero-content h1 {
        font-size:
            clamp(38px, 12vw, 58px);

        letter-spacing:
            -1px;
    }


    .fans-hero-content p {
        margin-top:
            16px;

        font-size:
            10px;

        letter-spacing:
            1.5px;
    }


    .fan-world {
        min-height:
            650px;
    }


    .fan-world-content {
        width:
            88%;

        padding:
            65px 0;
    }


    .fan-world-logo {
        width:
            min(300px, 75vw);

        max-height:
            140px;

        margin-bottom:
            32px;
    }


    .fan-world-content p {

        font-family:
            "Inter",
            sans-serif;

        font-size:
            11px;

        line-height:
            1.8;

        letter-spacing:
            0.1px;
    }

    .fan-coming-soon {
        min-height:
            550px;
    }


    .coming-logo {
        width:
            min(300px, 75vw);

        max-height:
            140px;

        margin-bottom:
            28px;
    }


    .coming-label {
        font-size:
            8px;

        letter-spacing:
            3px;
    }


    .fan-coming-content h2 {
        font-size:
            38px;

        letter-spacing:
            1px;
    }

}


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

@media (max-width: 380px) {

    .fans-hero {
        min-height:
            650px;
    }


    .fans-hero-content {
        padding:
            0 16px 45px;
    }


    .fans-hero-content h1 {
        font-size:
            36px;
    }


    .fan-world {
        min-height:
            600px;
    }


    .fan-world-content p {
        font-size:
            10px;
    }


    .fan-coming-content h2 {
        font-size:
            32px;
    }

}


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

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

    .fans-hero::after,
    .fans-update,
    .fans-hero-content,
    .fan-world::after,
    .fan-world-logo,
    .fan-world-content p,
    .fan-coming-soon::after,
    .coming-logo,
    .coming-label {

        animation:
            none;
    }

}