/* ════════════════════════════════════════════
   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;
  }
}

/* ─── PAGE TRANSITIONS ────────────────────────── */

body {
  opacity: 0;
  transition: opacity 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

body.page-ready {
  opacity: 1;
}

/* ─── SCROLL PROGRESS ────────────────────────── */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-container) 100%);
  z-index: 9999;
  transition: width 100ms linear;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-progress {
    display: none;
  }
}