/* === Mercato Notturno motion system === */

/* Reveal: opacity + translateY (1.4s, cubic-bezier ease-out-expo) */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 1.4s var(--ease-out-expo) var(--reveal-delay, 0ms),
    transform 1.4s var(--ease-out-expo) var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Image reveal: scale + saturation layer */
[data-reveal-image] {
  opacity: 0;
  transform: scale(1.06);
  filter: saturate(0.55) brightness(0.85);
  transition:
    opacity 1.6s var(--ease-out-expo) var(--reveal-delay, 0ms),
    transform 1.8s var(--ease-out-expo) var(--reveal-delay, 0ms),
    filter 1.6s var(--ease-out-expo) var(--reveal-delay, 0ms);
}
[data-reveal-image].is-visible {
  opacity: 1;
  transform: scale(1);
  filter: saturate(1) brightness(1);
}

/* Hero Ken-Burns — infinite, breathing zoom + pan */
@keyframes ken-burns {
  0%   { transform: scale(1.10) translate3d(-1.4%, -0.9%, 0); }
  50%  { transform: scale(1.20) translate3d(1.6%, 0.8%, 0); }
  100% { transform: scale(1.10) translate3d(-1.4%, -0.9%, 0); }
}
@keyframes hero-breath {
  0%, 100% { filter: brightness(0.96) saturate(1.00) contrast(1.00); }
  50%      { filter: brightness(1.10) saturate(1.14) contrast(1.05); }
}
.hero__image-inner {
  animation:
    ken-burns 42s var(--ease-in-out-soft) infinite,
    hero-breath 14s ease-in-out infinite;
  transform-origin: 55% 55%;
  will-change: transform, filter;
}

/* Scroll + mouse parallax (JS sets --scroll-offset, --mx, --my) */
.hero__media {
  transform: translate3d(
    calc(var(--mx, 0) * -12px),
    calc(var(--scroll-offset, 0) * 1px + var(--my, 0) * -10px),
    0
  );
  will-change: transform;
}

/* Hero vignette pulse — more present */
@keyframes vignette-pulse {
  0%, 100% { opacity: 0.78; }
  50%      { opacity: 0.94; }
}
.hero__vignette {
  animation: vignette-pulse 7s ease-in-out infinite;
}

/* Warm candlelight glow drifting across hero */
@keyframes glow-drift {
  0%   { transform: translate3d(-22%, -12%, 0) scale(1.0); opacity: 0.30; }
  33%  { transform: translate3d(18%, 8%, 0)   scale(1.15); opacity: 0.55; }
  66%  { transform: translate3d(-8%, 18%, 0)  scale(0.95); opacity: 0.40; }
  100% { transform: translate3d(-22%, -12%, 0) scale(1.0); opacity: 0.30; }
}
.hero__glow {
  position: absolute;
  top: 25%; left: 25%;
  width: 55%; height: 55%;
  background: radial-gradient(circle at center, rgba(217, 162, 74, 0.32) 0%, rgba(184, 90, 58, 0.10) 45%, rgba(0,0,0,0) 70%);
  pointer-events: none;
  z-index: 0;
  mix-blend-mode: screen;
  animation: glow-drift 22s ease-in-out infinite;
  filter: blur(50px);
}

/* Secondary slow drifting glow (counter-direction for organic feel) */
.hero__glow--alt {
  top: auto; bottom: 10%; left: auto; right: 10%;
  width: 40%; height: 40%;
  background: radial-gradient(circle at center, rgba(184, 90, 58, 0.28) 0%, rgba(0,0,0,0) 60%);
  animation: glow-drift 31s ease-in-out infinite reverse;
}

/* CTA shine on hover */
.cta--primary { position: relative; overflow: hidden; }
.cta--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(237,227,209,0.18) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.9s var(--ease-out-expo);
}
.cta--primary:hover::after { transform: translateX(120%); }

/* Hours-pill subtle pulse on "open" indicator */
@keyframes dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.55; }
}
.dot-open { animation: dot-pulse 2.4s ease-in-out infinite; }

/* Reduced motion override */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal-image] {
    transition: opacity 0.3s ease;
    transform: none;
    filter: none;
  }
  [data-reveal].is-visible,
  [data-reveal-image].is-visible {
    transform: none;
    filter: none;
  }
  .hero__image-inner,
  .hero__vignette,
  .hero__glow,
  .dot-open,
  .cta--primary::after {
    animation: none !important;
  }
  .hero__media { transform: none !important; }
}