/* ============================================================
   MonteSoprano — Hello Child · assets/css/ms-animations.css
   Animazioni PREMIUM a 0 KB JS · "Allevatori Editoriale"
   ------------------------------------------------------------
   Un solo gesto ripetuto con disciplina: LIFT+FADE
   (translateY<=24px + opacity). Solo transform/opacity (GPU),
   durate 150-400ms, easing --ease. Scroll-driven via view().
   Fallback SEMPRE visibile (mai nascosto senza supporto).
   Mai animare l'immagine LCP. Rispetta prefers-reduced-motion.
   NIENTE @import. I token (--ease, --dur) vivono in ms-tokens.css.
   ============================================================ */

/* ---- Token motion locali (fallback se ms-tokens.css assente) ---- */
:root{
  --ms-ease:cubic-bezier(.22,1,.36,1);     /* easing canonico unico: expo ease-out (firma brand) */
  --ms-dur-1:150ms;                          /* micro (hover) */
  --ms-dur-2:240ms;                          /* standard (drawer) */
  --ms-dur-3:400ms;                          /* reveal generoso */
  --ms-lift:24px;                            /* translateY massimo */
  --ms-lift-sm:12px;                         /* lift ridotto (stagger) */
  --ms-reveal-range:14% 46%;                 /* range view() del reveal */
}

/* ============================================================
   1. KEYFRAME UNICO — lift + fade
   ============================================================ */
@keyframes ms-lift-fade{
  from{opacity:0;transform:translateY(var(--ms-lift))}
  to{opacity:1;transform:translateY(0)}
}
/* Variante laterale per drawer/menu mobile (mini-cart, nav) */
@keyframes ms-slide-in-right{
  from{transform:translateX(100%)}
  to{transform:translateX(0)}
}

/* ============================================================
   2. REVEAL ON-SCROLL — scroll-driven, 0 KB JS
   Fallback = elemento GIA' visibile. Dentro @supports nascondo
   e rivelo solo dove animation-timeline: view() e' supportato.
   ============================================================ */

/* Stato base: SEMPRE visibile (nessun browser resta al buio) */
.ms-reveal,
.ms-reveal-stagger > *{
  opacity:1;
  transform:none;
}

@supports (animation-timeline: view()){
  /* Blocco singolo: fade+lift mentre entra nel viewport */
  .ms-reveal{
    opacity:0;                       /* solo qui e' lecito nascondere */
    animation:ms-lift-fade linear both;
    animation-timeline:view();
    animation-range:entry var(--ms-reveal-range);
    will-change:transform,opacity;
  }

  /* Cascata (stagger): i figli entrano sfalsati, max ~3 step percepiti.
     Ogni figlio ha il proprio timeline view() con range progressivo:
     0 KB JS, nessun delay JS, funziona anche su liste lunghe. */
  .ms-reveal-stagger > *{
    opacity:0;
    animation:ms-lift-fade linear both;
    animation-timeline:view();
    animation-range:entry 6% entry 42%;
    will-change:transform,opacity;
  }
  .ms-reveal-stagger > :nth-child(3n+2){animation-range:entry 10% entry 46%}
  .ms-reveal-stagger > :nth-child(3n+3){animation-range:entry 14% entry 50%}

  /* Lift piu' contenuto per gli elementi in cascata (piu' misurato) */
  .ms-reveal-stagger > *{--ms-lift:var(--ms-lift-sm)}

  /* Reveal "soft": solo fade, senza lift (per blocchi ampi/hero secondari) */
  .ms-reveal--fade{--ms-lift:0px}

  /* SALVAGUARDIA LCP: qualunque elemento marcato come critico
     NON viene mai nascosto ne' animato in entrata. */
  .ms-lcp,
  .ms-no-reveal,
  [data-lcp]{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
  }
}

/* ============================================================
   3. HOVER / MICRO-INTERAZIONI — leggere, solo compositor
   (le card di prodotto/camera/servizio zoom img 1.03 + --shadow
    sono gia' nei componenti; qui i default trasversali)
   ============================================================ */

/* Zoom immagine dentro qualsiasi wrapper .ms-zoom (hover/focus-within) */
.ms-zoom{overflow:hidden}
.ms-zoom img{
  transition:transform var(--ms-dur-2) var(--ms-ease);
  will-change:transform;
}
@media (hover:hover){
  .ms-zoom:hover img,
  .ms-zoom:focus-within img{transform:scale(1.03)}
}

/* Lift al hover per tessere-router e card cliccabili */
.ms-hoverable{
  transition:transform var(--ms-dur-1) var(--ms-ease),
             box-shadow var(--ms-dur-1) var(--ms-ease);
}
@media (hover:hover){
  .ms-hoverable:hover{transform:translateY(-4px)}
}

/* Underline animato per link editoriali (grow da sinistra) */
.ms-link-underline{position:relative}
.ms-link-underline::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;
  background:currentColor;transform:scaleX(0);transform-origin:left;
  transition:transform var(--ms-dur-1) var(--ms-ease);
}
@media (hover:hover){
  .ms-link-underline:hover::after{transform:scaleX(1)}
}

/* Drawer laterale (mini-cart / nav mobile) — attivabile via classe.
   L'apertura resta lato markup (:has()/checkbox nel componente). */
.ms-drawer[data-open="true"],
.ms-drawer.is-open{
  animation:ms-slide-in-right var(--ms-dur-2) var(--ms-ease) both;
  will-change:transform;
}

/* Focus ring coerente col brand (accessibilita', non decorativo) */
.ms-focusable:focus-visible{
  outline:2px solid var(--ms-red,#D41119);
  outline-offset:2px;
}

/* ============================================================
   4. VIEW TRANSITIONS API — navigazioni cross-fade + elementi
   condivisi che "crescono". 0 KB JS: navigation:auto.
   ============================================================ */
@view-transition{navigation:auto}

/* Cross-fade globale morbido tra le pagine dell'hub */
::view-transition-group(root){
  animation-duration:var(--ms-dur-2);
  animation-timing-function:var(--ms-ease);
}

/* --- Elemento condiviso PLP <-> PDP (immagine prodotto) ---
   Sulla card PLP e sulla gallery PDP, la STESSA immagine porta:
     view-transition-name:ms-prod-<id>  (univoco per prodotto)
   Esempio statico per il prodotto in evidenza: */
.ms-vt-product{
  view-transition-name:ms-product-hero;
  contain:layout;                 /* isola il nome, evita conflitti */
}

/* --- Elemento condiviso Card camera <-> Scheda camera ---
   Stessa immagine 4/3 sulla .ms-room-card e sulla gallery camera: */
.ms-vt-room{
  view-transition-name:ms-room-hero;
  contain:layout;
}

/* Morphing dell'immagine condivisa: cresce/decresce con --ease */
::view-transition-group(ms-product-hero),
::view-transition-group(ms-room-hero){
  animation-duration:var(--ms-dur-3);
  animation-timing-function:var(--ms-ease);
}
/* L'immagine condivisa non deve sfarfallare: niente fade sul contenuto,
   solo il morph geometrico del gruppo. */
::view-transition-old(ms-product-hero),
::view-transition-new(ms-product-hero),
::view-transition-old(ms-room-hero),
::view-transition-new(ms-room-hero){
  animation:none;                 /* nessun cross-fade sull'immagine */
  mix-blend-mode:normal;
  height:100%;
}

/* NOTA build: assegnare via PHP/template il nome univoco per riga,
   es. style="view-transition-name:ms-product-<?php echo $id; ?>"
   sull'img della card e sull'img della gallery corrispondente. */

/* ============================================================
   5. UTILITY di supporto
   ============================================================ */
/* Ritardo manuale opzionale (per sequenze fuori dallo stagger auto) */
.ms-delay-1{animation-delay:60ms}
.ms-delay-2{animation-delay:120ms}
.ms-delay-3{animation-delay:180ms}

/* Blocco che non deve MAI animarsi (above-the-fold critico) */
.ms-static{animation:none!important;transform:none!important;opacity:1!important}

/* ============================================================
   6. prefers-reduced-motion — AZZERA TUTTO
   L'utente vede sempre il contenuto finale, mai in movimento.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    animation-delay:0ms!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .ms-reveal,
  .ms-reveal-stagger > *{
    opacity:1!important;
    transform:none!important;
    animation:none!important;
  }
  .ms-zoom:hover img,
  .ms-zoom:focus-within img,
  .ms-hoverable:hover{transform:none!important}

  /* Disattiva le View Transitions animate */
  @supports (animation-timeline: view()){
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*){animation:none!important}
  }
}