/* ============================================
   PIZZERIA AVALON — Animazioni condivise
   Sistema discreto: solo opacity + transform.
   Disattivato con prefers-reduced-motion.
   ============================================ */

/* -------- SCROLL REVEAL ----------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--motion-reveal-duration) var(--motion-ease-out),
              transform var(--motion-reveal-duration) var(--motion-ease-out);
}

[data-reveal="image"] {
  transform: none;
  transition-duration: var(--motion-image-duration);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger: ritardi incrementali per elementi vicini */
[data-reveal][data-reveal-delay="1"] { transition-delay: 60ms; }
[data-reveal][data-reveal-delay="2"] { transition-delay: 120ms; }
[data-reveal][data-reveal-delay="3"] { transition-delay: 180ms; }
[data-reveal][data-reveal-delay="4"] { transition-delay: 240ms; }
[data-reveal][data-reveal-delay="5"] { transition-delay: 300ms; }
[data-reveal][data-reveal-delay="6"] { transition-delay: 360ms; }

/* -------- ENTRATA HERO (al load, puro CSS) ----------- */
@keyframes avalon-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Solo al primo accesso alla home nella sessione (classe su html via page-transition-dir.js) */
html:not(.hero-intro-done) body.home .hero__eyebrow,
html:not(.hero-intro-done) body.home .hero__title,
html:not(.hero-intro-done) body.home .hero__subtitle,
html:not(.hero-intro-done) body.home .hero__actions {
  opacity: 0;
  /* Durata esplicita: --transition-slow include già "ease" (per transition), non va in animation. */
  animation: avalon-fade-up 400ms var(--motion-ease-out) both;
}

html:not(.hero-intro-done) body.home .hero__eyebrow  { animation-delay: 0ms; }
html:not(.hero-intro-done) body.home .hero__title    { animation-delay: 80ms; }
html:not(.hero-intro-done) body.home .hero__subtitle { animation-delay: 160ms; }
html:not(.hero-intro-done) body.home .hero__actions  { animation-delay: 240ms; }

/* -------- MICRO-INTERAZIONI ----------- */
/* Lieve sollevamento su hover, coerente con i social link del footer. */
.btn,
.orari__btn,
.domande__btn,
.location__btn {
  transition:
    background-color var(--transition-normal),
    color var(--transition-normal),
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    filter var(--transition-normal);
}

@media (hover: hover) {
  .btn:hover,
  .orari__btn:hover,
  .domande__btn:hover,
  .location__btn:hover {
    transform: translateY(-2px);
  }

  .btn:active,
  .orari__btn:active,
  .domande__btn:active,
  .location__btn:active {
    transform: translateY(0);
  }
}

/* -------- ACCESSIBILITA': riduci movimento ----------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .hero__eyebrow,
  .hero__title,
  .hero__subtitle,
  .hero__actions,
  .hero .btn-primary,
  .prenota-book__cta {
    opacity: 1;
    animation: none;
  }

  .btn,
  .orari__btn,
  .domande__btn,
  .location__btn {
    transition: none;
  }

  .btn:hover,
  .orari__btn:hover,
  .domande__btn:hover,
  .location__btn:hover {
    transform: none;
  }

  /* Transizioni di pagina: navigazione istantanea */
  body.page-is-leaving .page-slide-target,
  body.page-is-entering .page-slide-target,
  body.page-is-entering.page-enter-active .page-slide-target,
  html.page-await-enter .page-slide-root,
  html.page-await-enter .page-wrapper,
  html.page-await-enter body > .hero,
  html.page-await-enter body > .footer {
    opacity: 1;
    transform: none;
    transition: none;
  }
}