/* ============================================================ animations.css — Sistema de animaciones por nivel Proyecto: Código de las Cartas — Tarot de Marsella animations.js aplica al una de estas clases según preferencia del usuario: anim-none · anim-minimal · anim-reduced · anim-full ============================================================ */ /* ───────────────────────────────────────────────────────────── KEYFRAMES BASE ───────────────────────────────────────────────────────────── */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes glowPulse { 0%, 100% { box-shadow: 0 0 8px var(--secondary); } 50% { box-shadow: 0 0 24px var(--secondary); } } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } @keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ───────────────────────────────────────────────────────────── NIVEL: anim-none — sin animaciones ───────────────────────────────────────────────────────────── */ .anim-none * { animation: none !important; transition: none !important; } /* ───────────────────────────────────────────────────────────── NIVEL: anim-minimal — solo fade básico ───────────────────────────────────────────────────────────── */ .anim-minimal .carta-placeholder, .anim-minimal .card { animation: fadeIn 0.2s ease; } /* ───────────────────────────────────────────────────────────── NIVEL: anim-reduced — transiciones suaves sin movimiento ───────────────────────────────────────────────────────────── */ .anim-reduced .carta-placeholder, .anim-reduced .card { animation: fadeIn 0.4s ease; transition: opacity 0.3s ease; } /* ───────────────────────────────────────────────────────────── NIVEL: anim-full — animaciones completas ───────────────────────────────────────────────────────────── */ .anim-full .carta-placeholder, .anim-full .card { animation: slideInUp 0.5s ease forwards; } .anim-full .carta-placeholder:hover, .anim-full .card:hover { animation: glowPulse 1.5s ease-in-out infinite; } /* ───────────────────────────────────────────────────────────── DEFAULT — anim-full si no hay clase específica en body ───────────────────────────────────────────────────────────── */ body:not(.anim-none):not(.anim-minimal):not(.anim-reduced):not(.anim-full) .carta-placeholder { animation: slideInUp 0.5s ease forwards; } /* ───────────────────────────────────────────────────────────── CLASES DE ANIMACIÓN UTILITARIAS Usadas por resultado.js y otros módulos JS ───────────────────────────────────────────────────────────── */ /* Entrada genérica — aplicada por JS al revelar elementos */ .anim-fade-in { animation: fadeIn 0.4s ease forwards; } .anim-slide-in-up { animation: slideInUp 0.5s ease forwards; } /* Delays escalonados para listas de cartas */ .anim-delay-1 { animation-delay: 0.05s; } .anim-delay-2 { animation-delay: 0.10s; } .anim-delay-3 { animation-delay: 0.15s; } .anim-delay-4 { animation-delay: 0.20s; } .anim-delay-5 { animation-delay: 0.25s; } .anim-delay-6 { animation-delay: 0.30s; } .anim-delay-7 { animation-delay: 0.35s; } .anim-delay-8 { animation-delay: 0.40s; } /* Estado oculto inicial — JS elimina esta clase para disparar la entrada */ .anim-hidden { opacity: 0; } /* Glow dorado sobre hover — independiente del nivel */ .anim-glow-hover:hover { animation: glowPulse 1.5s ease-in-out infinite; } /* Shimmer de carga (skeleton loader) */ .anim-shimmer { background: linear-gradient( 90deg, var(--bg-card) 25%, rgba(201, 168, 76, 0.08) 50%, var(--bg-card) 75% ); background-size: 200% auto; animation: shimmer 1.5s linear infinite; } /* Spinner — usado en estados de carga */ .anim-spin { animation: spinSlow 1.2s linear infinite; display: inline-block; } /* ───────────────────────────────────────────────────────────── TRANSICIONES GLOBALES (fuera de anim-none) ───────────────────────────────────────────────────────────── */ body:not(.anim-none) a, body:not(.anim-none) .btn, body:not(.anim-none) .nav__link { transition: color 0.2s ease, opacity 0.2s ease, transform 0.15s ease; } body:not(.anim-none) .card { transition: border-color 0.2s ease, box-shadow 0.2s ease; } body:not(.anim-none) .card:hover { border-color: rgba(201, 168, 76, 0.35); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4); } /* ───────────────────────────────────────────────────────────── ACCESIBILIDAD — respetar prefers-reduced-motion Tiene prioridad sobre cualquier clase de nivel ───────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }