/* ==========================================================================
   TN Barbershop — animations.css
   Sistema di motion: solo transform e opacity. Le animazioni legate allo
   scroll sono attivate da IntersectionObserver (js/animations.js).
   Senza JavaScript (classe .js assente) tutti i contenuti restano visibili.
   ========================================================================== */

:root {
  --dur-fast: 0.35s;
  --dur: 0.9s;
}

/* ---------- Reveal allo scroll ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
  transition-delay: var(--delay, 0s);
}
.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Ingresso hero (CSS puro, coordinato) ---------- */
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
@keyframes line-up {
  from { transform: translateY(112%); }
  to   { transform: none; }
}
@keyframes arch-in {
  from { opacity: 0; transform: scale(1.14); }
  to   { opacity: 1; transform: none; }
}
@keyframes pop-in {
  from { opacity: 0; transform: translateY(24px) scale(0.92); }
  to   { opacity: 1; transform: none; }
}
@keyframes frame-in {
  from { opacity: 0; transform: translate(16px, -16px); }
  to   { opacity: 1; transform: none; }
}

.hero__eyebrow { animation: rise 0.8s var(--ease) 0.1s both; }
.hero__title .line > span { animation: line-up 1.1s var(--ease) both; }
.hero__title .line:nth-child(1) > span { animation-delay: 0.2s; }
.hero__title .line:nth-child(2) > span { animation-delay: 0.34s; }
.hero__lead { animation: rise 0.9s var(--ease) 0.6s both; }
.chips { animation: rise 0.9s var(--ease) 0.72s both; }
.hero__actions { animation: rise 0.9s var(--ease) 0.84s both; }
.hero__arch img { animation: arch-in 1.5s var(--ease) 0.25s both; }
.hero__media::before { animation: frame-in 1.2s var(--ease) 0.6s both; }
.hero__chip { animation: pop-in 1s var(--ease) 0.95s both; }
.hero__place { animation: rise 0.9s var(--ease) 1.15s both; }

/* ---------- Menu mobile (stati) ---------- */
@keyframes nav-link-in {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Filtro servizi ---------- */
@keyframes col-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.menu__col.is-entering { animation: col-in 0.55s var(--ease) both; }

/* ---------- Lightbox ---------- */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes img-swap {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.lightbox[open] { animation: fade-in 0.35s ease both; }
.lightbox__img.is-swapping { animation: img-swap 0.45s var(--ease) both; }

/* ---------- Cookie banner e preferenze ---------- */
@keyframes sheet-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(24px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.cookie-banner:not([hidden]) { animation: sheet-up 0.6s var(--ease) 0.4s both; }
.prefs[open] { animation: dialog-in 0.45s var(--ease) both; }
.prefs[open]::backdrop { animation: fade-in 0.35s ease both; }

/* ---------- Movimento ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .hero__arch { transform: none !important; }
}