/* =========================================================
   ROOT
========================================================= */

:root {

    --white:
        #fffdf8;

    --white-soft:
        rgba(255, 253, 248, .76);

    --white-muted:
        rgba(255, 253, 248, .48);

    --cream:
        #f4e5c8;

    --glass:
        rgba(37, 28, 17, .25);

    --glass-light:
        rgba(255, 247, 226, .12);

    --shadow:
        rgba(32, 18, 5, .28);

}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing:
        border-box;
}


html {
    width:
        100%;

    min-height:
        100%;

    background:
        #96754e;
}


body {
    margin:
        0;

    width:
        100%;

    min-height:
        100vh;

    color:
        var(--white);

    font-family:
        "Manrope",
        Arial,
        sans-serif;

    overflow-x:
        hidden;

    -webkit-font-smoothing:
        antialiased;

    text-rendering:
        optimizeLegibility;
}


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

.background {
    position:
        fixed;

    inset:
        0;

    z-index:
        -20;

    overflow:
        hidden;

    background:
        #96754e;
}


.bg-image {
    position:
        absolute;

    inset:
        -3%;

    width:
        106%;

    height:
        106%;

    background-size:
        cover;

    background-position:
        center;

    background-repeat:
        no-repeat;

    opacity:
        0;

    transform:
        scale(1.025);

    animation:
        sceneFade
        20s
        ease-in-out
        infinite;

    will-change:
        opacity,
        transform;
}


.bg-image-1 {
    background-image:
        url(
            "https://tr.rbxcdn.com/180DAY-abe9288c1c125bb279d1c486e3306464/768/432/Image/Webp/noFilter"
        );

    animation-delay:
        0s;
}


.bg-image-2 {
    background-image:
        url(
            "https://tr.rbxcdn.com/180DAY-1bf56e4d796a7eee974d71bbfe3b68b2/768/432/Image/Webp/noFilter"
        );

    animation-delay:
        5s;
}


.bg-image-3 {
    background-image:
        url(
            "https://tr.rbxcdn.com/180DAY-f26dc2bd7da1cbf06ced2d45dddc7902/768/432/Image/Webp/noFilter"
        );

    animation-delay:
        10s;
}


.bg-image-4 {
    background-image:
        url(
            "https://tr.rbxcdn.com/180DAY-a7a6d9daa4409e13d6a9ddc997d00f92/768/432/Image/Webp/noFilter"
        );

    animation-delay:
        15s;
}


@keyframes sceneFade {

    0% {
        opacity:
            0;

        transform:
            scale(1.025);
    }


    5% {
        opacity:
            1;
    }


    20% {
        opacity:
            1;

        transform:
            scale(1.04);
    }


    25% {
        opacity:
            0;

        transform:
            scale(1.05);
    }


    100% {
        opacity:
            0;
    }

}


/* =========================================================
   COLOR ATMOSPHERE
========================================================= */

.warm-overlay {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            110deg,
            rgba(45, 26, 10, .18),
            rgba(205, 156, 84, .06) 45%,
            rgba(27, 17, 8, .16)
        );

    pointer-events:
        none;
}


.soft-vignette {
    position:
        absolute;

    inset:
        0;

    background:
        radial-gradient(
            ellipse at center,
            transparent 48%,
            rgba(22, 13, 5, .20) 100%
        );

    pointer-events:
        none;
}


/* =========================================================
   CRT SCANLINES
========================================================= */

.tv-scanlines {
    position:
        absolute;

    inset:
        0;

    background:
        repeating-linear-gradient(
            to bottom,
            rgba(255,255,255,.055) 0px,
            rgba(255,255,255,.055) 1px,
            transparent 1px,
            transparent 4px
        );

    opacity:
        .24;

    mix-blend-mode:
        overlay;

    pointer-events:
        none;
}


.tv-noise {
    position:
        absolute;

    inset:
        -50%;

    opacity:
        .055;

    background-image:
        radial-gradient(
            circle,
            rgba(255,255,255,.9) 0 .55px,
            transparent .8px
        );

    background-size:
        4px 4px;

    animation:
        noiseMove
        .15s
        steps(2)
        infinite;

    pointer-events:
        none;
}


@keyframes noiseMove {

    0% {
        transform:
            translate(0,0);
    }

    25% {
        transform:
            translate(1%,-1%);
    }

    50% {
        transform:
            translate(-1%,1%);
    }

    75% {
        transform:
            translate(-1%,-1%);
    }

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

}


.tv-flicker {
    position:
        absolute;

    inset:
        0;

    background:
        rgba(255,235,190,.025);

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

    pointer-events:
        none;
}


@keyframes flicker {

    0%,
    100% {
        opacity:
            .35;
    }

    50% {
        opacity:
            .7;
    }

}


/* =========================================================
   HEADER
========================================================= */

.header {
    width:
        min(
            1340px,
            calc(100% - 72px)
        );

    margin:
        0 auto;

    padding:
        30px 0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;
}


.brand {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;

    color:
        var(--white);

    text-decoration:
        none;
}


.brand-image {
    width:
        50px;

    height:
        50px;

    overflow:
        hidden;

    border-radius:
        15px;

    box-shadow:
        0 12px 30px
        rgba(30,17,5,.25);
}


.brand-image img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;
}


.brand-name {
    font-family:
        "Outfit",
        sans-serif;

    font-size:
        18px;

    font-weight:
        700;

    letter-spacing:
        -.04em;
}


.roblox-button {
    min-height:
        48px;

    padding:
        0 18px;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    border-radius:
        14px;

    background:
        rgba(255,250,238,.17);

    color:
        #fff;

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        700;

    box-shadow:
        0 10px 30px
        rgba(30,17,5,.15);

    backdrop-filter:
        blur(14px);

    transition:
        transform .18s ease,
        background .18s ease;
}


.roblox-button:hover {
    transform:
        translateY(-2px);

    background:
        rgba(255,250,238,.25);
}


.roblox-logo {
    width:
        20px;

    height:
        20px;
}



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

.main {
    width:
        min(
            1340px,
            calc(100% - 72px)
        );

    min-height:
        calc(100vh - 112px);

    margin:
        0 auto;

    padding:
        30px 0 80px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    gap:
        28px;
}



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

.hero {
    min-height:
        560px;

    display:
        grid;

    grid-template-columns:
        1.05fr
        .95fr;

    overflow:
        hidden;

    border-radius:
        32px;

    background:
        rgba(31,23,14,.27);

    box-shadow:
        0 40px 110px
        var(--shadow);

    backdrop-filter:
        blur(12px)
        saturate(120%);
}


.hero-image {
    position:
        relative;

    min-height:
        560px;

    overflow:
        hidden;
}


.hero-image img {
    width:
        100%;

    height:
        100%;

    display:
        block;

    object-fit:
        cover;

    transition:
        transform .45s
        cubic-bezier(.2,.8,.2,1);
}


.hero:hover
.hero-image img {
    transform:
        scale(1.025);
}


.hero-image-light {
    position:
        absolute;

    inset:
        0;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,.10),
            transparent 42%,
            rgba(255,214,147,.08)
        );

    pointer-events:
        none;
}



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

.hero-content {
    padding:
        65px 70px;

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}


.update-label {
    width:
        fit-content;

    padding:
        8px 12px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    border-radius:
        999px;

    background:
        rgba(255,255,255,.11);

    color:
        rgba(255,255,255,.67);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .18em;
}


.update-point {
    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        #f4dfb4;

    box-shadow:
        0 0 14px
        rgba(255,228,176,.85);

    animation:
        pointPulse
        1.8s
        ease-in-out
        infinite;
}


@keyframes pointPulse {

    0%,
    100% {
        opacity:
            .55;

        transform:
            scale(.8);
    }

    50% {
        opacity:
            1;

        transform:
            scale(1);
    }

}


h1 {
    margin:
        27px 0 0;

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

    font-size:
        clamp(
            72px,
            8vw,
            116px
        );

    line-height:
        .82;

    font-weight:
        700;

    letter-spacing:
        -.075em;

    color:
        var(--white);

    text-shadow:
        0 8px 35px
        rgba(28,15,4,.20);
}


h1 span {
    display:
        block;

    color:
        var(--cream);
}


.hero-description {
    margin:
        26px 0 40px;

    max-width:
        400px;

    color:
        var(--white-soft);

    font-size:
        15px;

    line-height:
        1.65;
}



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

.countdown {
    display:
        flex;

    align-items:
        center;

    gap:
        15px;
}


.counter-number {
    font-family:
        "Outfit",
        sans-serif;

    font-size:
        clamp(
            39px,
            4.4vw,
            63px
        );

    line-height:
        .9;

    font-weight:
        600;

    letter-spacing:
        -.065em;

    font-variant-numeric:
        tabular-nums;
}


.counter-label {
    margin-top:
        10px;

    color:
        var(--white-muted);

    font-size:
        7px;

    font-weight:
        800;

    letter-spacing:
        .14em;
}


.counter-separator {
    margin-top:
        -13px;

    color:
        rgba(255,255,255,.40);

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

    font-size:
        27px;
}



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

.release {
    margin-top:
        42px;

    padding-top:
        17px;

    display:
        flex;

    flex-direction:
        column;

    gap:
        5px;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.18),
            transparent
        );

    background-size:
        100% 1px;

    background-position:
        top;

    background-repeat:
        no-repeat;
}


.release-title {
    color:
        var(--white-muted);

    font-size:
        8px;

    font-weight:
        700;

    text-transform:
        uppercase;

    letter-spacing:
        .14em;
}


.release-value {
    color:
        var(--white-soft);

    font-size:
        11px;

    font-weight:
        600;
}



/* =========================================================
   TIMEZONE SECTION
========================================================= */

.timezone-section {
    padding:
        0 4px;
}


.section-title {
    margin-bottom:
        15px;

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;
}


.section-title span {
    color:
        var(--white-muted);

    font-size:
        8px;

    font-weight:
        800;

    letter-spacing:
        .18em;
}


.section-title h2 {
    margin:
        6px 0 0;

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

    font-size:
        25px;

    font-weight:
        600;

    letter-spacing:
        -.045em;
}


.section-title p {
    margin:
        0 0 2px;

    color:
        var(--white-soft);

    font-size:
        8px;

    font-weight:
        700;

    letter-spacing:
        .13em;
}



/* =========================================================
   TIMEZONE GRID
========================================================= */

.timezone-grid {
    display:
        grid;

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

    gap:
        14px;
}


.timezone-card {
    min-height:
        108px;

    padding:
        21px 23px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    border-radius:
        19px;

    background:
        rgba(255,247,225,.105);

    box-shadow:
        0 18px 45px
        rgba(28,15,4,.12);

    backdrop-filter:
        blur(13px);

    transition:
        transform .2s ease,
        background .2s ease;
}


.timezone-card:hover {
    transform:
        translateY(-3px);

    background:
        rgba(255,247,225,.15);
}


.timezone-left {
    display:
        flex;

    align-items:
        center;

    gap:
        13px;
}



/* =========================================================
   FLAGS
========================================================= */

.flag {
    width:
        45px;

    height:
        30px;

    flex:
        0 0 auto;

    overflow:
        hidden;

    border-radius:
        6px;

    box-shadow:
        0 6px 15px
        rgba(20,10,2,.20);
}


.flag svg {
    display:
        block;

    width:
        100%;

    height:
        100%;
}


.timezone-name strong {
    display:
        block;

    font-size:
        12px;

    font-weight:
        700;
}


.timezone-name span {
    display:
        block;

    margin-top:
        4px;

    color:
        var(--white-muted);

    font-size:
        8px;
}


.timezone-time {
    font-family:
        "Outfit",
        sans-serif;

    font-size:
        24px;

    font-weight:
        600;

    letter-spacing:
        -.045em;

    white-space:
        nowrap;
}



/* =========================================================
   LARGE TABLETS
========================================================= */

@media (max-width: 1100px) {

    .header,
    .main {
        width:
            calc(100% - 48px);
    }


    .hero {
        grid-template-columns:
            1fr 1fr;
    }


    .hero-content {
        padding:
            50px;
    }


    h1 {
        font-size:
            clamp(
                62px,
                8vw,
                88px
            );
    }


    .countdown {
        gap:
            9px;
    }


    .counter-number {
        font-size:
            42px;
    }

}



/* =========================================================
   TABLETS
========================================================= */

@media (max-width: 820px) {

    .header {
        padding:
            22px 0;
    }


    .main {
        padding-top:
            15px;
    }


    .hero {
        grid-template-columns:
            1fr;

        min-height:
            auto;
    }


    .hero-image {
        min-height:
            400px;

        max-height:
            55vh;
    }


    .hero-content {
        min-height:
            440px;

        padding:
            45px;
    }


    h1 {
        font-size:
            clamp(
                68px,
                14vw,
                94px
            );
    }


    .timezone-grid {
        grid-template-columns:
            1fr;
    }


    .timezone-card {
        min-height:
            92px;
    }

}



/* =========================================================
   SMALL TABLETS / LARGE PHONES
========================================================= */

@media (max-width: 600px) {

    .header,
    .main {
        width:
            calc(100% - 28px);
    }


    .header {
        padding:
            15px 0;
    }


    .brand-image {
        width:
            42px;

        height:
            42px;

        border-radius:
            12px;
    }


    .brand-name {
        font-size:
            16px;
    }


    .roblox-button {
        min-height:
            42px;

        padding:
            0 13px;

        border-radius:
            12px;
    }


    .roblox-button span {
        display:
            none;
    }


    .main {
        padding:
            12px 0 45px;

        gap:
            18px;
    }


    .hero {
        border-radius:
            24px;
    }


    .hero-image {
        min-height:
            250px;

        max-height:
            none;
    }


    .hero-content {
        min-height:
            auto;

        padding:
            34px 24px 36px;
    }


    .update-label {
        font-size:
            7px;
    }


    h1 {
        margin-top:
            22px;

        font-size:
            59px;
    }


    .hero-description {
        margin:
            20px 0 31px;

        font-size:
            13px;
    }


    .countdown {
        gap:
            6px;

        justify-content:
            space-between;
    }


    .counter {
        min-width:
            0;
    }


    .counter-number {
        font-size:
            clamp(
                27px,
                8.5vw,
                39px
            );
    }


    .counter-label {
        font-size:
            6px;

        letter-spacing:
            .09em;
    }


    .counter-separator {
        font-size:
            19px;

        margin-top:
            -10px;
    }


    .release {
        margin-top:
            31px;
    }


    .section-title {
        align-items:
            flex-start;

        flex-direction:
            column;

        gap:
            7px;
    }


    .section-title h2 {
        font-size:
            23px;
    }


    .section-title p {
        display:
            none;
    }


    .timezone-card {
        min-height:
            84px;

        padding:
            17px;

        border-radius:
            16px;
    }


    .flag {
        width:
            40px;

        height:
            27px;
    }


    .timezone-name strong {
        font-size:
            11px;
    }


    .timezone-time {
        font-size:
            21px;
    }

}



/* =========================================================
   VERY SMALL PHONES
========================================================= */

@media (max-width: 390px) {

    .header,
    .main {
        width:
            calc(100% - 22px);
    }


    .hero-content {
        padding:
            29px 19px 31px;
    }


    h1 {
        font-size:
            51px;
    }


    .countdown {
        gap:
            3px;
    }


    .counter-number {
        font-size:
            25px;
    }


    .counter-label {
        font-size:
            5.5px;
    }


    .counter-separator {
        font-size:
            16px;
    }


    .timezone-time {
        font-size:
            18px;
    }

}



/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none) {

    .hero:hover
    .hero-image img {
        transform:
            none;
    }


    .timezone-card:hover {
        transform:
            none;

        background:
            rgba(255,247,225,.105);
    }


    .roblox-button:hover {
        transform:
            none;

        background:
            rgba(255,250,238,.17);
    }

}