/* =========================================================
   PEWJAY OFFICIAL
   POSTERS.CSS
   Blue Night / Cinematic Poster Design
   ========================================================= */


/* =========================================================
   GLOBAL POSTER SETTINGS
   ========================================================= */

.poster-hero,
.poster-feature {
    position: relative;

    width: 100%;

    overflow: hidden;

    background-color:
        #020B18;

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;
}


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

.poster-hero {
    min-height:
        100vh;

    display:
        flex;

    align-items:
        flex-end;
}


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

.poster-hero-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(2, 11, 24, 0.78) 0%,
            rgba(2, 11, 24, 0.38) 45%,
            rgba(2, 11, 24, 0.15) 100%
        );

    pointer-events:
        none;
}


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

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

    position:
        absolute;

    width:
        650px;

    height:
        320px;

    left:
        40%;

    bottom:
        -190px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

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

    filter:
        blur(35px);

    pointer-events:
        none;

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


/* =========================================================
   NEW ILLUSTRATED
   ========================================================= */

.poster-new-label {
    position:
        absolute;

    z-index:
        4;

    top:
        125px;

    left:
        6%;

    padding:
        10px 16px;

    border-left:
        2px solid
        #48BDFF;

    color:
        #E8F8FF;

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

    backdrop-filter:
        blur(7px);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

    box-shadow:
        0 0 20px
        rgba(30, 160, 255, 0.05);

    animation:
        posterLabelReveal
        0.9s
        ease
        forwards;
}


/* =========================================================
   MORE TIME LAPSE BUTTON
   ========================================================= */

.poster-time-btn {
    position:
        absolute;

    z-index:
        4;

    top:
        175px;

    left:
        6%;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        40px;

    padding:
        0 18px;

    border:
        1px solid
        rgba(90, 190, 255, 0.35);

    border-radius:
        2px;

    color:
        #EAF8FF;

    background:
        rgba(2, 14, 28, 0.55);

    backdrop-filter:
        blur(8px);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        2px;

    text-decoration:
        none;

    text-transform:
        uppercase;

    transition:
        transform 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}


.poster-time-btn:hover {
    transform:
        translateY(-2px);

    background:
        rgba(25, 125, 190, 0.22);

    border-color:
        rgba(90, 200, 255, 0.65);

    box-shadow:
        0 0 20px
        rgba(45, 175, 255, 0.12);
}


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

.poster-hero-content {
    position:
        relative;

    z-index:
        3;

    width:
        min(650px, 90%);

    margin-left:
        6%;

    padding:
        0 0 90px;

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


/* =========================================================
   CATEGORY
   ========================================================= */

.poster-category {
    display:
        block;

    margin-bottom:
        14px;

    color:
        #57C5FF;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        4px;

    text-transform:
        uppercase;
}


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

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

    color:
        #FFFFFF;

    font-size:
        clamp(42px, 6vw, 78px);

    font-weight:
        900;

    line-height:
        0.95;

    letter-spacing:
        -2px;

    text-transform:
        uppercase;

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


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

.poster-hero-content time {
    display:
        block;

    margin-top:
        20px;

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

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


/* =========================================================
   HERO DESCRIPTION
   ========================================================= */

.poster-hero-content p {
    max-width:
        560px;

    margin:
        16px 0 0;

    color:
        rgba(235, 247, 255, 0.78);

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

    font-size:
        13px;

    line-height:
        1.8;

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


/* =========================================================
   POSTER FEATURE SECTIONS
   ========================================================= */

.poster-feature {
    min-height:
        760px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;
}


/* =========================================================
   FEATURE OVERLAY
   ========================================================= */

.poster-feature-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            90deg,
            rgba(2, 11, 24, 0.72) 0%,
            rgba(2, 11, 24, 0.38) 42%,
            rgba(2, 11, 24, 0.15) 100%
        );

    pointer-events:
        none;
}


/* =========================================================
   FEATURE LIGHT
   ========================================================= */

.poster-feature::after {
    content:
        "";

    position:
        absolute;

    width:
        650px;

    height:
        300px;

    left:
        45%;

    bottom:
        -180px;

    transform:
        translateX(-50%);

    border-radius:
        50%;

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

    filter:
        blur(35px);

    pointer-events:
        none;

    animation:
        posterFeatureLight
        9s
        ease-in-out
        infinite
        alternate;
}


/* =========================================================
   LATEST LABEL
   ========================================================= */

.poster-latest-label {
    position:
        absolute;

    z-index:
        4;

    top:
        70px;

    left:
        6%;

    padding:
        9px 15px;

    border-left:
        2px solid
        #48BDFF;

    color:
        #E8F8FF;

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

    backdrop-filter:
        blur(7px);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        3px;

    text-transform:
        uppercase;
}


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

.poster-feature-content {
    position:
        relative;

    z-index:
        3;

    width:
        min(580px, 90%);

    margin-left:
        6%;

    padding:
        50px 0;

    animation:
        posterFeatureContent
        1s
        ease
        forwards;
}


/* =========================================================
   FEATURE TITLE
   ========================================================= */

.poster-feature-content h2 {
    margin:
        0;

    color:
        #FFFFFF;

    font-size:
        clamp(38px, 5vw, 65px);

    font-weight:
        900;

    line-height:
        0.95;

    letter-spacing:
        -1.5px;

    text-transform:
        uppercase;

    text-shadow:
        0 5px 25px
        rgba(0, 0, 0, 0.5);
}


/* =========================================================
   FEATURE DATE
   ========================================================= */

.poster-feature-content time {
    display:
        block;

    margin-top:
        18px;

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

    font-size:
        10px;

    font-weight:
        700;

    letter-spacing:
        2px;
}


/* =========================================================
   FEATURE DESCRIPTION
   ========================================================= */

.poster-feature-content p {
    max-width:
        500px;

    margin:
        16px 0 0;

    color:
        rgba(235, 247, 255, 0.78);

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

    font-size:
        13px;

    line-height:
        1.85;

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


/* =========================================================
   REVERSE SECTION
   ========================================================= */

.poster-feature-reverse {
    justify-content:
        flex-end;
}


.poster-feature-reverse .poster-feature-overlay {
    background:
        linear-gradient(
            90deg,
            rgba(2, 11, 24, 0.15) 0%,
            rgba(2, 11, 24, 0.38) 55%,
            rgba(2, 11, 24, 0.76) 100%
        );
}


.poster-feature-reverse .poster-feature-content {
    margin-left:
        0;

    margin-right:
        6%;
}


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

@keyframes posterHeroLight {

    0% {
        opacity:
            0.35;

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

    100% {
        opacity:
            0.75;

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

}


@keyframes posterFeatureLight {

    0% {
        opacity:
            0.30;

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

    100% {
        opacity:
            0.70;

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

}


@keyframes posterLabelReveal {

    0% {
        opacity:
            0;

        transform:
            translateX(-20px);
    }

    100% {
        opacity:
            1;

        transform:
            translateX(0);
    }

}


@keyframes posterContentReveal {

    0% {
        opacity:
            0;

        transform:
            translateY(35px);
    }

    100% {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


@keyframes posterFeatureContent {

    0% {
        opacity:
            0;

        transform:
            translateY(25px);
    }

    100% {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


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

@media (max-width: 900px) {

    .poster-hero {
        min-height:
            800px;
    }


    .poster-hero-content,
    .poster-feature-content {
        margin-left:
            5%;
    }


    .poster-feature-reverse .poster-feature-content {
        margin-right:
            5%;
    }


    .poster-new-label {
        left:
            5%;

        top:
            110px;
    }


    .poster-time-btn {
        left:
            5%;

        top:
            160px;
    }


    .poster-latest-label {
        left:
            5%;
    }

}


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

@media (max-width: 600px) {

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

        align-items:
            flex-end;

        background-position:
            center;
    }


    .poster-hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(2, 11, 24, 0.20),
                rgba(2, 11, 24, 0.88)
            );
    }


    .poster-new-label {
        top:
            95px;

        left:
            20px;

        padding:
            7px 11px;

        font-size:
            7px;

        letter-spacing:
            2px;
    }


    .poster-time-btn {
        top:
            140px;

        left:
            20px;

        min-height:
            36px;

        padding:
            0 13px;

        font-size:
            7px;
    }


    .poster-hero-content {
        width:
            90%;

        margin-left:
            20px;

        padding-bottom:
            50px;
    }


    .poster-category {
        margin-bottom:
            10px;

        font-size:
            8px;

        letter-spacing:
            2.5px;
    }


    .poster-hero-content h1 {
        font-size:
            clamp(34px, 10vw, 52px);

        letter-spacing:
            -1px;
    }


    .poster-hero-content time {
        margin-top:
            15px;

        font-size:
            9px;
    }


    .poster-hero-content p {
        margin-top:
            13px;

        font-size:
            11px;

        line-height:
            1.75;
    }


    /* FEATURE */

    .poster-feature {
        min-height:
            650px;

        align-items:
            flex-end;
    }


    .poster-feature-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(2, 11, 24, 0.20),
                rgba(2, 11, 24, 0.88)
            );
    }


    .poster-latest-label {
        top:
            60px;

        left:
            20px;

        padding:
            7px 11px;

        font-size:
            7px;

        letter-spacing:
            2px;
    }


    .poster-feature-content,
    .poster-feature-reverse .poster-feature-content {

        width:
            90%;

        margin:
            0 20px;

        padding:
            0 0 50px;
    }


    .poster-feature-content h2 {
        font-size:
            clamp(32px, 9vw, 48px);

        letter-spacing:
            -1px;
    }


    .poster-feature-content time {
        margin-top:
            14px;

        font-size:
            9px;
    }


    .poster-feature-content p {
        margin-top:
            12px;

        font-size:
            11px;

        line-height:
            1.75;
    }

}


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

@media (max-width: 380px) {

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


    .poster-hero-content h1 {
        font-size:
            34px;
    }


    .poster-feature {
        min-height:
            600px;
    }


    .poster-feature-content h2 {
        font-size:
            31px;
    }

}


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

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

    .poster-hero::after,
    .poster-feature::after,
    .poster-new-label,
    .poster-hero-content,
    .poster-feature-content {

        animation:
            none;
    }

}