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

body{
    overflow:hidden;
    font-family:'Poppins', sans-serif;
}

.intro{
    position:relative;
    width:100%;
    height:100vh;
}

video{
    position:absolute;
    width:auto;
    height:100vh;
    object-fit:cover;
    left: 50%;
    top: 50%;
    translate: -50% -50%
}

.overlay{
    position:absolute;
    inset:0;
    background:rgba(0, 0, 0, 0);
}

.content{
    position:absolute;
    inset:0;
    display:flex;
    justify-content:center;
    align-items:center;
}

h1{
    color:white;
    font-size:clamp(2.5rem,7vw,6rem);
    font-weight:700;
    letter-spacing:5px;
    text-transform:uppercase;
    opacity:0;
    transform:translateY(50px);
}

h1.show{
    animation:showText 1.5s ease forwards;
}

@keyframes showText{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.title{
    color:white;
    font-size:6vw;
    font-weight:bold;
}

.title span{
    display:inline-block;
    opacity:0;
    transform:translateY(80px);
    animation:letter .7s forwards;
}

.title span:nth-child(1){animation-delay:.1s;}
.title span:nth-child(2){animation-delay:.2s;}
.title span:nth-child(3){animation-delay:.3s;}
.title span:nth-child(4){animation-delay:.4s;}
.title span:nth-child(5){animation-delay:.5s;}
.title span:nth-child(6){animation-delay:.6s;}
.title span:nth-child(7){animation-delay:.7s;}
.title span:nth-child(8){animation-delay:.8s;}
.title span:nth-child(9){animation-delay:.9s;}
.title span:nth-child(10){animation-delay:1s;}
.title span:nth-child(11){animation-delay:1.1s;}
.title span:nth-child(12){animation-delay:1.2s;}
.title span:nth-child(13){animation-delay:1.3s;}
.title span:nth-child(14){animation-delay:1.4s;}
.title span:nth-child(15){animation-delay:1.5s;}
.title span:nth-child(16){animation-delay:1.6s;}
.title span:nth-child(17){animation-delay:1.7s;}

@keyframes letter{
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.button-container{
    position:absolute;
    bottom:80px;
    left:50%;
    transform:translateX(-50%);
}

.enter-btn{
    display:inline-block;
    padding:18px 45px;
    text-decoration:none;
    font-size:1.2rem;
    font-weight:600;
    color:rgb(47, 74, 155);

    background:linear-gradient(to top,#d0f1ff,#e2f6ff70);

    border-radius:50px;

    box-shadow:
        0 10px 30px rgba(255,77,109,.4),
        inset 0 0 10px rgba(255,255,255,.3);

    transition:.4s;

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

.enter-btn:hover{
    transform:scale(1.08);

    box-shadow:
        0 15px 40px rgba(3, 25, 62, 0.7),
        0 0 30px rgba(77, 92, 255, 0.8);
}

@keyframes float{

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

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

}


/* HOME */

*{
    margin: 0;
    padding: 0;
}

.hero{
    width: auto;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0;
    overflow: hidden;
    
}

.hero-video{
    width: auto;
    height: 100vh;
}

@media(min-width:1000px){
    .hero{
        width: 100%;
        height: auto;
    }
    .hero-video{
        width: 100%;
        height: auto;
    }
}

/* LED Banner */
.led-banner{
    width:100%;
    height:80px;
    overflow:hidden;
    background:#09304b;
    border-top:3px solid #00d9ff;
    border-bottom:3px solid #00d9ff;
    position:relative;
    display:flex;
    align-items:center;
}

/* Scrolling track */
.led-track{
    display:flex;
    width:max-content;
    animation:scrollLED 15s linear infinite;
}

/* Item */
.led-item{
    display:flex;
    align-items:center;
    gap:20px;
    padding-right:120px;
    white-space:nowrap;
}

/* Ice image */
.led-item img{
    width:50px;
    height:50px;
    object-fit:contain;

    filter:
        drop-shadow(0 0 5px #00ffff)
        drop-shadow(0 0 15px #00ffff);
}

/* LED text */
.led-item span{
    font-family:Arial, sans-serif;
    font-size:2rem;
    font-weight:bold;
    letter-spacing:4px;
    color:#00ffff;

    text-shadow:
        0 0 5px #00ffff,
        0 0 10px #00ffff,
        0 0 20px #00ffff,
        0 0 40px #00ffff;
}

/* Scroll Animation */
@keyframes scrollLED{
    from{
        transform:translateX(0);
    }
    to{
        transform:translateX(-50%);
    }
}