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

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

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

body{

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

    background:#04070b;

    color:#fff;

    overflow:hidden;

    position:relative;

}

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

.background{

    position:fixed;

    inset:0;

    background-image:
        linear-gradient(rgba(5,8,15,.25),rgba(4,6,12,.78)),
        url("https://i.postimg.cc/9XfVDj9x/image-(2).jpg");

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

    filter:blur(5px);

    transform:scale(1.08);

    z-index:-5;

}

.overlay{

    position:fixed;

    inset:0;

    background:

    radial-gradient(circle at center,

    transparent 30%,

    rgba(0,0,0,.58));

    z-index:-4;

}

/* ===========================================
   LIGHTING
=========================================== */

.top-light{

    position:fixed;

    top:-300px;

    left:50%;

    transform:translateX(-50%);

    width:900px;

    height:700px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(150,220,255,.18),

    transparent 70%);

    filter:blur(90px);

    pointer-events:none;

}

.left-glow{

    position:fixed;

    left:-180px;

    top:50%;

    transform:translateY(-50%);

    width:520px;

    height:520px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(90,205,255,.18),

    transparent 72%);

    filter:blur(80px);

    pointer-events:none;

}

/* ===========================================
   LAYOUT
=========================================== */

.container{

    width:min(1450px,92%);

    height:100vh;

    margin:auto;

    display:grid;

    grid-template-columns:

    530px
    1fr;

    gap:90px;

    align-items:center;

}

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

.left{

    display:flex;

    justify-content:center;

    align-items:center;

    position:relative;

}

.cover-glow{

    position:absolute;

    width:560px;

    height:560px;

    border-radius:50%;

    background:

    radial-gradient(circle,

    rgba(110,215,255,.20),

    transparent 72%);

    filter:blur(70px);

}

.cover{

    width:510px;

    display:block;

    border-radius:24px;

    box-shadow:

    0 45px 120px rgba(0,0,0,.55);

    transition:

    transform .45s ease,

    box-shadow .45s ease;

}

.cover:hover{

    transform:translateY(-6px);

    box-shadow:

    0 60px 140px rgba(0,0,0,.65),

    0 0 40px rgba(110,215,255,.15);

}

/* ===========================================
   RIGHT SIDE
=========================================== */

.right{

    display:flex;

    flex-direction:column;

    justify-content:center;

    max-width:680px;

}

.artist{

    font-size:13px;

    letter-spacing:10px;

    font-weight:700;

    color:#83bfff;

    margin-bottom:18px;

}

.title{

    font-size:46px;

    line-height:.9;

    font-weight:900;

    letter-spacing:-4px;

    margin-bottom:26px;

    background:

    linear-gradient(

    180deg,

    #ffffff,

    #edf5ff 40%,

    #c6d7e8 70%,

    #ffffff);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    text-shadow:

    0 0 20px rgba(255,255,255,.08),

    0 0 40px rgba(140,220,255,.12);

}

.release-text{

    font-size:13px;

    letter-spacing:5px;

    color:#8fbfff;

    margin-bottom:10px;

}

.countdown{

    font-size:42px;

    font-weight:800;

    color:#79bcff;

    margin-bottom:18px;

}

.divider{

    width:170px;

    height:1px;

    border-radius:30px;

    margin-bottom:38px;

    background:

    linear-gradient(

    90deg,

    #62b0ff,

    transparent);

}

/* ===========================================
   TRACKLIST
=========================================== */

.tracks{

    display:flex;
    flex-direction:column;

    width:100%;

    margin-bottom:50px;

}

.track{

    display:flex;

    align-items:center;

    gap:22px;

    padding:18px 0;

    border-bottom:1px solid rgba(255,255,255,.08);

    transition:
    transform .35s ease,
    border-color .35s ease;

}

.track:last-child{

    border-bottom:none;

}

.track:hover{

    transform:translateX(10px);

    border-color:

    rgba(120,220,255,.25);

}

.track span{

    width:40px;

    color:#69b3ff;

    font-size:15px;

    font-weight:700;

}

.track p{

    font-size:19px;

    font-weight:600;

    letter-spacing:.3px;

}

/* ===========================================
   BUTTON
=========================================== */

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:240px;

    height:58px;

    border-radius:999px;

    text-decoration:none;

    color:white;

    font-weight:700;

    letter-spacing:1px;

    background:

    linear-gradient(
    180deg,
    rgba(255,255,255,.10),
    rgba(255,255,255,.05));

    border:

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

    backdrop-filter:blur(20px);

    transition:

    transform .35s ease,
    background .35s ease,
    box-shadow .35s ease;

    overflow:hidden;

    position:relative;

}

.button::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:80%;

    height:100%;

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.22),
    transparent);

    transition:left .8s ease;

}

.button:hover::before{

    left:140%;

}

.button:hover{

    transform:translateY(-4px);

    background:

    rgba(120,220,255,.12);

    box-shadow:

    0 0 40px rgba(120,220,255,.18);

}

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

.background{

    animation:bgFloat 30s ease-in-out infinite alternate;

}

@keyframes bgFloat{

    from{

        transform:
        scale(1.08)
        translateX(0px)
        translateY(0px);

    }

    to{

        transform:
        scale(1.12)
        translateX(-18px)
        translateY(-10px);

    }

}

.container{

    animation:fadeIn 1.2s cubic-bezier(.22,1,.36,1);

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:
        translateY(25px);

    }

    to{

        opacity:1;

        transform:none;

    }

}

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

@media (max-width:1150px){

    body{

        overflow:auto;

    }

    .container{

        grid-template-columns:1fr;

        gap:70px;

        padding:70px 0;

        height:auto;

    }

    .right{

        align-items:center;

        text-align:center;

        max-width:100%;

    }

    .title{

        font-size:68px;

    }

    .divider{

        margin-left:auto;
        margin-right:auto;

    }

    .track{

        justify-content:center;

    }

}

@media (max-width:700px){

    .cover{

        width:88vw;

        max-width:370px;

    }

    .title{

        font-size:50px;

    }

    .countdown{

        font-size:42px;

    }

    .track p{

        font-size:17px;

    }

    .button{

        width:100%;

    }

}

.section-title{

    font-size:13px;

    letter-spacing:5px;

    font-weight:700;

    color:#8fbfff;

    margin-bottom:18px;

    text-transform:uppercase;

}

.grain-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('grain.gif');
  opacity: 0.05;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 9999;
}

.countdown{
    display:flex;
    gap:18px;
    margin-bottom:32px;
}

.time-box{

    width:95px;
    height:95px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    border-radius:20px;

    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(20px);

    box-shadow:
        0 0 30px rgba(120,220,255,.08);
}

.time-box span{

    font-size:34px;
    font-weight:800;
    color:#7bc2ff;
    line-height:1;
}

.time-box small{

    margin-top:8px;

    font-size:11px;
    letter-spacing:2px;
    color:#9fcfff;
}

/* ===========================
   OUT NOW
=========================== */

.out-now{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:35px;

    color:#9bd3ff;

    letter-spacing:3px;

    font-size:13px;

    font-weight:700;

}

.live-dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:#4fd8ff;

    box-shadow:

        0 0 18px #4fd8ff;

    animation:pulse 1.8s infinite;

}

@keyframes pulse{

0%{

transform:scale(1);

opacity:1;

}

50%{

transform:scale(1.35);

opacity:.6;

}

100%{

transform:scale(1);

opacity:1;

}

}