/* ===========================================================================
   Iconos animados
   ---------------------------------------------------------------------------
   Dibujos y coreografía de itshover.com, portados de React + motion a CSS.
   El SVG lo arma `icon()` (app/Helpers/icons.php); cada parte que se mueve
   lleva una clase y acá está su animación.

   Cuándo se anima: al pasar el mouse o enfocar el ancestro `.ai-host` (el link
   o botón que contiene el icono), al pasar el mouse sobre el icono suelto, o
   cuando `icons.js` le pone `is-playing` al tocarlo en celular.

   Dos maneras de moverse, las mismas que en el original:
   - «Sostenido»: la parte va a un estado y se queda ahí mientras dura el hover
     (transition). Al salir, vuelve.
   - «Una vez»: corre una secuencia y termina donde empezó (animation). No queda
     en bucle.

   Quien pidió menos movimiento al sistema no ve nada de esto: app.css deja
   toda animación y transición en .01ms bajo `prefers-reduced-motion`.
   =========================================================================== */

.ai {
    display: inline-block;
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -.125em;
    overflow: visible;
}

/* Cada parte gira y escala sobre su propia caja, no sobre la del SVG. */
.ai :is(path, rect, circle, g) { transform-box: fill-box; transform-origin: center; }

/* Trazos que se dibujan: `pathLength="1"` en el SVG hace que midan 1, así el
   guion de 1 los tapa enteros y el offset los va destapando. */
.ai-draw { stroke-dasharray: 1; stroke-dashoffset: 0; }

@keyframes ai-draw {
    from { stroke-dashoffset: 1; opacity: 0; }
    to   { stroke-dashoffset: 0; opacity: 1; }
}

/* Estado «activo». Se repite en cada regla porque CSS no permite alias de
   selectores; el patrón es siempre el mismo. */

/* --- Panel: los bloques se intercambian (sostenido) ------------------------ */

.ai-dashboard rect { transition: transform .3s ease-in-out; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-dash-1 { transform: translateX(10px); }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-dash-2 { transform: translate(-1px, 12px); }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-dash-3 { transform: translateX(-10px); }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-dash-4 { transform: translate(1px, -12px); }

/* --- Cartera: la solapa se abre (sostenido) -------------------------------- */

.ai-wallet path { transition: transform .4s ease-out; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-wallet-flap { transform: perspective(400px) rotateY(25deg) translateX(2px); }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-wallet-body { transform: scale(1.05); }

/* --- Clientes: saltito de la persona de adelante (sostenido) --------------- */

.ai-users g { transition: transform .3s ease-out, opacity .3s ease-out; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-users-main { transform: translateY(-2px) scale(1.05); }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-users-back { transform: translateX(1px); opacity: .8; }

/* --- Oportunidades: la base se extiende y la curva se dibuja (una vez) ----- */

.ai-chart-base { transform-origin: left center; }

@keyframes ai-grow-x {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-chart-base { animation: ai-grow-x .4s ease-out; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-chart-line { animation: ai-draw .6s ease-in-out; }

/* --- Mensaje: se dibuja y late (una vez) ----------------------------------- */

.ai-message-path { stroke-dasharray: 1; stroke-dashoffset: 0; }

@keyframes ai-message-draw {
    0%   { stroke-dashoffset: 1; opacity: 0; transform: scale(1); }
    66%  { stroke-dashoffset: 0; opacity: 1; transform: scale(1); }
    83%  { transform: scale(1.05); }
    100% { stroke-dashoffset: 0; opacity: 1; transform: scale(1); }
}

:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-message-path { animation: ai-message-draw .9s ease-in-out; }

/* --- Encuestas: esquina y después líneas (una vez) ------------------------- */

:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-file-fold { animation: ai-draw .3s ease-out; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-file-line { animation: ai-draw .4s ease-out .3s backwards; }

/* --- Motivos: líneas que salen y viñetas que laten (una vez) --------------- */

.ai-list-line { transform-origin: left center; }

@keyframes ai-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.3); }
}

:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-list-line { animation: ai-grow-x .25s ease-out backwards; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-list-line:nth-child(2) { animation-delay: .1s; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-list-line:nth-child(3) { animation-delay: .2s; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-list-dots { animation: ai-pulse .4s ease-in-out; }

/* --- Estrella: relleno sostenido, meneo una vez ---------------------------- */

.ai-star-fill {
    opacity: 0;
    transform: scale(.8);
    transition: opacity .3s ease-out, transform .3s ease-out;
}

:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-star-fill {
    opacity: 1;
    transform: scale(1);
    transition-duration: .4s;
}

@keyframes ai-star-wiggle {
    0%   { transform: scale(1) rotate(0); }
    33%  { transform: scale(1.07) rotate(-5deg); }
    50%  { transform: scale(1.1) rotate(0); }
    66%  { transform: scale(1.07) rotate(5deg); }
    100% { transform: scale(1) rotate(0); }
}

:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-star-outline { animation: ai-star-wiggle .5s ease-in-out; }

/* --- Contenido: destellos que giran (una vez) ------------------------------ */

@keyframes ai-spark-main {
    0%   { transform: rotate(0) scale(1); }
    50%  { transform: rotate(90deg) scale(1.2); }
    100% { transform: rotate(180deg) scale(1); }
}

@keyframes ai-spark-top {
    0%   { transform: rotate(0) scale(1); opacity: 1; }
    50%  { transform: rotate(-45deg) scale(.8); opacity: .6; }
    100% { transform: rotate(-90deg) scale(1); opacity: 1; }
}

@keyframes ai-spark-bottom {
    0%   { transform: rotate(0) scale(1); opacity: 1; }
    50%  { transform: rotate(45deg) scale(1.15); opacity: .7; }
    100% { transform: rotate(90deg) scale(1); opacity: 1; }
}

:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-spark-main   { animation: ai-spark-main .6s ease-in-out; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-spark-top    { animation: ai-spark-top .5s ease-in-out .1s; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-spark-bottom { animation: ai-spark-bottom .5s ease-in-out .05s; }

/* --- Carrito: avanza, giran las ruedas, saltan los productos (una vez) ----- */

@keyframes ai-cart-roll {
    0%   { transform: translateX(0); }
    50%  { transform: translateX(10px); }
    100% { transform: translateX(0); }
}

@keyframes ai-cart-spin {
    0%   { transform: translateX(0) rotate(0); }
    50%  { transform: translateX(10px) rotate(180deg); }
    100% { transform: translateX(0) rotate(0); }
}

@keyframes ai-cart-bump {
    0%   { transform: translateX(0) translateY(0); }
    33%  { transform: translateX(6.6px) translateY(-2px); }
    50%  { transform: translateX(10px) translateY(0); }
    100% { transform: translateX(0) translateY(0); }
}

/* El SVG del carrito es de 48 unidades: los 10px del original son 10 unidades
   acá, porque los px de un transform sobre SVG se miden en el viewBox. */
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-cart-body  { animation: ai-cart-roll .6s ease-in-out; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-cart-wheel { animation: ai-cart-spin .6s ease-in-out; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-cart-item  { animation: ai-cart-bump .6s ease-in-out; }

/* --- Promociones: roseta que se sacude (una vez) --------------------------- */

@keyframes ai-disc-shake {
    0%   { transform: rotate(0) scale(1); }
    25%  { transform: rotate(-8deg) scale(1.06); }
    50%  { transform: rotate(8deg) scale(1.08); }
    75%  { transform: rotate(0) scale(1); }
    88%  { transform: scale(.97); }
    100% { transform: scale(1); }
}

@keyframes ai-disc-dot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.5); opacity: .6; }
}

:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-disc-badge { animation: ai-disc-shake .85s ease-in-out; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-disc-dot   { animation: ai-disc-dot .5s ease-in-out; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-disc-line  { animation: ai-draw .4s ease-out .6s backwards; }

/* --- Novedades: líneas que se escriben una por una (una vez) --------------- */

:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-book-line { animation: ai-draw .3s ease-in-out .1s backwards; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-book-line:nth-child(4) { animation-delay: .45s; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-book-line:nth-child(5) { animation-delay: .8s; }

/* --- Administración: vuelta entera del engranaje (una vez) ----------------- */

@keyframes ai-spin {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}

@keyframes ai-pulse-soft {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.02); }
}

@keyframes ai-pulse-mid {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.1); }
}

:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-gear-rotor  { animation: ai-spin .9s ease-in-out; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-gear-body   { animation: ai-pulse-soft .6s ease-in-out; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-gear-center { animation: ai-pulse-mid .3s ease-out; }

/* --- Sucursales: techo, casa y puerta (una vez) ---------------------------- */

.ai-home-door { transform-origin: center bottom; }

@keyframes ai-home-roof {
    from { transform: translateY(-2px); opacity: .6; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes ai-home-walls {
    from { transform: scale(.95); }
    to   { transform: scale(1); }
}

@keyframes ai-grow-y {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
}

:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-home-roof  { animation: ai-home-roof .4s ease-out; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-home-walls { animation: ai-home-walls .3s ease-out .4s backwards; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-home-door  { animation: ai-grow-y .3s ease-out .4s backwards; }

/* --- Cuentas: el edificio se estira (una vez) ------------------------------ */

@keyframes ai-stretch {
    0%, 100% { transform: translateY(0) scaleY(1); }
    50%      { transform: translateY(-2px) scaleY(1.2); }
}

:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-building { animation: ai-stretch .4s ease-in-out; }

/* --- Códigos QR: esquinas, relleno y escáner (una vez) --------------------- */

.ai-qr-scan { opacity: 0; filter: drop-shadow(0 0 4px currentColor); }

@keyframes ai-qr-scan {
    0%   { opacity: 0; transform: translateY(0); }
    20%  { opacity: 1; }
    60%  { opacity: 1; transform: translateY(30px); }
    100% { opacity: 0; transform: translateY(30px); }
}

@keyframes ai-fade-up {
    from { opacity: 0; transform: scale(.8); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes ai-pop {
    0%   { opacity: 0; transform: scale(0); }
    60%  { opacity: 1; transform: scale(1.2); }
    100% { opacity: 1; transform: scale(1); }
}

:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-qr-corner { animation: ai-draw .4s ease-out backwards; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-qr-corner:nth-child(3) { animation-delay: .1s; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-qr-corner:nth-child(4) { animation-delay: .2s; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-qr-inner  { animation: ai-fade-up .3s ease-out .4s backwards; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-qr-dot    { animation: ai-pop .3s ease-out .6s backwards; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-qr-scan   { animation: ai-qr-scan 1.2s ease-in-out .3s; }

/* --- Usuarios: persona sostenida, tilde una vez ---------------------------- */

.ai-uc-avatar { transition: transform .25s ease-out; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-uc-avatar { transform: translateY(-1px) scale(1.05); }

@keyframes ai-uc-check {
    0%   { stroke-dashoffset: 1; opacity: 0; transform: scale(1); }
    70%  { stroke-dashoffset: 0; opacity: 1; transform: scale(1.1); }
    100% { stroke-dashoffset: 0; opacity: 1; transform: scale(1); }
}

:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-uc-check { animation: ai-uc-check .5s ease-out; }

/* --- Roles: el arco se abre (sostenido) ------------------------------------ */

.ai-lock-shackle { transform-origin: center bottom; transition: transform .28s ease-out; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-lock-shackle { transform: translate(3px, -1.7px) rotate(40deg); }

/* --- Auditoría: el ojo entrecierra (sostenido) ----------------------------- */

.ai-eye path { transition: transform .15s ease-out; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-eye-pupil { transform: scale(.7); }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-eye-shape { transform: scaleY(.9); }

/* --- Campana (una vez) ----------------------------------------------------- */

.ai-bell-body    { transform-origin: 50% 10%; }
.ai-bell-clapper { transform-origin: 50% 0; }

@keyframes ai-bell-ring {
    0%   { transform: rotate(0); }
    20%  { transform: rotate(-8deg); }
    40%  { transform: rotate(6deg); }
    60%  { transform: rotate(-4deg); }
    80%  { transform: rotate(2deg); }
    100% { transform: rotate(0); }
}

@keyframes ai-bell-clap {
    0%   { transform: rotate(0); }
    20%  { transform: rotate(20deg); }
    40%  { transform: rotate(-18deg); }
    60%  { transform: rotate(12deg); }
    80%  { transform: rotate(-6deg); }
    100% { transform: rotate(0); }
}

:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-bell-body    { animation: ai-bell-ring .6s ease-in-out; }
:is(.ai-host:hover, .ai-host:focus-visible, .ai-host.is-playing, .ai:hover) .ai-bell-clapper { animation: ai-bell-clap .6s ease-in-out .05s; }