/* ==========================================================================
   Clippy patrios (Ejecutar y doble clic sobre Clippy): clippy-flag (abanderado) y clippy-futbol (futbolista)
   Archivo NUEVO e independiente: junto con javascript/clippy-patria.js y clippy-patria-art.js se puede quitar sin afectar al resto.
   Reusa .clb-fx / .clb-bob / .clb-fr / .clb-f4 de clippy-secretos.css (cargar ESTE archivo después) y agrega solo clases .clp-*.
   Estilo Windows 98: todo se mueve "a saltos" (steps), como los cuadros de un Office Assistant.
   ========================================================================== */
/* bandera: cuadros de 4 en 4 (más lentos que los de las ruedas: ondea tranquila) */
.clp-fx .clb-f4s { animation: clbF4 .8s steps(1, end) infinite; }
.clp-fx .clb-f4s.clb-i1 { animation-delay: .2s; } .clp-fx .clb-f4s.clb-i2 { animation-delay: .4s; } .clp-fx .clb-f4s.clb-i3 { animation-delay: .6s; }
.clp-flagG { transform-box: view-box; }

/* futbolista: piernas. Parado por defecto; al correr se alternan 4 cuadros; al patear, la pierna derecha va adelante */
.clp-lg { display: none; }
.clp-fx .clp-stand { display: block; }
.clp-fx.is-run .clp-stand { display: none; }
.clp-fx.is-run .clp-run { display: block; }
.clp-fx.is-kick .clp-stand, .clp-fx.is-kick .clp-run { display: none; }
.clp-fx.is-kick .clp-kick { display: block; }
.clp-fx.is-run .clb-f4 { animation-duration: .32s; }
.clp-fx.is-run .clb-f4.clb-i1 { animation-delay: .08s; } .clp-fx.is-run .clb-f4.clb-i2 { animation-delay: .16s; } .clp-fx.is-run .clb-f4.clb-i3 { animation-delay: .24s; }

/* pelota: queda quieta en el cuadro 0 y gira (4 cuadros) cuando rueda */
.clp-ball { z-index: 87; }
.clp-ball .clp-bf { visibility: hidden; }
.clp-ball .clp-bf.clb-i0 { visibility: visible; }
.clp-ball.is-roll .clp-bf { animation: clbF4 .32s steps(1, end) infinite; }
.clp-ball.is-roll .clp-bf.clb-i1 { animation-delay: .08s; } .clp-ball.is-roll .clp-bf.clb-i2 { animation-delay: .16s; } .clp-ball.is-roll .clp-bf.clb-i3 { animation-delay: .24s; }

@media (prefers-reduced-motion: reduce) { .clp-fx *, .clp-fx, .clp-ball, .clp-ball * { animation: none !important; } }
