feat: premium motion system — scroll reveal, hero cascade, gold accents
This commit is contained in:
Manuel
@@ -0,0 +1,257 @@
|
||||
/* ════════════════════════════════════════════
|
||||
MNQ — PREMIUM ANIMATIONS
|
||||
Elegant, slow, gold-accented. No bounce.
|
||||
════════════════════════════════════════════ */
|
||||
|
||||
/* ─── SCROLL REVEAL ─────────────────────────── */
|
||||
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(28px);
|
||||
transition:
|
||||
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 */
|
||||
.reveal { transition-delay: calc(var(--reveal-delay, 0) * 1ms); }
|
||||
|
||||
/* Variante horizontal (desde izquierda) */
|
||||
.reveal-left {
|
||||
opacity: 0;
|
||||
transform: translateX(-32px);
|
||||
transition:
|
||||
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) */
|
||||
.reveal-scale {
|
||||
opacity: 0;
|
||||
transform: scale(0.94);
|
||||
transition:
|
||||
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 ──────────────────────────── */
|
||||
|
||||
@keyframes mnq-rise {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(36px);
|
||||
filter: blur(4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
filter: blur(0);
|
||||
}
|
||||
}
|
||||
|
||||
.hero-enter {
|
||||
animation: mnq-rise 1000ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
.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) ─────────────────── */
|
||||
|
||||
.btn, .btn-pill, .btn-primary, .btn-dark, .btn-ghost {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn::after,
|
||||
.btn-pill::after,
|
||||
.btn-primary::after,
|
||||
.btn-dark::after,
|
||||
.btn-ghost::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(
|
||||
105deg,
|
||||
transparent 30%,
|
||||
rgb(255 255 255 / 22%) 50%,
|
||||
transparent 70%
|
||||
);
|
||||
transform: translateX(-120%) skewX(-18deg);
|
||||
pointer-events: none;
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.btn:hover::after,
|
||||
.btn-pill:hover::after,
|
||||
.btn-primary:hover::after,
|
||||
.btn-dark:hover::after,
|
||||
.btn-ghost:hover::after {
|
||||
animation: shimmer-sweep 550ms cubic-bezier(0.25, 0, 0.6, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes shimmer-sweep {
|
||||
from { transform: translateX(-120%) skewX(-18deg); }
|
||||
to { transform: translateX(160%) skewX(-18deg); }
|
||||
}
|
||||
|
||||
/* ─── WHATSAPP PULSE GLOW ────────────────────── */
|
||||
|
||||
@keyframes wa-glow {
|
||||
0%, 100% {
|
||||
box-shadow:
|
||||
0 0 0 0 rgb(212 175 55 / 50%),
|
||||
0 25px 50px -12px rgb(31 26 23 / 20%);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 0 10px rgb(212 175 55 / 0%),
|
||||
0 25px 50px -12px rgb(31 26 23 / 20%);
|
||||
}
|
||||
}
|
||||
|
||||
.whatsapp-float {
|
||||
animation: wa-glow 2.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ─── GOLD LINE DRAW ─────────────────────────── */
|
||||
|
||||
.gold-line {
|
||||
transform-origin: left center;
|
||||
transform: scaleX(0);
|
||||
transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.gold-line.visible {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
/* ─── HEADER SCROLL ELEVATION ────────────────── */
|
||||
|
||||
.site-header {
|
||||
transition:
|
||||
background 300ms ease,
|
||||
box-shadow 300ms ease;
|
||||
}
|
||||
|
||||
.site-header.is-scrolled {
|
||||
box-shadow: 0 4px 24px rgb(0 0 0 / 10%);
|
||||
background: rgb(255 248 240 / 97%);
|
||||
}
|
||||
|
||||
/* ─── EYEBROW GOLD BLINK ─────────────────────── */
|
||||
|
||||
@keyframes eyebrow-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
letter-spacing: 0.5em;
|
||||
color: transparent;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
letter-spacing: 0.3em;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.section-eyebrow.reveal.visible {
|
||||
animation: eyebrow-in 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
|
||||
}
|
||||
|
||||
/* ─── LOGO EYE SUBTLE GLOW (header) ─────────── */
|
||||
|
||||
@keyframes eye-shimmer {
|
||||
0%, 100% { filter: brightness(1) drop-shadow(0 0 0px rgb(212 175 55 / 0%)); }
|
||||
50% { filter: brightness(1.08) drop-shadow(0 0 6px rgb(212 175 55 / 30%)); }
|
||||
}
|
||||
|
||||
.site-logo-banner {
|
||||
animation: eye-shimmer 5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* ─── BENTO CARD HOVER LIFT ──────────────────── */
|
||||
|
||||
.bento-card {
|
||||
transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.bento-card:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
/* ─── TESTIMONIAL CARD HOVER ─────────────────── */
|
||||
|
||||
.testimonial-card {
|
||||
transition: transform 400ms ease, box-shadow 400ms ease;
|
||||
}
|
||||
|
||||
.testimonial-card:hover {
|
||||
transform: translateY(-6px);
|
||||
box-shadow: 0 20px 40px -12px rgb(115 92 0 / 12%);
|
||||
}
|
||||
|
||||
/* ─── DARK CTA — CANDLE AMBIENT ──────────────── */
|
||||
|
||||
@keyframes candle-glow {
|
||||
0%, 100% { opacity: 0.06; }
|
||||
33% { opacity: 0.09; }
|
||||
66% { opacity: 0.05; }
|
||||
}
|
||||
|
||||
.cta-dark::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(ellipse at 50% 0%, var(--color-primary-container), transparent 65%);
|
||||
pointer-events: none;
|
||||
animation: candle-glow 6s ease-in-out infinite;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* ─── NAV LINK UNDERLINE SLIDE ───────────────── */
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.nav-link:not(.active)::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: var(--color-primary);
|
||||
transform: scaleX(0);
|
||||
transform-origin: right;
|
||||
transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
|
||||
.nav-link:hover::after {
|
||||
transform: scaleX(1);
|
||||
transform-origin: left;
|
||||
}
|
||||
|
||||
/* ─── REDUCE MOTION ──────────────────────────── */
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user