/* =========================================================
   The Gift Shop - Coming Soon
   Premium Luxury Theme
   Main Stylesheet
========================================================= */

/* -------------------- RESET -------------------- */

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

html{
    scroll-behavior:smooth;
}

body{

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

    background:#000;

    color:#ffffff;

    overflow:hidden;

    width:100%;

    height:100vh;

}

/* -------------------- VIDEO -------------------- */

#bg-video{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    object-fit:cover;

    z-index:-3;

}

/* -------------------- DARK OVERLAY -------------------- */

.overlay{

    position:fixed;

    inset:0;

    background:
        linear-gradient(
            rgba(0,0,0,.78),
            rgba(0,0,0,.78)
        );

    z-index:-2;

}

/* -------------------- PARTICLES -------------------- */

#particles{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    z-index:-1;

}

/* -------------------- LOADER -------------------- */

#loader{

    position:fixed;

    inset:0;

    background:#000;

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.loader-logo{

    width:140px;

    height:140px;

    border-radius:50%;

    border:2px solid rgba(212,175,55,.4);

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:36px;

    font-weight:700;

    color:#D4AF37;

    letter-spacing:5px;

    box-shadow:

    0 0 40px rgba(212,175,55,.45);

}

/* -------------------- HEADER -------------------- */

header{

    position:absolute;

    top:35px;

    left:70px;

    z-index:10;

}

.logo{

    display:flex;

    align-items:center;

    gap:18px;

}

.logo img{

    width:70px;

    height:70px;

    object-fit:contain;

}

.logo h2{

    color:white;

    font-size:28px;

    font-weight:700;

    letter-spacing:2px;

}

/* -------------------- HERO -------------------- */

.hero{

    width:100%;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:30px;

}

/* -------------------- GLASS CARD -------------------- */

.glass-card{

    width:760px;

    max-width:95%;

    padding:70px;

    border-radius:30px;

    text-align:center;

    backdrop-filter:blur(18px);

    background:

        rgba(255,255,255,.07);

    border:

        1px solid rgba(255,255,255,.12);

    box-shadow:

        0 30px 80px rgba(0,0,0,.50);

}

/* -------------------- SMALL TITLE -------------------- */

.glass-card h3{

    color:#D4AF37;

    text-transform:uppercase;

    letter-spacing:8px;

    font-size:15px;

    margin-bottom:25px;

}

/* -------------------- MAIN TITLE -------------------- */

.glass-card h1{

    font-size:58px;

    font-weight:800;

    line-height:1.15;

    margin-bottom:25px;

}

/* -------------------- DESCRIPTION -------------------- */

.glass-card p{

    color:#d7d7d7;

    font-size:18px;

    line-height:34px;

    margin-bottom:45px;

}

/* -------------------- COUNTDOWN -------------------- */

.countdown{

    display:flex;

    justify-content:center;

    gap:22px;

    margin-bottom:45px;

}

.time-box{

    width:120px;

    padding:24px 10px;

    border-radius:18px;

    background:

        rgba(255,255,255,.08);

    border:

        1px solid rgba(212,175,55,.25);

}

.time-box span{

    display:block;

    font-size:44px;

    font-weight:700;

    color:#ffffff;

}

.time-box small{

    color:#D4AF37;

    font-size:14px;

    letter-spacing:2px;

    text-transform:uppercase;

}

/* -------------------- EMAIL -------------------- */

#notify-form{

    display:flex;

    justify-content:center;

    margin-bottom:45px;

}

#notify-form input{

    width:360px;

    height:60px;

    border:none;

    outline:none;

    padding-left:25px;

    font-size:16px;

    border-radius:50px 0 0 50px;

    background:#fff;

}

#notify-form button{

    width:180px;

    border:none;

    cursor:pointer;

    background:#D4AF37;

    color:#000;

    font-weight:700;

    font-size:16px;

    border-radius:0 50px 50px 0;

    transition:.35s;

}

#notify-form button:hover{

    background:white;

}

/* -------------------- SOCIAL -------------------- */

.social{

    display:flex;

    justify-content:center;

    gap:18px;

}

.social a{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:#fff;

    font-size:20px;

    background:

        rgba(255,255,255,.08);

    transition:.35s;

}

.social a:hover{

    background:#D4AF37;

    color:#000;

    transform:translateY(-6px);

}

/* -------------------- MUSIC -------------------- */

#music-btn{

    position:fixed;

    top:35px;

    right:60px;

    border:none;

    outline:none;

    cursor:pointer;

    padding:14px 26px;

    border-radius:40px;

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

    color:white;

    backdrop-filter:blur(10px);

    font-size:15px;

    transition:.3s;

}

#music-btn:hover{

    background:#D4AF37;

    color:#000;

}

/* -------------------- WHATSAPP -------------------- */

.whatsapp{

    position:fixed;

    right:35px;

    bottom:35px;

    width:70px;

    height:70px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:34px;

    text-decoration:none;

    box-shadow:

    0 15px 40px rgba(37,211,102,.45);

    transition:.35s;

}

.whatsapp:hover{

    transform:scale(1.12);

}

/* -------------------- FOOTER -------------------- */

footer{

    position:fixed;

    bottom:20px;

    width:100%;

    text-align:center;

    color:#bbb;

    font-size:14px;

    letter-spacing:1px;

}

/* -------------------- GOLD GLOW -------------------- */

.gold-glow{

    color:#D4AF37;

    text-shadow:

    0 0 10px rgba(212,175,55,.5),

    0 0 25px rgba(212,175,55,.4),

    0 0 45px rgba(212,175,55,.35);

}

/* -------------------- CUSTOM SCROLLBAR -------------------- */

::-webkit-scrollbar{

    width:8px;

}

::-webkit-scrollbar-track{

    background:#000;

}

::-webkit-scrollbar-thumb{

    background:#D4AF37;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#f1d26a;

}

/* ==========================================
   Premium Custom Cursor
========================================== */

body{
    cursor:none;
}

.cursor-dot{

    position:fixed;

    width:8px;
    height:8px;

    border-radius:50%;

    background:#D4AF37;

    pointer-events:none;

    z-index:999999;

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

.cursor-outline{

    position:fixed;

    width:42px;
    height:42px;

    border-radius:50%;

    border:2px solid rgba(212,175,55,.65);

    pointer-events:none;

    z-index:999998;

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

    transition:
        width .25s,
        height .25s,
        border-color .25s,
        background .25s;
}

.cursor-hover{

    width:70px !important;
    height:70px !important;

    border-color:#ffffff;

    background:rgba(212,175,55,.12);

}