/*
  Pantalla de entrada. Al pulsar Ingresar la tarjeta se disuelve y, sobre
  un verde casi negro, el logo se construye como si se dibujara a mano:

    0,25 s  el trazo del emblema recorre su contorno
    1,25 s  el emblema se rellena y el trazo se apaga
    1,15 s  MANGORA aparece letra a letra, de desenfocada a nitida
    1,90 s  las dos rayas se abren hacia afuera
    2,00 s  PLATFORM se enciende letra a letra
    2,35 s  «Iniciando servicios», la linea de carga y el sello de seguridad

  Curvas suaves (entra rapido, se posa despacio) para que no parezca
  mecanico. La comparten el login del Super Admin (login.ts) y el de la app de
  clientes (ingresar.ts), que ponen la clase `entrando` y el sonido.
*/
.entrada{
    position:fixed;
    inset:0;
    z-index:50;
    display:grid;
    place-items:center;
    background:var(--entrada-fondo, #03140f);
    opacity:0;
    visibility:hidden;
    transition:opacity .5s ease, visibility 0s linear .5s;
}

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

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

/* Un brillo que florece una vez detras del logo */
.entrada-halo{
    position:absolute;
    top:-40px;
    left:50%;
    width:680px;
    height:300px;
    margin-left:-340px;
    background:radial-gradient(closest-side, rgba(52,211,153,.13), transparent);
    opacity:0;
    transform:scale(.6);
    pointer-events:none;
}

.entrando .entrada-halo{ animation:florecer 2.4s cubic-bezier(.16,1,.3,1) .9s forwards }

.entrada-marca{ position:relative; width:min(420px, 80vw) }

.trazo{ display:block; width:100%; height:auto; overflow:visible }

/* Un logo que es imagen (el de un socio): aparece de desenfocado a nitido */
.entrada-imagen{
    display:block;
    width:100%;
    height:auto;
    max-height:120px;
    object-fit:contain;
    opacity:0;
    transform:scale(.94);
    filter:blur(8px);
}

.entrando .entrada-imagen{
    transform-origin:50% 100%;
    animation:
        letra 1.2s cubic-bezier(.16,1,.3,1) .3s forwards,
        rebotar 1.3s cubic-bezier(.3,0,.3,1) 2.6s infinite;
}

/* El emblema: primero el contorno, luego el relleno */
.trazo-emblema{
    fill:#fff;
    fill-opacity:0;
    stroke:#fff;
    stroke-width:6;
    stroke-linejoin:round;
    stroke-dasharray:1;
    stroke-dashoffset:1;
}

.entrando .trazo-emblema{
    transform-box:fill-box;
    transform-origin:50% 100%;
    animation:
        dibujar 1.2s cubic-bezier(.65,0,.35,1) .25s forwards,
        rellenar .6s cubic-bezier(.4,0,.2,1) 1.25s forwards,
        rebotar 1.3s cubic-bezier(.3,0,.3,1) 2.6s infinite;
}

/* MANGORA, letra a letra */
.trazo-letra{
    fill:#fff;
    opacity:0;
    transform-box:fill-box;
    transform-origin:50% 100%;
    transform:translateY(14px);
    filter:blur(6px);
}

.entrando .trazo-letra{
    animation:letra .8s cubic-bezier(.16,1,.3,1) 1.15s forwards;
}

/* Las rayas se abren desde las letras hacia afuera */
.trazo-raya{
    fill:#fff;
    transform-box:fill-box;
    transform:scaleX(0);
}

.trazo-raya--izq{ transform-origin:100% 50% }
.trazo-raya--der{ transform-origin:0 50% }

.entrando .trazo-raya{ animation:abrir .7s cubic-bezier(.16,1,.3,1) 1.9s forwards }

/* PLATFORM */
.trazo-chica{ fill:#fff; opacity:0 }

.entrando .trazo-chica{
    animation:encender .5s ease 2s forwards;
}

/* El retraso de cada letra va por su posicion y no por un style="" en el
   SVG: la app de clientes prohibe estilos en linea (CSP con nonce). En el
   SVG la <path> 1 es el emblema, 2-8 MANGORA, 9-10 las rayas y 11-18
   PLATFORM. */
.entrando .trazo-letra:nth-of-type(2){ animation-delay:1.15s }
.entrando .trazo-letra:nth-of-type(3){ animation-delay:1.22s }
.entrando .trazo-letra:nth-of-type(4){ animation-delay:1.29s }
.entrando .trazo-letra:nth-of-type(5){ animation-delay:1.36s }
.entrando .trazo-letra:nth-of-type(6){ animation-delay:1.43s }
.entrando .trazo-letra:nth-of-type(7){ animation-delay:1.50s }
.entrando .trazo-letra:nth-of-type(8){ animation-delay:1.57s }
.entrando .trazo-chica:nth-of-type(11){ animation-delay:2.000s }
.entrando .trazo-chica:nth-of-type(12){ animation-delay:2.045s }
.entrando .trazo-chica:nth-of-type(13){ animation-delay:2.090s }
.entrando .trazo-chica:nth-of-type(14){ animation-delay:2.135s }
.entrando .trazo-chica:nth-of-type(15){ animation-delay:2.180s }
.entrando .trazo-chica:nth-of-type(16){ animation-delay:2.225s }
.entrando .trazo-chica:nth-of-type(17){ animation-delay:2.270s }
.entrando .trazo-chica:nth-of-type(18){ animation-delay:2.315s }


/* Debajo: el estado */
.entrada-estado{
    display:flex;
    flex-direction:column;
    align-items:center;
    margin-top:44px;
    opacity:0;
    transform:translateY(6px);
}

.entrando .entrada-estado{ animation:aparecer .7s cubic-bezier(.16,1,.3,1) 2.35s forwards }

.entrada-texto{
    margin:0;
    font-size:11.5px;
    font-weight:600;
    letter-spacing:.38em;
    text-indent:.38em;
    text-transform:uppercase;
    color:rgba(255,255,255,.9);
}

.puntos span{ animation:punto 1.4s ease-in-out infinite both }
.puntos span:nth-child(2){ animation-delay:.2s }
.puntos span:nth-child(3){ animation-delay:.4s }

/* Cargador circular: un anillo de luz que gira. El color corre de
   transparente a esmeralda, menta y turquesa y termina en una punta blanca
   brillante; un resplandor suave lo acompana. Es solo CSS sobre el <svg>
   (sus circulos quedan ocultos): el anillo es un degradado conico
   recortado con una mascara. */
.entrada-circulo{
    order:-1;
    width:46px;
    height:46px;
    margin-bottom:20px;
    border-radius:50%;
    background:conic-gradient(from 0deg,
        rgba(16,185,129,0) 0deg,
        rgba(16,185,129,.15) 60deg,
        #10b981 170deg,
        #34d399 240deg,
        #5eead4 300deg,
        #e0fff4 345deg,
        #ffffff 360deg);
    -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
    mask:radial-gradient(farthest-side, transparent calc(100% - 3.5px), #000 calc(100% - 3px));
    filter:drop-shadow(0 0 6px rgba(52,211,153,.55)) drop-shadow(0 0 14px rgba(94,234,212,.25));
    animation:girar 1.1s cubic-bezier(.5,.15,.5,.85) infinite;
}

.entrada-circulo circle{ display:none }

.entrada-sub{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin:14px 0 0;
    font-size:12px;
    letter-spacing:.02em;
    color:rgba(255,255,255,.5);
}

.entrada-sub .escudo{ width:14px; height:14px }

@keyframes dibujar{ to{ stroke-dashoffset:0 } }
@keyframes rellenar{ to{ fill-opacity:1; stroke-opacity:0 } }
@keyframes letra{ to{ opacity:1; transform:none; filter:blur(0) } }
@keyframes abrir{ to{ transform:none } }
@keyframes encender{ to{ opacity:1 } }
@keyframes aparecer{ to{ opacity:1; transform:none } }
@keyframes florecer{ 50%{ opacity:1 } to{ opacity:.7; transform:scale(1) } }
@keyframes girar{ to{ transform:rotate(360deg) } }
@keyframes arco{
    0%{ stroke-dasharray:1 100; stroke-dashoffset:0 }
    50%{ stroke-dasharray:60 100; stroke-dashoffset:-15 }
    100%{ stroke-dasharray:1 100; stroke-dashoffset:-99 }
}
/* Rebote con peso: sube, se estira, cae y se aplasta un instante. */
@keyframes rebotar{
    0%,100%{ transform:translateY(0) scale(1,1) }
    10%{ transform:translateY(0) scale(1.06,.94) }
    40%{ transform:translateY(-16%) scale(.97,1.04) }
    60%{ transform:translateY(-16%) scale(1,1) }
    88%{ transform:translateY(0) scale(1.07,.93) }
}
@keyframes punto{ 0%,80%,100%{ opacity:.15 } 40%{ opacity:1 } }

@media (prefers-reduced-motion:reduce){
    .entrando .trazo-emblema{ animation:none; stroke-dashoffset:0; fill-opacity:1; stroke-opacity:0 }
    .entrando .trazo-letra,
    .entrando .trazo-chica,
    .entrando .trazo-raya,
    .entrando .entrada-estado,
    .entrando .entrada-halo{ animation:none; opacity:1; transform:none; filter:none }
    .puntos span,
    .entrada-circulo,
    .entrada-circulo__arco{ animation:none }
}