/* =====================================================
   FILE: style.css
   ===================================================== */

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

body{
    font-family:'Montserrat',sans-serif;
    background:#050505;
    color:white;
}

/* loader */

.loader{
    position:fixed;
    width:100%;
    height:100%;
    background:#000000;
    display:flex;
    align-items:center;
    justify-content:center;
    animation:fadeOut 2s ease 2.5s forwards;
}

.loader-text{
    letter-spacing:10px;
    opacity:0;
    animation:fadeIn 2s forwards;
}

@keyframes fadeIn{to{opacity:1;}}
@keyframes fadeOut{to{opacity:0;visibility:hidden;}}

/* background lights */

.bg{
    position:fixed;
    width:200%;
    height:200%;
    background:
        radial-gradient(circle at 20% 30%, rgba(120,120,255,0.08), transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255,180,120,0.06), transparent 40%);
    animation:moveLights 30s infinite alternate ease-in-out;
    z-index:-1;
}

@keyframes moveLights{
    from{transform:translate(0,0);}
    to{transform:translate(-10%,-10%);}
}

/* content */

.container{text-align:center;padding-top:120px;}

.domain{
    font-size:2.4em;
    letter-spacing:8px;
}

.welcome-container{
    height:80px;
    overflow:hidden;
    margin:80px 0;
}

.welcome-scroll{
    animation:scrollWelcome 20s linear infinite;
}

@keyframes scrollWelcome{
    from{transform:translateY(100%);}
    to{transform:translateY(-100%);}
}

.countdown{font-size:2em;margin:40px 0;}

input{
    padding:12px;
    background:#111;
    color:white;
    border:none;
}

button{
    padding:12px 20px;
    background:white;
    color:black;
    border:none;
}

.success{color:#7CFF9E;}
.error{color:#FF7C7C;}

footer{
    margin-top:60px;
    opacity:.6;
    font-size:13px;
}

/* =============================
   FUTURISTIC SIGNAL
   ============================= */

.signal{
    position:fixed;
    right:40px;
    bottom:40px;
    width:18px;
    height:18px;
    border-radius:50%;
    background:rgba(180,180,255,0.95);
    box-shadow:0 0 20px rgba(180,180,255,0.7);
    animation:pulse 3s infinite;
    transition:0.3s;
}

@keyframes pulse{
    0%,100%{transform:scale(1);opacity:.9;}
    50%{transform:scale(1.6);opacity:.3;}
}

.signal span{
    position:absolute;
    right:32px;
    top:-3px;
    white-space:nowrap;
    opacity:0;
    font-size:14px;
    color:#e6e6ff;
    transition:0.3s;
}

.signal:hover span{
    opacity:1;
}

/* dropdown */
select {
    padding:10px 14px;
    border-radius:8px;
    border:none;
    background:#ffffff;
    color:#ffffff;
    backdrop-filter: blur(6px);
    cursor:pointer;
    font-size:15px;
}

/* dropdown lijst zelf */
select option {
    background:#1f2a38;
    color:#ffffff;
}