/* ═══════════════════════════════════════════════════════════════════════════
   Ópera de Morelia — Motion Design (restraint editorial · Apple/Met level)
   - Scroll-triggered fade+translate (IntersectionObserver via JS)
   - Ken Burns subtle zoom (hero + photo moment)
   - Stats counter (JS)
   - Image reveal blur-to-clear
   - Smooth scroll
   ═══════════════════════════════════════════════════════════════════════════ */

html{
  scroll-behavior: smooth;
}

/* ──────────── REVEAL ON SCROLL (Intersection Observer) ──────────── */
/* Aplicar .opm-reveal a cualquier elemento que quieras que fade-in */
.opm-reveal{
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .9s cubic-bezier(.2,.7,.2,1),
    transform .9s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.opm-reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Variante stagger — para elementos dentro de un grupo */
.opm-reveal-stagger > *{
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .8s cubic-bezier(.2,.7,.2,1),
    transform .8s cubic-bezier(.2,.7,.2,1);
}
.opm-reveal-stagger.is-visible > *{
  opacity: 1;
  transform: translateY(0);
}
.opm-reveal-stagger.is-visible > *:nth-child(1){ transition-delay: 0ms; }
.opm-reveal-stagger.is-visible > *:nth-child(2){ transition-delay: 100ms; }
.opm-reveal-stagger.is-visible > *:nth-child(3){ transition-delay: 200ms; }
.opm-reveal-stagger.is-visible > *:nth-child(4){ transition-delay: 300ms; }
.opm-reveal-stagger.is-visible > *:nth-child(5){ transition-delay: 380ms; }
.opm-reveal-stagger.is-visible > *:nth-child(6){ transition-delay: 460ms; }

/* ──────────── KEN BURNS (subtle slow zoom) ──────────── */
@keyframes opm-ken-burns{
  0%   { transform: scale(1.05) translate(0, 0); }
  50%  { transform: scale(1.12) translate(-1.5%, -1%); }
  100% { transform: scale(1.05) translate(0, 0); }
}

/* Ken Burns SOLO en photo moment (estático).
   El hero tiene su propia animación heroFade que rota las imágenes —
   NO sobreescribirla, eso vaciaría el hero. */
.mod-photomoment-img{
  animation: opm-ken-burns 32s ease-in-out infinite;
}

/* ──────────── IMAGE REVEAL (blur-to-clear cuando carga) ──────────── */
.opm-img-reveal{
  filter: blur(8px);
  opacity: 0.5;
  transition: filter .9s ease, opacity .9s ease;
}
.opm-img-reveal.is-loaded{
  filter: blur(0);
  opacity: 1;
}

/* ──────────── STATS COUNTER (estado inicial) ──────────── */
.mod-stat-num{
  font-variant-numeric: tabular-nums;
}

/* ──────────── HOVER MICRO-INTERACTIONS premium ──────────── */
/* Card hover lift refinado */
.mod-card{
  will-change: transform;
}

/* Timeline row hover — slide del gold */
.mod-timeline-row::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: var(--gold, #BDB09D);
  opacity: 0;
  transition: width .35s cubic-bezier(.2,.7,.2,1), opacity .35s ease;
}
.mod-timeline-row:hover::before{
  width: 4px;
  opacity: 0.7;
}
.mod-section--light .mod-timeline-row::before{
  background: var(--opm-light-gold-2, #6B5A40);
}

/* Eyebrow line grow on hover de la sección */
.mod-section .mod-eyebrow::before{
  transition: width .45s cubic-bezier(.2,.7,.2,1);
}

/* ──────────── SCROLL FADE INDICATORS ──────────── */
/* El indicator "SCROLL" del hero hace bounce */
@keyframes opm-scroll-bounce{
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(6px); opacity: 1; }
}
.scroll-indicator{
  animation: opm-scroll-bounce 2.2s ease-in-out infinite;
}

/* ──────────── FAQ DETAILS — animación apertura suave ──────────── */
.mod-faq details[open] .mod-faq-answer{
  animation: opm-faq-open .45s cubic-bezier(.2,.7,.2,1);
}
@keyframes opm-faq-open{
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ──────────── REDUCED MOTION ──────────── */
@media (prefers-reduced-motion: reduce){
  .opm-reveal,
  .opm-reveal-stagger > *{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero-bg img,
  .mod-photomoment-img{
    animation: none !important;
  }
  .opm-img-reveal{
    filter: none !important;
    opacity: 1 !important;
  }
  html{ scroll-behavior: auto; }
  .scroll-indicator{ animation: none; }
}