/* ============================================================ Animaciones del sitio (cargado en todas las páginas desde inc/scripts_generales.php). Los estados "oculto antes de revelar" dependen de la clase `anim` que agrega js/animaciones.js en : sin JS la página se ve completa y estática. Solo se animan transform/opacity. ============================================================ */ /* ---------- Hero ---------- */ .hero-kenburns img { animation: kenburns 22s ease-in-out infinite alternate; will-change: transform; } @keyframes kenburns { from { transform: scale(1) translateY(0); } to { transform: scale(1.1) translateY(-1.5%); } } .anim .hero-palabra { display: inline-block; opacity: 0; transform: translateY(26px) rotate(2deg); animation: entradaHero .7s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: var(--d, 0s); } .anim .hero-cta { opacity: 0; transform: translateY(16px); animation: entradaHero .6s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: var(--d, .8s); } @keyframes entradaHero { to { opacity: 1; transform: none; } } .hero-cta { transition: transform .25s ease, box-shadow .25s ease; } .hero-cta:hover { transform: translateY(-3px) scale(1.04); box-shadow: 0 12px 28px rgba(0, 0, 0, .3); } /* ---------- Reveal on scroll ---------- */ .anim .reveal, .anim .auto-reveal > * { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1); } .anim .reveal.visible, .anim .auto-reveal > .visible { opacity: 1; transform: none; } /* ---------- Tarjetas del menú ---------- */ .card-menu { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; } .card-menu:hover { transform: translateY(-6px) rotate(-.4deg); box-shadow: 0 18px 40px rgba(187, 15, 83, .22); } .card-menu img { transition: transform .6s cubic-bezier(.2, .7, .2, 1); } .card-menu:hover img { transform: scale(1.07); } .card-menu h2 { transition: letter-spacing .35s ease; } .card-menu:hover h2 { letter-spacing: .08em; } /* subrayado que se dibuja bajo el nombre */ .card-menu h2::after { content: ""; display: block; width: 0; height: 3px; margin: .3rem auto 0; background: #fff; transition: width .35s cubic-bezier(.2, .7, .2, 1); } .card-menu:hover h2::after { width: 60%; } /* barrido de brillo */ .card-menu .brillo { position: absolute; inset: 0; z-index: 30; pointer-events: none; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-130%); } .card-menu:hover .brillo { animation: brillo .9s ease; } @keyframes brillo { to { transform: translateX(130%); } } /* ---------- Locales (grilla del home) ---------- */ .home-locales a[href^="/locales/"] { transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease; } .home-locales a[href^="/locales/"]:hover { transform: scale(1.06) rotate(-2deg); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); } /* ---------- Redes ---------- */ .home-social a { display: inline-block; transition: transform .25s cubic-bezier(.2, .7, .2, 1); } .home-social a:hover { transform: translateY(-4px) rotate(-6deg) scale(1.15); } /* ---------- Accesibilidad: sin movimiento ---------- */ @media (prefers-reduced-motion: reduce) { .hero-kenburns img, .anim .hero-palabra, .anim .hero-cta, .card-menu:hover .brillo { animation: none !important; } .anim .hero-palabra, .anim .hero-cta, .anim .reveal, .anim .auto-reveal > * { opacity: 1 !important; transform: none !important; transition: none !important; } }