/* ============================================================ FRAMEWORK PERSONAL — animations.css Animaciones estandarizadas de studioweb, andurinas y corso. Requiere tokens.css cargado antes (usa var(--ease)). Pareja con observer.js para los reveals. ============================================================ */ /* ── PAGE FADE IN — al cargar cada página ──────────────────── */ @keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } } body { animation: pageFadeIn 0.4s ease; } /* ── PAGE EXIT — transición de salida entre páginas (0.25s) ── Añadir/quitar clase "page-exit" en desde el listener de click en internos antes de navegar. */ .page-exit { animation: pageExit 0.25s var(--ease) forwards; } @keyframes pageExit { to { opacity: 0; } } /* ── SCROLL REVEAL — pareja con observer.js ────────────────── Umbral estándar: 0.12 · rootMargin: -48px inferior. Variantes: .reveal (sube), .reveal-left, .reveal-right, .reveal-d1..d4 (stagger). */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-left { opacity: 0; transform: translateX(-32px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal-right { opacity: 0; transform: translateX(32px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translateX(0); } .reveal-d1 { transition-delay: 0.12s; } .reveal-d2 { transition-delay: 0.24s; } .reveal-d3 { transition-delay: 0.38s; } .reveal-d4 { transition-delay: 0.52s; } /* ── TICKER / MARQUEE — franja de texto en bucle infinito ───── El track necesita el contenido duplicado 1x (2 copias) en el HTML para que el bucle sea continuo. Velocidad estándar: 40s. */ @keyframes tickerMove { from { translate: 0 0; } to { translate: -50% 0; } } .ticker-wrap { background: var(--accent); padding: 0.72rem 0; overflow: hidden; white-space: nowrap; } .ticker-track { display: inline-flex; align-items: center; animation: tickerMove 40s linear infinite; } @media (hover: hover) and (pointer: fine) { .ticker-wrap:hover .ticker-track { animation-play-state: paused; } } /* Marquee — variante draggable en touch (ver observer.js / feedback_marquee_touch): mismo keyframe, distinto nombre para permitir duración independiente por proyecto. */ @keyframes marqueeSlide { from { translate: 0 0; } to { translate: -50% 0; } } .marquee-track { display: flex; align-items: stretch; width: max-content; white-space: nowrap; transform: translateX(var(--drag-offset, 0px)); animation: marqueeSlide 40s linear infinite; } @media (hover: hover) and (pointer: fine) { .marquee-wrap:hover .marquee-track { animation-play-state: paused; } } @media (hover: none) and (pointer: coarse) { .marquee-wrap { touch-action: pan-y; } .marquee-track { animation-play-state: running !important; } } /* ── WHATSAPP PULSE — botón flotante de contacto ─────────────── */ @keyframes waPulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); } 60% { box-shadow: 0 0 0 14px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } .wa-float { position: fixed; bottom: 2rem; right: 2rem; width: 56px; height: 56px; border-radius: 50%; background: #25d366; display: flex; align-items: center; justify-content: center; z-index: var(--z-float); animation: waPulse 3s ease infinite; transition: transform 0.15s; } .wa-float:hover { transform: scale(1.1); animation-play-state: paused; } .wa-float svg { width: 26px; height: 26px; fill: #fff; } @media (max-width: 600px) { .wa-float { bottom: 1.2rem; right: 1.2rem; width: 50px; height: 50px; } } /* ── HOVER STATES ESTÁNDAR ───────────────────────────────────── */ .hover-fade { transition: opacity 0.3s var(--ease); } .hover-fade:hover { opacity: 0.8; } .hover-lift { transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } .hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-card); } /* ── ACCESIBILIDAD — respeta reduced-motion, excepto el CTA flotante (debe seguir siendo visible/perceptible) ──────────── */ @media (prefers-reduced-motion: reduce) { *:not(.wa-float), *:not(.wa-float)::before, *:not(.wa-float)::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; } }