/* =========================================================
   PEWJAY OFFICIAL
   EVENT.CSS
   Event & Countdown
   Template Design:
   Subtle Blue Night + Light Animation
   ========================================================= */


/* =========================================================
   BASE
   ========================================================= */

.event-section {
    position: relative;

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

    padding: 120px 6%;

    overflow: hidden;

    background: #020B18;
}


/* =========================================================
   CONTAINER
   ========================================================= */

.event-container {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 1250px;

    margin:
        0 auto;
}


/* =========================================================
   HEADING
   ========================================================= */

.event-heading {
    width: 100%;
    max-width: 720px;

    margin:
        0 auto 65px;

    text-align:
        center;
}


/* =========================================================
   EVENT LABEL
   ========================================================= */

.event-label {
    display:
        inline-block;

    margin-bottom:
        15px;

    color:
        #58c4ff;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        4px;

    text-transform:
        uppercase;

    opacity:
        0.85;

    text-shadow:
        0 0 12px
        rgba(50, 180, 255, 0.15);

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


/* =========================================================
   MAIN HEADING
   ========================================================= */

.event-heading h2 {
    margin:
        0 0 18px;

    color:
        #f4faff;

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

    font-weight:
        900;

    line-height:
        0.95;

    letter-spacing:
        -1px;

    text-transform:
        uppercase;
}


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

.event-heading p {
    max-width:
        620px;

    margin:
        0 auto;

    color:
        rgba(190, 215, 235, 0.68);

    font-size:
        13px;

    line-height:
        1.8;
}


/* =========================================================
   EVENT CARD
   ========================================================= */

.event-card {
    position:
        relative;

    width:
        100%;

    min-height:
        350px;

    margin-bottom:
        30px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(70, 170, 235, 0.16);

    border-radius:
        14px;

    background:
        #061426;

    box-shadow:
        0 20px 55px
        rgba(0, 0, 0, 0.35);

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

    transition:
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


/* Second card delay */

.event-card:nth-of-type(2) {
    animation-delay:
        1.5s;
}


/* =========================================================
   CARD BACKGROUND
   ========================================================= */

.event-card-bg {
    position:
        absolute;

    inset:
        0;

    width:
        100%;

    height:
        100%;

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

    transform:
        scale(1.02);

    animation:
        eventBackgroundMove 12s ease-in-out infinite alternate;

    opacity: 25%;
}


/* =========================================================
   CARD OVERLAY
   ========================================================= */

.event-card-overlay {
    position:
        absolute;

    inset:
        1;

    background:
        linear-gradient(
            90deg,
            rgba(1, 8, 18, 0.96) 0%,
            rgba(2, 12, 25, 0.88) 45%,
            rgba(2, 15, 30, 0.65) 70%,
            rgba(1, 8, 18, 0.88) 100%
        );

}


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

.event-card-content {
    position:
        relative;

    z-index:
        3;

    width:
        100%;

    min-height:
        350px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(350px, 420px);

    align-items:
        center;

    gap:
        60px;

    padding:
        55px 60px;
}


/* =========================================================
   LEFT SIDE
   ========================================================= */

.event-info {
    min-width:
        0;

    max-width:
        650px;
}


/* =========================================================
   EVENT NUMBER
   ========================================================= */

.event-number {
    display:
        inline-block;

    margin-bottom:
        18px;

    color:
        #53bfff;

    font-size:
        10px;

    font-weight:
        800;

    letter-spacing:
        3px;

    text-transform:
        uppercase;
}


/* =========================================================
   EVENT TITLE
   ========================================================= */

.event-info h3 {
    margin:
        0 0 28px;

    color:
        #ffffff;

    font-size:
        clamp(30px, 4vw, 54px);

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -0.5px;

    text-transform:
        uppercase;

    text-shadow:
        0 0 18px
        rgba(30, 150, 255, 0.10);
}


/* =========================================================
   RELEASE DATE
   ========================================================= */

.event-release {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    padding-left:
        14px;

    border-left:
        2px solid
        rgba(55, 170, 255, 0.65);
}


.event-release span {
    color:
        rgba(170, 205, 230, 0.55);

    font-size:
        9px;

    font-weight:
        800;

    letter-spacing:
        2px;

    text-transform:
        uppercase;
}


.event-release strong {
    color:
        #e6f6ff;

    font-size:
        13px;

    font-weight:
        800;

    letter-spacing:
        1px;

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


/* =========================================================
   RIGHT SIDE — COUNTDOWN
   ========================================================= */

.event-countdown {
    position:
        relative;

    width:
        100%;

    padding:
        28px;

    border:
        1px solid
        rgba(60, 170, 245, 0.18);

    border-radius:
        10px;

    background:
        rgba(2, 16, 31, 0.72);

    backdrop-filter:
        blur(8px);

    box-shadow:
        inset 0 0 25px
        rgba(20, 130, 255, 0.025);
}


/* =========================================================
   COUNTDOWN TOP LINE
   ========================================================= */

.event-countdown::before {
    content:
        "";

    position:
        absolute;

    top:
        -1px;

    left:
        25px;

    width:
        60px;

    height:
        2px;

    background:
        #35aaff;
}


/* =========================================================
   COUNTDOWN LABEL
   ========================================================= */

.countdown-label {
    display:
        block;

    margin-bottom:
        20px;

    color:
        #58c4ff;

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        3px;

    text-transform:
        uppercase;

    text-align:
        center;
}


/* =========================================================
   COUNTDOWN TIMER
   ========================================================= */

.countdown-timer {
    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        8px;
}


/* =========================================================
   COUNTDOWN BOX
   ========================================================= */

.countdown-box {
    min-width:
        0;

    min-height:
        90px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    padding:
        10px 5px;

    border:
        1px solid
        rgba(65, 165, 230, 0.13);

    border-radius:
        7px;

    background:
        rgba(5, 27, 49, 0.72);

    animation:
        countdownLight 3.5s ease-in-out infinite;

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


/* Staggered animation */

.countdown-box:nth-child(2) {
    animation-delay:
        0.3s;
}


.countdown-box:nth-child(3) {
    animation-delay:
        0.6s;
}


.countdown-box:nth-child(4) {
    animation-delay:
        0.9s;
}


/* =========================================================
   COUNTDOWN NUMBER
   ========================================================= */

.countdown-box strong {
    color:
        #ffffff;

    font-size:
        27px;

    font-weight:
        900;

    line-height:
        1;

    font-variant-numeric:
        tabular-nums;

    animation:
        numberLight 2.5s ease-in-out infinite;
}


/* =========================================================
   COUNTDOWN LABEL
   ========================================================= */

.countdown-box span {
    margin-top:
        8px;

    color:
        rgba(160, 195, 220, 0.52);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        1.5px;

    text-transform:
        uppercase;
}


/* =========================================================
   LIGHT SWEEP
   ========================================================= */

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

    position:
        absolute;

    z-index:
        4;

    top:
        0;

    left:
        -120%;

    width:
        45%;

    height:
        100%;

    pointer-events:
        none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(100, 200, 255, 0.07),
            transparent
        );

    transform:
        skewX(-18deg);

    animation:
        eventLightSweep 8s ease-in-out infinite;
}


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

.event-card:hover {
    border-color:
        rgba(70, 175, 245, 0.35);

    box-shadow:
        0 25px 65px
        rgba(0, 70, 150, 0.22);
}


.event-card:hover .event-card-bg {
    transform:
        scale(1.05);
}


.event-card:hover .countdown-box {
    border-color:
        rgba(70, 175, 245, 0.25);

    background:
        rgba(7, 34, 60, 0.78);
}


/* =========================================================
   FINISHED EVENT
   ========================================================= */

.event-card.event-finished
.countdown-label {
    color:
        #80d3ff;
}


.event-card.event-finished
.countdown-box strong {
    color:
        #8bd8ff;
}


/* =========================================================
   LIGHT ANIMATION
   ========================================================= */


/* SECTION LIGHT */

@keyframes eventAmbientLight {

    0% {
        transform:
            translateX(-50%)
            scale(0.9);

        opacity:
            0.45;
    }

    50% {
        transform:
            translateX(-50%)
            scale(1.05);

        opacity:
            0.65;
    }

    100% {
        transform:
            translateX(-50%)
            scale(0.95);

        opacity:
            0.50;
    }
}


/* EVENT CARD FLOAT */

@keyframes eventCardFloat {

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

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


/* BACKGROUND MOVEMENT */

@keyframes eventBackgroundMove {

    0% {
        transform:
            scale(1.02)
            translate3d(0, 0, 0);
    }

    100% {
        transform:
            scale(1.06)
            translate3d(-1%, -1%, 0);
    }
}


/* LIGHT SWEEP */

@keyframes eventLightSweep {

    0% {
        left:
            -120%;
    }

    35% {
        left:
            130%;
    }

    100% {
        left:
            130%;
    }
}


/* COUNTDOWN LIGHT */

@keyframes countdownLight {

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

    50% {
        box-shadow:
            inset 0 0 18px
            rgba(40, 160, 255, 0.045);
    }
}


/* COUNTDOWN NUMBER */

@keyframes numberLight {

    0%,
    100% {
        text-shadow:
            0 0 0
            rgba(60, 180, 255, 0);
    }

    50% {
        text-shadow:
            0 0 12px
            rgba(60, 180, 255, 0.20);
    }
}


/* EVENT LABEL */

@keyframes labelLight {

    0%,
    100% {
        opacity:
            0.75;
    }

    50% {
        opacity:
            1;
    }
}


/* RELEASE DATE */

@keyframes releaseLight {

    0%,
    100% {
        opacity:
            0.85;
    }

    50% {
        opacity:
            1;
    }
}


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

@media (max-width: 1000px) {

    .event-section {
        padding:
            95px 5%;
    }


    .event-card-content {
        grid-template-columns:
            1fr;

        gap:
            35px;

        padding:
            45px;
    }


    .event-info {
        max-width:
            100%;
    }


    .event-countdown {
        max-width:
            500px;
    }

}


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

@media (max-width: 600px) {

    .event-section {
        padding:
            75px 18px;
    }


    .event-heading {
        margin-bottom:
            45px;
    }


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

        letter-spacing:
            3px;
    }


    .event-heading h2 {
        font-size:
            35px;
    }


    .event-heading p {
        font-size:
            11px;

        line-height:
            1.7;
    }


    .event-card {
        min-height:
            450px;

        margin-bottom:
            22px;

        border-radius:
            10px;
    }


    .event-card-content {
        min-height:
            450px;

        gap:
            30px;

        padding:
            32px 20px;
    }


    .event-info h3 {
        font-size:
            28px;

        line-height:
            1.05;
    }


    .event-release strong {
        font-size:
            11px;
    }


    .event-countdown {
        padding:
            20px 12px;
    }


    .countdown-timer {
        gap:
            5px;
    }


    .countdown-box {
        min-height:
            68px;

        padding:
            7px 3px;
    }


    .countdown-box strong {
        font-size:
            18px;
    }


    .countdown-box span {
        font-size:
            5px;

        letter-spacing:
            1px;
    }

}


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

@media (max-width: 380px) {

    .event-section {
        padding:
            60px 14px;
    }


    .event-card-content {
        padding:
            28px 16px;
    }


    .event-info h3 {
        font-size:
            25px;
    }


    .event-countdown {
        padding:
            17px 9px;
    }


    .countdown-box {
        min-height:
            60px;
    }


    .countdown-box strong {
        font-size:
            16px;
    }

}


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

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

    .event-section::after,
    .event-card,
    .event-card-bg,
    .event-card::before,
    .countdown-box,
    .countdown-box strong,
    .event-label,
    .event-release strong {

        animation:
            none;
    }

}