@font-face {
  font-family: 'Smoo-thin';
  src: url('./SmoochSans-Thin.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

*{
    box-sizing:border-box;
}

html,body{
    height:100%;
}

body{
    margin:0;
    background:#000;
    overflow:hidden;
}

.bg-video{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:0;
}

/* oscurece el video para que el logo y el aviso respiren */
.velo{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.45);
    z-index:1;
}

.proxi{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:18px;
    padding:0 8vw;
    text-align:center;

    opacity:0;
    animation:aparecer 1.6s ease forwards;
}

.logo{
    width:min(300px, 60vw);
    height:auto;
}

.aviso{
    margin:0;
    position: absolute;
    bottom: 10%;
    font-family:'Smoo-thin', sans-serif;
    font-weight:normal;
    font-size:clamp(1.5rem, 6vw, 2rem);
    line-height:1;
    color:#fff;
    letter-spacing:6px;
    text-transform:uppercase;
}

.estacion-glories{
    position:fixed;
    right:3vw;
    bottom:2vh;
    width:max-content;
    font-family:'Smoo-thin', sans-serif;
    font-size:.8rem;
    color:#fff;
    letter-spacing:2px;
    z-index:20;
    display: none;
}

@keyframes aparecer{
    from{ opacity:0; transform:translateY(12px); }
    to  { opacity:1; transform:translateY(0); }
}

@media (min-width: 768px) {
    .proxi{
        gap:28px;
    }
    .aviso{
        font-size:clamp(2rem, 4vw, 3.8rem);
        letter-spacing:10px;
    }
    .estacion-glories{
        display: block;
        font-size:1rem;
    }
}