/* POOL DE ANIMACIONES TIMONDIGITAL — CSS puro, sin dependencias.
   Cada patrón es una clase. Se activa con la clase .visible que pone animacion.js al entrar en pantalla.
   Respeta prefers-reduced-motion. Máximo 3 patrones distintos por web. */

@media (prefers-reduced-motion: reduce){ [class*="an-"]{opacity:1!important;transform:none!important;transition:none!important;animation:none!important} }

/* A1 · fade-up — sutil, universal */
.an-fade-up{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.an-fade-up.visible{opacity:1;transform:none}

/* A2 · fade — elegante, el más discreto */
.an-fade{opacity:0;transition:opacity .9s ease}
.an-fade.visible{opacity:1}

/* A3 · stagger — hijos entran escalonados (tarjetas, platos) */
.an-stagger>*{opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .5s ease}
.an-stagger.visible>*{opacity:1;transform:none}
.an-stagger.visible>*:nth-child(2){transition-delay:.08s}.an-stagger.visible>*:nth-child(3){transition-delay:.16s}
.an-stagger.visible>*:nth-child(4){transition-delay:.24s}.an-stagger.visible>*:nth-child(5){transition-delay:.32s}.an-stagger.visible>*:nth-child(6){transition-delay:.4s}

/* A4 · clip-reveal — la imagen se descubre (editorial, masía) */
.an-clip{clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.77,0,.18,1)}
.an-clip.visible{clip-path:inset(0 0 0 0)}

/* A5 · blur-in — aparece desde desenfoque (premium, cóctel) */
.an-blur{opacity:0;filter:blur(10px);transform:scale(1.02);transition:opacity .8s ease,filter .8s ease,transform .8s ease}
.an-blur.visible{opacity:1;filter:blur(0);transform:none}

/* A6 · hover-lift — tarjetas que se elevan al pasar (fast-casual, moderno) */
.an-lift{transition:transform .3s ease,box-shadow .3s ease}
.an-lift:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.18)}

/* A7 · img-zoom — foto que se acerca lento al pasar (platos, ambiente) */
.an-zoom{overflow:hidden}.an-zoom img{transition:transform 1.2s ease}.an-zoom:hover img{transform:scale(1.06)}

/* A8 · ken-burns — hero con foto que respira (masía, chill) */
@keyframes an-kb{from{transform:scale(1)}to{transform:scale(1.08)}}
.an-kenburns img{animation:an-kb 18s ease-in-out infinite alternate}

/* A9 · marquee — cinta que corre (street, burger, energía) */
@keyframes an-mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.an-marquee{overflow:hidden;white-space:nowrap}.an-marquee__pista{display:inline-block;animation:an-mq 22s linear infinite}
.an-marquee:hover .an-marquee__pista{animation-play-state:paused}

/* A10 · underline-draw — subrayado que se dibuja en enlaces (elegante, editorial) */
.an-underline{position:relative;text-decoration:none}
.an-underline::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.an-underline:hover::after{transform:scaleX(1)}

/* A11 · slide-in lateral — bloques que entran de un lado (moderno, dinámico) */
.an-slide-l{opacity:0;transform:translateX(-24px);transition:opacity .6s ease,transform .6s ease}
.an-slide-r{opacity:0;transform:translateX(24px);transition:opacity .6s ease,transform .6s ease}
.an-slide-l.visible,.an-slide-r.visible{opacity:1;transform:none}

/* A12 · header-compacto — la barra se encoge al hacer scroll (todas; lo activa animacion.js con .compacto) */
.an-header{transition:padding .3s ease,background .3s ease}
.an-header.compacto{padding-block:.4rem;background:rgba(5,6,15,.92)}

/* A13 · pulse-cta — pulso suave en el botón principal (street, energía). Usar UNA vez por web. */
@keyframes an-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.35)}50%{box-shadow:0 0 0 10px rgba(255,255,255,0)}}
.an-pulse{animation:an-pulse 2.4s ease-out infinite}

/* A14 · glitch-title — parpadeo retro (videojuego, retro-futurista). Usar solo en el hero. */
@keyframes an-glitch{0%,90%,100%{transform:none;opacity:1}92%{transform:translate(2px,-1px);opacity:.85}95%{transform:translate(-2px,1px);opacity:.9}}
.an-glitch{animation:an-glitch 6s infinite}

/* A15 · sello-gira — sello/badge circular que rota lento (street, bistro, retro). Uno por web. */
@keyframes an-gira{to{transform:rotate(360deg)}}
.an-sello{animation:an-gira 18s linear infinite;will-change:transform}
.an-sello:hover{animation-play-state:paused}

/* A16 · flota — flotación suave arriba-abajo (foto de plato, ilustración, badge). Máx. 2 elementos. */
@keyframes an-flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.an-flota{animation:an-flota 4.5s ease-in-out infinite}

/* A17 · reveal-lineas — el texto aparece línea a línea (elegante, editorial, masía). Cada línea va en un <span class="an-linea">. */
.an-lineas .an-linea{display:block;opacity:0;transform:translateY(10px);transition:opacity .55s ease,transform .55s ease}
.an-lineas.visible .an-linea{opacity:1;transform:none}
.an-lineas.visible .an-linea:nth-child(2){transition-delay:.1s}.an-lineas.visible .an-linea:nth-child(3){transition-delay:.2s}
.an-lineas.visible .an-linea:nth-child(4){transition-delay:.3s}.an-lineas.visible .an-linea:nth-child(5){transition-delay:.4s}