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

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html,
body {
    width: 100%;
    height: 100%;
}


body {
    overflow: hidden;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background: #000;
}


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

.hero {
    position: relative;

    width: 100%;
    height: 100vh;

    /* DESKTOP BACKGROUND */
    background-image: url("image/save.png");

    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;

    overflow: hidden;
}


/* ========================================
   DARK OVERLAY
======================================== */

.hero::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.03),
            rgba(0, 0, 0, 0.20)
        );

    z-index: 1;

    pointer-events: none;
}


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

.content {
    position: relative;

    z-index: 10;

    width: 100%;
    height: 100%;

    display: flex;

    justify-content: center;

    align-items: flex-end;

    padding-bottom: 80px;
}


/* ========================================
   COMING CONTENT
   SLOW + SMOOTH TOP TO BOTTOM
======================================== */

.coming-content {
    text-align: center;

    opacity: 0;

    animation:
        comingDrop
        3.8s
        cubic-bezier(0.16, 1, 0.3, 1)
        forwards;
}


/* ========================================
   GOLD DIVIDER
======================================== */

.divider {
    width: 200px;
    height: 2px;

    margin: 0 auto 25px;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            #806000 15%,
            #c99b1a 30%,
            #fff2a6 50%,
            #d4af37 70%,
            #806000 85%,
            transparent 100%
        );

    box-shadow:
        0 0 6px rgba(255, 215, 80, 0.8),
        0 0 18px rgba(212, 175, 55, 0.55);

    animation:
        dividerGlow
        3s
        ease-in-out
        infinite alternate;
}


/* ========================================
   COMING SOON
   CLEAN METALLIC GOLD
   NO TEXT SHADOW
======================================== */

h1 {
    position: relative;

    font-size:
        clamp(
            45px,
            5vw,
            90px
        );

    font-weight: 900;

    letter-spacing: 8px;

    line-height: 1;

    white-space: nowrap;


    /* METALLIC GOLD */

    background:
        linear-gradient(
            180deg,

            #fff9c4 0%,

            #fff0a0 12%,

            #f5d76e 25%,

            #d4af37 42%,

            #9c7200 55%,

            #c99a18 68%,

            #f5d76e 82%,

            #fff4a8 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;


    /* NO TEXT SHADOW */

    text-shadow: none;

    filter: none;

    animation: none;
}


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

h1 span {

    background:
        linear-gradient(
            180deg,

            #fffbd5 0%,

            #ffe98a 15%,

            #f5d76e 30%,

            #d4af37 45%,

            #9c7200 60%,

            #c99a18 72%,

            #f8dd76 87%,

            #fff5ad 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;

    text-shadow: none;

    filter: none;
}


/* ========================================
   DEVELOPED BY
======================================== */

.developer {

    display: inline-block;

    margin-top: 22px;

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

    font-size: 13px;

    font-weight: 400;

    letter-spacing: 2px;

    text-decoration: none;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}


.developer strong {

    color: #00d9ff;

    font-weight: 600;

    transition:
        color 0.3s ease;
}


/* Hover */

.developer:hover {

    color: #ffffff;

    transform:
        translateY(-2px);
}


.developer:hover strong {

    color: #ffd75a;
}


/* ========================================
   AMBIENT GLOW
======================================== */

.glow {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

    filter: blur(100px);

    z-index: 2;
}


/* Blue Glow */

.glow-blue {

    width: 350px;
    height: 350px;

    left: -100px;
    top: 20%;

    background:
        rgba(0, 140, 255, 0.20);

    animation:
        floatBlue
        7s
        ease-in-out
        infinite;
}


/* Purple Glow */

.glow-purple {

    width: 400px;
    height: 400px;

    right: -120px;
    bottom: 10%;

    background:
        rgba(140, 0, 255, 0.18);

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


/* Center Glow */

.glow-center {

    width: 300px;
    height: 300px;

    left: 50%;
    top: 50%;

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

    background:
        rgba(0, 210, 255, 0.06);

    filter: blur(120px);

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


/* ========================================
   PARTICLES
======================================== */

.particles {

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;
}


.particles span {

    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 0 8px #00d9ff,
        0 0 15px #00d9ff;

    opacity: 0.7;

    animation:
        particleFloat
        5s
        ease-in-out
        infinite;
}


/* ========================================
   PARTICLE POSITIONS
======================================== */

.particles span:nth-child(1) {
    left: 10%;
    top: 25%;
}

.particles span:nth-child(2) {
    left: 20%;
    top: 70%;
    animation-delay: 1s;
}

.particles span:nth-child(3) {
    left: 32%;
    top: 35%;
    animation-delay: 2s;
}

.particles span:nth-child(4) {
    left: 45%;
    top: 20%;
    animation-delay: 0.5s;
}

.particles span:nth-child(5) {
    left: 55%;
    top: 65%;
    animation-delay: 1.5s;
}

.particles span:nth-child(6) {
    left: 67%;
    top: 30%;
    animation-delay: 2.5s;
}

.particles span:nth-child(7) {
    left: 75%;
    top: 75%;
    animation-delay: 1s;
}

.particles span:nth-child(8) {
    left: 85%;
    top: 40%;
    animation-delay: 2s;
}

.particles span:nth-child(9) {
    left: 92%;
    top: 65%;
    animation-delay: 0.5s;
}

.particles span:nth-child(10) {
    left: 15%;
    top: 50%;
    animation-delay: 3s;
}

.particles span:nth-child(11) {
    left: 38%;
    top: 80%;
    animation-delay: 2s;
}

.particles span:nth-child(12) {
    left: 80%;
    top: 20%;
    animation-delay: 1s;
}


/* ========================================
   SLOW + SMOOTH DROP ANIMATION
======================================== */

@keyframes comingDrop {

    /* Start high above */
    0% {
        opacity: 0;

        transform:
            translateY(-300px);
    }


    /* Slowly starts coming down */
    25% {
        opacity: 0.15;

        transform:
            translateY(-245px);
    }


    /* Middle */
    50% {
        opacity: 0.5;

        transform:
            translateY(-120px);
    }


    /* Near final position */
    75% {
        opacity: 0.9;

        transform:
            translateY(-25px);
    }


    /* Soft settle */
    90% {
        opacity: 1;

        transform:
            translateY(5px);
    }


    /* Final position */
    100% {
        opacity: 1;

        transform:
            translateY(0);
    }
}


/* ========================================
   DIVIDER ANIMATION
======================================== */

@keyframes dividerGlow {

    from {

        opacity: 0.55;

        transform:
            scaleX(0.85);
    }

    to {

        opacity: 1;

        transform:
            scaleX(1);
    }
}


/* ========================================
   BLUE GLOW ANIMATION
======================================== */

@keyframes floatBlue {

    0%,
    100% {

        transform:
            translate(0, 0);
    }

    50% {

        transform:
            translate(50px, -30px);
    }
}


/* ========================================
   PURPLE GLOW ANIMATION
======================================== */

@keyframes floatPurple {

    0%,
    100% {

        transform:
            translate(0, 0);
    }

    50% {

        transform:
            translate(-50px, -40px);
    }
}


/* ========================================
   CENTER GLOW ANIMATION
======================================== */

@keyframes centerPulse {

    0%,
    100% {

        opacity: 0.4;

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

    50% {

        opacity: 0.8;

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


/* ========================================
   PARTICLE ANIMATION
======================================== */

@keyframes particleFloat {

    0%,
    100% {

        transform:
            translateY(0);

        opacity: 0.3;
    }

    50% {

        transform:
            translateY(-25px);

        opacity: 1;
    }
}


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

@media (max-width: 768px) {

    .hero {

        /* MOBILE BACKGROUND */

        background-image:
            url("image/mobile.png");

        background-position:
            center center;

        background-size:
            cover;
    }


    .content {

        padding-bottom: 55px;
    }


    .coming-content {

        width: 100%;

        padding:
            0 20px;
    }


    /* Mobile Divider */

    .divider {

        width: 120px;

        height: 2px;

        margin-bottom: 18px;
    }


    /* Mobile Heading */

    h1 {

        font-size:
            clamp(
                34px,
                11vw,
                55px
            );

        letter-spacing: 4px;

        white-space: normal;

        line-height: 1.05;
    }


    /* Mobile Developer */

    .developer {

        font-size: 11px;

        letter-spacing: 1.5px;

        margin-top: 16px;
    }


    /* Mobile Glows */

    .glow-blue {

        width: 220px;
        height: 220px;
    }


    .glow-purple {

        width: 220px;
        height: 220px;
    }


    .glow-center {

        width: 220px;
        height: 220px;
    }
}


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

@media (max-width: 480px) {

    .content {

        padding-bottom: 40px;
    }


    h1 {

        font-size: 38px;

        letter-spacing: 3px;
    }


    .developer {

        font-size: 10px;

        letter-spacing: 1px;
    }


    .divider {

        width: 100px;
    }
}


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

@media (max-width: 360px) {

    h1 {

        font-size: 32px;

        letter-spacing: 2px;
    }


    .developer {

        font-size: 9px;
    }
}