/*
  Intro del Super Admin de NSM. Cuando el servidor ya dejo entrar, la
  tarjeta se disuelve y, sobre el verde de la marca, se marca San Martin en
  el mapa. Todo con movimientos cortos y curvas suaves, que se solapan,
  para que se sienta natural y no mecanico:

    0,20 s  el pin baja un poco y se posa (0,95 s) con un leve asentamiento
    0,85 s  la onda de ubicacion respira en el suelo
    0,95 s  N, S y M suben y se enfocan, una tras otra
    1,50 s  debajo, Tarapoto – año (el año lo pone acceso.ts)
    1,90 s  una luz pasa una sola vez por el logo

  Solo el logo: sin textos ni barra de carga.

  El logo es nsm-logo-blanco.png (900x373) recortado en piezas con
  background-position: pin x0-300, N 306-504, S 504-667, M 667-891, letras
  y117-318. Los porcentajes de abajo salen de esas medidas.
  acceso.ts pone la clase `entrando` en <body> y el sonido.
*/
.entrada{
    position:fixed;
    inset:0;
    z-index:50;
    display:grid;
    place-items:center;
    overflow:hidden;
    background:#00432a;
    opacity:0;
    visibility:hidden;
    transition:opacity .6s ease, visibility 0s linear .6s;
}

.entrando .entrada{
    opacity:1;
    visibility:visible;
    transition:opacity .6s ease;
}

.entrada-centro{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:0 24px;
}

/* El logo armado por piezas */
.marca{
    position:relative;
    width:min(440px, 80vw);
    aspect-ratio:900 / 373;
}

.pieza{
    position:absolute;
    background-image:url("/static/img/nsm-logo-blanco.png");
    background-repeat:no-repeat;
}

.pieza-pin{
    left:0;
    top:0;
    width:33.3333%;
    height:100%;
    background-size:300% 100%;
    background-position:0 0;
    opacity:0;
    transform-origin:50% 96.8%;
    filter:drop-shadow(0 6px 12px rgba(0,0,0,.22));
}

.pieza-letra{
    top:31.367%;
    height:53.887%;
    opacity:0;
    filter:blur(6px);
    transform:translateY(10px);
}

.pieza-n{ left:34%;     width:22%;     background-size:454.545% 185.572%; background-position:43.590% 68.023% }
.pieza-s{ left:56%;     width:18.111%; background-size:552.147% 185.572%; background-position:68.385% 68.023% }
.pieza-m{ left:74.111%; width:24.889%; background-size:401.786% 185.572%; background-position:98.669% 68.023% }

.entrando .pieza-pin{ animation:posarse 1.1s linear .2s forwards }

.entrando .pieza-letra{ animation:enfocar-letra 1s cubic-bezier(.22,1,.36,1) forwards }
.entrando .pieza-n{ animation-delay:.95s }
.entrando .pieza-s{ animation-delay:1.05s }
.entrando .pieza-m{ animation-delay:1.15s }

/* La sombra del pin en el suelo: se concentra mientras baja */
.marca-sombra{
    position:absolute;
    left:16.667%;
    top:96.8%;
    width:24%;
    height:7%;
    margin-left:-12%;
    margin-top:-3.5%;
    border-radius:50%;
    background:radial-gradient(closest-side, rgba(0,0,0,.5), transparent);
    opacity:0;
    transform:scale(.6);
}

.entrando .marca-sombra{ animation:sombra 1.1s cubic-bezier(.22,1,.36,1) .2s forwards }

/* La onda de ubicacion: un anillo tenue, aplastado (el suelo en perspectiva) */
.marca-onda{
    position:absolute;
    left:16.667%;
    top:96.8%;
    width:30%;
    aspect-ratio:1;
    margin-left:-15%;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.35);
    opacity:0;
    transform:translateY(-50%) scale(.2, .07);
    pointer-events:none;
}

.entrando .marca-onda{ animation:onda 3.2s cubic-bezier(.25,.6,.3,1) .85s infinite }
.entrando .marca-onda--2{ animation-delay:2.45s }

/* La luz: pasa una sola vez y solo se ve sobre el logo (mascara) */
.marca-brillo{
    position:absolute;
    inset:0;
    background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.45) 50%, transparent 62%);
    background-size:320% 100%;
    background-position:110% 0;
    -webkit-mask:url("/static/img/nsm-logo-blanco.png") 0 0 / 100% 100% no-repeat;
    mask:url("/static/img/nsm-logo-blanco.png") 0 0 / 100% 100% no-repeat;
    opacity:0;
    pointer-events:none;
}

.entrando .marca-brillo{ animation:luz 1.6s cubic-bezier(.45,0,.25,1) 1.9s forwards }

/* Tarapoto – año, debajo del logo: aparece cuando ya estan las letras */
.entrada-lugar{
    margin:30px 0 0;
    font-size:15px;
    font-weight:500;
    letter-spacing:.02em;
    color:rgba(255,255,255,.72);
    opacity:0;
    transform:translateY(6px);
}

.entrando .entrada-lugar{ animation:lugar .9s cubic-bezier(.22,1,.36,1) 1.5s forwards }

@keyframes lugar{ to{ opacity:1; transform:none } }

/* El pin baja poco, frena solo y se asienta con un gesto apenas visible */
@keyframes posarse{
    0%{ opacity:0; transform:translateY(-28%); animation-timing-function:cubic-bezier(.22,1,.36,1) }
    35%{ opacity:1 }
    68%{ transform:translateY(1.5%) scale(1.012,.988); animation-timing-function:cubic-bezier(.45,0,.55,1) }
    100%{ opacity:1; transform:none }
}
@keyframes sombra{
    0%{ opacity:0; transform:scale(.6) }
    100%{ opacity:.75; transform:scale(1) }
}
@keyframes onda{
    0%{ opacity:0; transform:translateY(-50%) scale(.2, .07) }
    15%{ opacity:.9 }
    100%{ opacity:0; transform:translateY(-50%) scale(2.6, .85) }
}
@keyframes enfocar-letra{ to{ opacity:1; filter:blur(0); transform:none } }
@keyframes luz{
    0%{ opacity:0; background-position:110% 0 }
    20%{ opacity:1 }
    80%{ opacity:1 }
    100%{ opacity:0; background-position:-10% 0 }
}


@media (prefers-reduced-motion:reduce){
    .entrando .pieza-pin,
    .entrando .pieza-letra,
    .entrando .marca-sombra,
    .entrando .entrada-lugar{
        animation:none;
        opacity:1;
        transform:none;
        filter:none;
    }
    .entrando .marca-sombra{ opacity:.75 }
    .entrando .marca-onda,
    .entrando .marca-brillo{ animation:none; opacity:0 }
}