/*
 * Animaciones del sitio ETnet (solo CSS + SVG; ningún JavaScript anima nada).
 * Reglas heredadas de la intranet: el armado del logo dura 1,4 s (< 1,5 s), nunca bloquea el uso,
 * y con prefers-reduced-motion: reduce no se anima nada (bloque final).
 */

/* Las piezas del logo se transforman respecto de su propia caja. */
.pieza {
    transform-box: fill-box;
}

/* ---------- 1. Héroe: el isotipo se arma y "net" se escribe (0 a 1,4 s) ---------- */
.js .logo-animado .pieza-barra-superior,
.js .logo-animado .pieza-palo-t,
.js .logo-animado .pieza-barra-media,
.js .logo-animado .pieza-linea-fina {
    transform-origin: center;
    animation-name: brotar-pieza;
    animation-timing-function: var(--curva-resorte);
    animation-fill-mode: both;
}
.js .logo-animado .pieza-barra-superior {
    animation-duration: 380ms;
    animation-delay: 0ms;
}
.js .logo-animado .pieza-palo-t {
    animation-duration: 420ms;
    animation-delay: 140ms;
}
.js .logo-animado .pieza-barra-media {
    animation-duration: 360ms;
    animation-delay: 480ms;
}
.js .logo-animado .pieza-linea-fina {
    animation-duration: 320ms;
    animation-delay: 600ms;
}
.js .logo-animado .trazo-arco {
    animation: dibujar-arco 620ms var(--curva-trazo) 200ms both;
}
.js .logo-animado .barrido-net {
    animation: escribir-net 620ms var(--curva-trazo) 700ms both;
}
.js .logo-animado .pieza-ingenieria {
    animation: aparecer-texto 360ms var(--curva-armado) 1040ms both;
}

@keyframes brotar-pieza {
    from {
        opacity: 0;
        transform: scale(0.3);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@keyframes dibujar-arco {
    from {
        stroke-dashoffset: 100;
    }
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes escribir-net {
    from {
        transform: translateX(-3000px);
    }
    to {
        transform: none;
    }
}
@keyframes aparecer-texto {
    from {
        opacity: 0;
        transform: translateY(6%);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- 2. Entrada escalonada de las baldosas del héroe (0 a 760 ms) ---------- */
.js .entrada-escalonada > li {
    animation: brotar-baldosa 520ms var(--curva-resorte) both;
}
.js .entrada-escalonada > li:nth-child(2) {
    animation-delay: 80ms;
}
.js .entrada-escalonada > li:nth-child(3) {
    animation-delay: 160ms;
}
.js .entrada-escalonada > li:nth-child(4) {
    animation-delay: 240ms;
}
.js .entrada-escalonada > li:nth-child(n + 5) {
    animation-delay: 320ms;
}
@keyframes brotar-baldosa {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- 3. Baldosas que entran al hacer scroll (sin soporte: quedan quietas) ---------- */
@supports (animation-timeline: view()) {
    .js .bento-scroll > li {
        animation: subir-baldosa linear both;
        animation-timeline: view();
        animation-range: entry 0% cover 20%;
    }
}
@keyframes subir-baldosa {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.97);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* ---------- 4. Detalles "en vivo": barras de señal y onda del pin del mapa ---------- */
@keyframes barra-senal {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0.3;
    }
}
@keyframes onda-pin {
    from {
        opacity: 0.8;
        transform: scale(0.6);
    }
    to {
        opacity: 0;
        transform: scale(2.2);
    }
}

/* ---------- 5. Movimiento reducido: sin animaciones ni transiciones ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}