diff --git a/src/styles/animations.css b/src/styles/animations.css index 1477ba5..80af275 100644 --- a/src/styles/animations.css +++ b/src/styles/animations.css @@ -7,10 +7,15 @@ .reveal { opacity: 0; - transform: translateY(32px); + transform: translateY(28px); transition: - opacity 1200ms cubic-bezier(0.22, 1, 0.36, 1), - transform 1200ms cubic-bezier(0.22, 1, 0.36, 1); + opacity 800ms cubic-bezier(0.22, 1, 0.36, 1), + transform 800ms cubic-bezier(0.22, 1, 0.36, 1); +} + +.reveal.visible { + opacity: 1; + transform: translateY(0); } /* stagger via CSS variable set by JS */ @@ -19,10 +24,14 @@ /* Variante horizontal (desde izquierda) */ .reveal-left { opacity: 0; - transform: translateX(-40px); + transform: translateX(-32px); transition: - opacity 1300ms cubic-bezier(0.22, 1, 0.36, 1), - transform 1300ms cubic-bezier(0.22, 1, 0.36, 1); + opacity 900ms cubic-bezier(0.22, 1, 0.36, 1), + transform 900ms cubic-bezier(0.22, 1, 0.36, 1); +} +.reveal-left.visible { + opacity: 1; + transform: translateX(0); } /* Variante scale (para imágenes de galería) */ @@ -30,8 +39,12 @@ opacity: 0; transform: scale(0.94); transition: - opacity 1100ms cubic-bezier(0.22, 1, 0.36, 1), - transform 1100ms cubic-bezier(0.22, 1, 0.36, 1); + opacity 700ms cubic-bezier(0.22, 1, 0.36, 1), + transform 700ms cubic-bezier(0.22, 1, 0.36, 1); +} +.reveal-scale.visible { + opacity: 1; + transform: scale(1); } /* ─── HERO ENTRANCE ──────────────────────────── */ @@ -39,8 +52,8 @@ @keyframes mnq-rise { from { opacity: 0; - transform: translateY(40px); - filter: blur(6px); + transform: translateY(36px); + filter: blur(4px); } to { opacity: 1; @@ -50,12 +63,12 @@ } .hero-enter { - animation: mnq-rise 1200ms cubic-bezier(0.22, 1, 0.36, 1) both; + animation: mnq-rise 1000ms cubic-bezier(0.22, 1, 0.36, 1) both; } -.hero-enter-1 { animation-delay: 300ms; } -.hero-enter-2 { animation-delay: 700ms; } -.hero-enter-3 { animation-delay: 1100ms; } -.hero-enter-4 { animation-delay: 1500ms; } +.hero-enter-1 { animation-delay: 200ms; } +.hero-enter-2 { animation-delay: 500ms; } +.hero-enter-3 { animation-delay: 780ms; } +.hero-enter-4 { animation-delay: 1050ms; } /* ─── GOLD SHIMMER (botones) ─────────────────── */