/* ============================================ NEUROGYM — Animations & Effects (Light Theme) ============================================ */ /* ── Scroll Reveal ── IMPORTANTE: el estado oculto (opacity:0) se aplica SOLO cuando hay JS (clase `.js` en , puesta por un script inline en el ). Si el JS no se ejecuta (bloqueado, error, navegador sin soporte), el contenido queda VISIBLE por defecto en lugar de dejar la página en blanco. */ .js .reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth); } .reveal.visible { opacity: 1; transform: translateY(0); } .js .reveal-left { opacity: 0; transform: translateX(-50px); transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth); } .reveal-left.visible { opacity: 1; transform: translateX(0); } .js .reveal-right { opacity: 0; transform: translateX(50px); transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-smooth); } .reveal-right.visible { opacity: 1; transform: translateX(0); } .js .reveal-scale { opacity: 0; transform: scale(0.85); transition: opacity 0.7s var(--ease-smooth), transform 0.7s var(--ease-bounce); } .reveal-scale.visible { opacity: 1; transform: scale(1); } /* ── Stagger delays for children ── */ .stagger>*:nth-child(1) { transition-delay: 0.05s; } .stagger>*:nth-child(2) { transition-delay: 0.12s; } .stagger>*:nth-child(3) { transition-delay: 0.19s; } .stagger>*:nth-child(4) { transition-delay: 0.26s; } .stagger>*:nth-child(5) { transition-delay: 0.33s; } .stagger>*:nth-child(6) { transition-delay: 0.40s; } /* ── Float / Levitate ── */ @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } .float { animation: float 4s ease-in-out infinite; } /* ── Pulse glow ── */ @keyframes pulse-glow { 0%, 100% { filter: drop-shadow(0 4px 20px rgba(79, 70, 229, 0.25)); } 50% { filter: drop-shadow(0 4px 35px rgba(79, 70, 229, 0.45)); } } .pulse-glow { animation: pulse-glow 3s ease-in-out infinite; } /* ── Spin slow ── */ @keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spin-slow { animation: spin-slow 25s linear infinite; } /* ── Shimmer text ── */ @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } .shimmer { background-size: 200% auto; animation: shimmer 4s linear infinite; } /* ── Hero particles background ── */ @keyframes particle-drift { 0% { transform: translateY(0) translateX(0) scale(0); opacity: 0; } 10% { opacity: 0.6; transform: scale(1); } 90% { opacity: 0.3; } 100% { transform: translateY(-100vh) translateX(50px) scale(0.3); opacity: 0; } } .particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .particles .dot { position: absolute; border-radius: 50%; background: var(--color-indigo); opacity: 0; animation: particle-drift linear infinite; } /* ── Gradient orb (decorative background blob) ── */ @keyframes orb-move { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px, -20px) scale(1.05); } 66% { transform: translate(-20px, 20px) scale(0.95); } } .orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.12; animation: orb-move 12s ease-in-out infinite; pointer-events: none; } /* ── Hover lift for cards ── */ .hover-lift { transition: transform var(--transition-base), box-shadow var(--transition-base); } .hover-lift:hover { transform: translateY(-8px) scale(1.02); box-shadow: var(--shadow-card-hover); } /* ── Border glow on hover ── */ .hover-glow { transition: border-color var(--transition-base), box-shadow var(--transition-base); } .hover-glow:hover { border-color: var(--color-indigo); box-shadow: var(--shadow-glow-indigo); }