/* ============================================================================
   PANIFICIO MARZO PWA — Animazioni (preview anim 2026-05-07)
   Pacchetto:
     1) Fade-in + slide-up allo scroll
     2) Stagger su liste (80ms via --idx)
     5) Micro-interazioni pulsanti (bounce, hover lift)
     LOGO SVG: si ridisegna SEMPRE all'apertura
   Plus FIX LAYOUT (v3):
     - Header fisso non copre più i titoli pagina (catalogo/territorio/negozi)
     - Spaziatura card e sezioni home raddoppiata (+100%)
   Tutte le animazioni rispettano prefers-reduced-motion (bypass via ?anim=force).
============================================================================ */

/* ── FIX LAYOUT: altezza header + padding-top sicuro per le pagine ───────── */

:root {
  /* Altezza dell'header sticky superiore. Tiene conto della safe-area (notch iOS).
     Valore base 52px + safe-area-inset-top, che combacia con #app-header
     (height: calc(52px + env(safe-area-inset-top, 0px)) nel <style> inline). */
  --pm-header-h: calc(52px + env(safe-area-inset-top, 0px));
  /* Padding-top sicuro per le pagine non-home: header + buffer 1.5rem (~24px) */
  --pm-page-top: calc(var(--pm-header-h) + 1.5rem);
}

/* I tre sotto-header che venivano coperti dal fixed header:
   il padding-top originale era 2.2rem (~35px) — non bastava.
   Ora sono spostati sotto l'header con buffer di 1.5rem. */
.catalogo-header,
.territorio-header,
.negozi-header {
  padding-top: var(--pm-page-top) !important;
}

/* ── FIX SPAZI: distanza tra card e sezioni +100% ────────────────────────── */

/* Card grid: gap raddoppiato 0.8rem → 1.6rem */
.prodotti-grid { gap: 1.6rem !important; }

/* Card individuali: margin-bottom raddoppiato */
.news-card        { margin-bottom: 1.6rem !important; }   /* 0.8rem → 1.6rem */
.sentiero-card    { margin-bottom: 1.6rem !important; }   /* 0.8rem → 1.6rem */
.ristoro-card     { margin-bottom: 1.6rem !important; }   /* 0.8rem → 1.6rem */
.prodlocale-card  { margin-bottom: 1.6rem !important; }   /* 0.8rem → 1.6rem */
.rivendita-card   { margin-bottom: 1.4rem !important; }   /* 0.7rem → 1.4rem */

/* Negozi block: margin verticale raddoppiato (laterale invariato) */
.negozio-block { margin: 1.6rem 1rem !important; }   /* 0.8rem 1rem → 1.6rem 1rem */

/* Lista link laviadelpane: gap raddoppiato */
.lvdp-links { gap: 1.2rem !important; }   /* 0.6rem → 1.2rem */

/* Sezioni home: padding verticale raddoppiato (laterale invariato) */
.home-valori     { padding-top: 5rem !important; padding-bottom: 5rem !important; } /* 2.5rem → 5rem */
.home-news       { padding-top: 5rem !important; padding-bottom: 5rem !important; } /* 2.5rem → 5rem */
.home-eventi     { padding-top: 2rem !important; padding-bottom: 1rem !important; } /* 1rem/0.5rem → 2rem/1rem (override inline style) */
.home-storia     { padding-top: 6rem !important; padding-bottom: 6rem !important; } /* 3rem → 6rem */
.home-missione   { padding-top: 5rem !important; padding-bottom: 5rem !important; } /* 2.5rem → 5rem */
.home-lvdp       { padding-top: 5rem !important; padding-bottom: 5rem !important; } /* 2.5rem → 5rem */
.home-leadmagnet { padding-top: 5rem !important; padding-bottom: 5rem !important; } /* 2.5rem → 5rem */


/* ── 1) FADE-IN + SLIDE-UP SCROLL ─────────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 500ms cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
  /* will-change applicato solo prima dell'attivazione */
  will-change: opacity, transform;
}
.reveal.reveal--in {
  opacity: 1;
  transform: translateY(0);
  /* dopo l'animazione si potrebbe rimuovere will-change via JS, ma il guadagno è marginale */
}

/* ── 2) STAGGER SU LISTE (--idx 0..11) ────────────────────────────────────── */

.reveal[data-stagger] {
  transition-delay: calc(var(--idx, 0) * 80ms);
}
/* Cap a 12: per --idx > 11 il delay è uguale a quello di --idx=11
   (il JS si occupa di non incrementare oltre, ma per sicurezza tronca anche qui) */

/* ── 5) MICRO-INTERAZIONI PULSANTI ────────────────────────────────────────── */

/* Selettori dei "pulsanti" del Panificio Marzo */
.btn-primary,
.btn-ghost,
.btn-tel,
.btn-maps,
.btn-maps-small,
.btn-zaino,
.install-btn,
.install-close,
.header-negozi-btn,
.cat-tab,
.ter-tab,
.nav-item,
.prodotto-card,
.lvdp-link-card,
.rivendita-map-link,
.social-btn {
  /* Base: micro-bounce su press */
  transition:
    transform 100ms cubic-bezier(0.4, 0, 0.2, 1),
    background-color 200ms ease,
    box-shadow 220ms ease,
    color 200ms ease,
    border-color 200ms ease,
    opacity 200ms ease;
}

/* Press → bounce (sovrascrive l'esistente :active dove serve, mantenendo background/colore) */
.btn-primary:active,
.btn-ghost:active,
.btn-tel:active,
.btn-maps:active,
.btn-maps-small:active,
.btn-zaino:active,
.install-btn:active,
.header-negozi-btn:active,
.cat-tab:active,
.ter-tab:active,
.nav-item:active,
.prodotto-card:active,
.lvdp-link-card:active,
.social-btn:active {
  transform: scale(0.96);
}

/* Hover (solo desktop con puntatore fine) */
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover,
  .btn-tel:hover,
  .btn-maps:hover,
  .btn-maps-small:hover,
  .install-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(46, 26, 14, 0.18);
  }
  .btn-ghost:hover {
    color: var(--bianco);
    border-color: rgba(255, 253, 248, 0.55);
  }
  .btn-zaino:hover {
    background: rgba(61, 90, 62, 0.08);
  }
  .prodotto-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(46, 26, 14, 0.14);
  }
  .lvdp-link-card:hover {
    background: rgba(255, 253, 248, 0.18);
  }
  .cat-tab:hover:not(.active) {
    border-color: var(--rosso);
    color: var(--rosso);
  }
  .nav-item:hover { background: rgba(255, 253, 248, 0.05); }
}

/* ── LOGO SVG: scrittura una volta per sessione ───────────────────────────── */

.pm-logo-svg {
  display: block;
  width: 168px;
  height: 38px;
  overflow: visible;
}
.pm-logo-main {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--crema);
}
.pm-logo-sub {
  font-family: 'Parisienne', cursive;
  /* Bump v6→v7: +30% sottotitolo header "Valle di Susa dal 1953"
     11.5px × 1.3 = 14.95px (più leggibile sul header scuro) */
  font-size: 14.95px;
  fill: var(--crema-dk);
  opacity: 0.85;
}

/* Stato base: già "scritto" — usato dopo la prima visualizzazione */
.pm-logo-svg .pm-logo-main { fill: var(--crema); stroke: none; }
.pm-logo-svg .pm-logo-sub  { opacity: 0.85; }

/* Stato animato: solo se la classe .draw è presente */
.pm-logo-svg.draw .pm-logo-main {
  fill: transparent;
  stroke: var(--crema);
  stroke-width: 0.6;
  stroke-dasharray: 800;
  stroke-dashoffset: 800;
  animation:
    pmLogoDraw 1800ms cubic-bezier(0.65, 0, 0.35, 1) 200ms forwards,
    pmLogoFill 600ms ease-out 1700ms forwards;
}
.pm-logo-svg.draw .pm-logo-sub {
  opacity: 0;
  animation: pmLogoSubFade 700ms ease-out 2100ms forwards;
}

@keyframes pmLogoDraw {
  from { stroke-dashoffset: 800; }
  to   { stroke-dashoffset: 0; }
}
@keyframes pmLogoFill {
  from { fill: transparent;        stroke-opacity: 1; }
  to   { fill: var(--crema);       stroke-opacity: 0; }
}
@keyframes pmLogoSubFade {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 0.85; transform: translateY(0); }
}

/* ── ACCESSIBILITÀ: prefers-reduced-motion ────────────────────────────────────
   Override solo se l'utente NON ha forzato le animazioni con ?anim=force.
   Quando JS rileva il query param, setta data-force-anim sull'<html> e questo
   blocco viene escluso. Comportamento di default (nessun query param):
   reduced-motion viene rispettato — niente fade, niente disegno logo.
─────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  /* Niente fade-in / slide-up: il contenuto è subito visibile */
  html:not([data-force-anim]) .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  html:not([data-force-anim]) .reveal[data-stagger] {
    transition-delay: 0ms !important;
  }

  /* Pulsanti: niente bounce, niente hover lift */
  html:not([data-force-anim]) .btn-primary,
  html:not([data-force-anim]) .btn-ghost,
  html:not([data-force-anim]) .btn-tel,
  html:not([data-force-anim]) .btn-maps,
  html:not([data-force-anim]) .btn-maps-small,
  html:not([data-force-anim]) .btn-zaino,
  html:not([data-force-anim]) .install-btn,
  html:not([data-force-anim]) .header-negozi-btn,
  html:not([data-force-anim]) .cat-tab,
  html:not([data-force-anim]) .ter-tab,
  html:not([data-force-anim]) .nav-item,
  html:not([data-force-anim]) .prodotto-card,
  html:not([data-force-anim]) .lvdp-link-card,
  html:not([data-force-anim]) .social-btn,
  html:not([data-force-anim]) .install-close,
  html:not([data-force-anim]) .rivendita-map-link {
    transition: background-color 0ms, color 0ms, border-color 0ms !important;
  }
  html:not([data-force-anim]) .btn-primary:active,
  html:not([data-force-anim]) .btn-ghost:active,
  html:not([data-force-anim]) .btn-tel:active,
  html:not([data-force-anim]) .btn-maps:active,
  html:not([data-force-anim]) .btn-maps-small:active,
  html:not([data-force-anim]) .btn-zaino:active,
  html:not([data-force-anim]) .install-btn:active,
  html:not([data-force-anim]) .header-negozi-btn:active,
  html:not([data-force-anim]) .cat-tab:active,
  html:not([data-force-anim]) .ter-tab:active,
  html:not([data-force-anim]) .nav-item:active,
  html:not([data-force-anim]) .prodotto-card:active,
  html:not([data-force-anim]) .lvdp-link-card:active,
  html:not([data-force-anim]) .social-btn:active {
    transform: none !important;
  }
  @media (hover: hover) and (pointer: fine) {
    html:not([data-force-anim]) .btn-primary:hover,
    html:not([data-force-anim]) .btn-tel:hover,
    html:not([data-force-anim]) .btn-maps:hover,
    html:not([data-force-anim]) .btn-maps-small:hover,
    html:not([data-force-anim]) .install-btn:hover,
    html:not([data-force-anim]) .prodotto-card:hover {
      transform: none !important;
      box-shadow: none !important;
    }
  }

  /* Logo: appare già completo, niente disegno */
  html:not([data-force-anim]) .pm-logo-svg.draw .pm-logo-main {
    fill: var(--crema) !important;
    stroke: none !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    animation: none !important;
  }
  html:not([data-force-anim]) .pm-logo-svg.draw .pm-logo-sub {
    opacity: 0.85 !important;
    animation: none !important;
  }
}