/**
 * JUNK Plastic Rehab — Animations
 * Covers: scroll-reveal, custom cursor, magnetic buttons, impact counter.
 *
 * Tutto è avvolto in @media (prefers-reduced-motion: no-preference) per
 * rispettare automaticamente chi ha disabilitato le animazioni nel SO.
 */

/* ──────────────────────────────────────────────────────────────────────────
   PAGE TRANSITIONS
   Dissolvenza in entrata/uscita tra le pagine.
   Lo JS aggiunge .page-is-leaving al body al click su un link interno,
   e rimuove .page-is-entering all'evento pageshow.
────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /*
   * IMPORTANTE: NON usare transform su #page.
   * I drawer (cart, mobile-menu, search) sono position:fixed e se il
   * parent ha un transform diventano il loro containing block → appaiono
   * fuori posto (es. dopo il footer su mobile).
   * Usiamo solo opacity per evitare qualsiasi nuovo stacking context.
   */
  #page {
    animation: page-enter 0.4s ease both;
  }

  @keyframes page-enter {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  body.page-is-leaving #page {
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   SCROLL REVEAL
   Gli elementi con [data-reveal] partono invisibili e scivolano in scena
   quando entrano nella viewport. Lo JS aggiunge .is-revealed via
   IntersectionObserver quando sono visibili al 10%.

   Varianti:
     data-reveal="fade"        → solo dissolvenza
     data-reveal="up"          → sale dal basso (default)
     data-reveal="left"        → entra da sinistra
     data-reveal="right"       → entra da destra
     data-reveal="scale"       → scala da 0.9 a 1

   Delay stagger con data-reveal-delay="100" (ms, max 800)
────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

  /* ── Stato iniziale (nascosto) ── */
  [data-reveal] {
    opacity: 0;
    transition:
      opacity   0.7s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
  }

  [data-reveal="up"],
  [data-reveal] {
    transform: translateY(36px);
  }

  [data-reveal="fade"] {
    transform: none;
  }

  [data-reveal="left"] {
    transform: translateX(-48px);
  }

  [data-reveal="right"] {
    transform: translateX(48px);
  }

  [data-reveal="scale"] {
    transform: scale(0.92);
  }

  /* ── Delay stagger (injettati inline con style="--reveal-delay:Xms") ── */
  [data-reveal][style*="--reveal-delay"] {
    transition-delay: var(--reveal-delay, 0ms);
  }

  /* ── Stato visibile ── */
  [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
  }

  /* ── Product cards: stagger automatico via nth-child ─────────────────── */
  .product-grid .product-card:nth-child(2) { --reveal-delay: 80ms;  }
  .product-grid .product-card:nth-child(3) { --reveal-delay: 160ms; }
  .product-grid .product-card:nth-child(4) { --reveal-delay: 240ms; }
  .product-grid .product-card:nth-child(5) { --reveal-delay: 120ms; }
  .product-grid .product-card:nth-child(6) { --reveal-delay: 200ms; }

}

/* ──────────────────────────────────────────────────────────────────────────
   HERO TITLE — Glitch effect
   Tecnica: ::before (ciano, sfalsato a sinistra) e ::after (arancio, destra)
   duplicano il testo via content:attr(data-text), impostato dallo JS.
   clip-path:inset() rivela solo fasce orizzontali casuali a ogni keyframe.
   Il burst dura ~0.8 s su un ciclo di 5 s → effetto intermittente e naturale.
   Wrappato in prefers-reduced-motion per rispettare le impostazioni utente.
────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {

  .block-hero__title {
    position: relative;
  }

  .block-hero__title::before,
  .block-hero__title::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* pre-line: rispetta i \n che innerText inserisce al posto dei <br> */
    white-space: pre-line;
    overflow: hidden;
    /* nascosto di default: clip-path taglia tutto dal basso */
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    /* Stessi stili tipografici del parent, ereditati tranne il colore */
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    letter-spacing: inherit;
  }

  /* Canale ciano — sfalsato a sinistra */
  .block-hero__title::before {
    color: #0af;
    animation: hero-glitch-before 5s linear infinite;
  }

  /* Canale arancio/rosso — sfalsato a destra */
  .block-hero__title::after {
    color: #f40;
    animation: hero-glitch-after 5s linear infinite;
    animation-delay: -0.12s; /* offset di fase per non sincronizzarsi con ::before */
  }

  /* ──
     Burst di glitch nell'ultimo 16% del ciclo (≈0.8 s su 5 s).
     Alterna opacità 0/1 e clip-path per simulare lo sfarfallio casuale.
  ── */
  @keyframes hero-glitch-before {
    0%,  83%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateX(0); }
    84%  { opacity: 1; clip-path: inset( 7% 0 88% 0); transform: translateX(-6px); }
    85%  { opacity: 1; clip-path: inset(52% 0 38% 0); transform: translateX( 5px); }
    86%  { opacity: 1; clip-path: inset(25% 0 65% 0); transform: translateX(-4px); }
    87%  { opacity: 1; clip-path: inset(75% 0 15% 0); transform: translateX( 6px); }
    88%  { opacity: 0; clip-path: inset( 0  0 100% 0); transform: translateX( 0);   }
    89%  { opacity: 1; clip-path: inset(40% 0 50% 0); transform: translateX(-5px); }
    90%  { opacity: 1; clip-path: inset(12% 0 80% 0); transform: translateX( 4px); }
    91%  { opacity: 0; clip-path: inset( 0  0 100% 0); transform: translateX( 0);   }
    92%  { opacity: 1; clip-path: inset(60% 0 30% 0); transform: translateX(-6px); }
    93%  { opacity: 1; clip-path: inset(30% 0 58% 0); transform: translateX( 3px); }
    94%  { opacity: 0; clip-path: inset( 0  0 100% 0); transform: translateX( 0);   }
    95%  { opacity: 1; clip-path: inset(85% 0  8% 0); transform: translateX(-4px); }
    96%  { opacity: 1; clip-path: inset(18% 0 72% 0); transform: translateX( 5px); }
    97%  { opacity: 0; clip-path: inset( 0  0 100% 0); transform: translateX( 0);   }
    98%  { opacity: 1; clip-path: inset(48% 0 44% 0); transform: translateX(-5px); }
    99%  { opacity: 1; clip-path: inset(70% 0 22% 0); transform: translateX( 4px); }
  }

  @keyframes hero-glitch-after {
    0%,  85%, 100% { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateX(0); }
    86%  { opacity: 1; clip-path: inset(35% 0 55% 0); transform: translateX( 5px); }
    87%  { opacity: 1; clip-path: inset(63% 0 27% 0); transform: translateX(-4px); }
    88%  { opacity: 1; clip-path: inset(10% 0 82% 0); transform: translateX( 6px); }
    89%  { opacity: 0; clip-path: inset( 0  0 100% 0); transform: translateX( 0);   }
    90%  { opacity: 1; clip-path: inset(80% 0 12% 0); transform: translateX(-5px); }
    91%  { opacity: 1; clip-path: inset(45% 0 46% 0); transform: translateX( 4px); }
    92%  { opacity: 0; clip-path: inset( 0  0 100% 0); transform: translateX( 0);   }
    93%  { opacity: 1; clip-path: inset(20% 0 70% 0); transform: translateX(-5px); }
    94%  { opacity: 1; clip-path: inset(55% 0 38% 0); transform: translateX( 4px); }
    95%  { opacity: 0; clip-path: inset( 0  0 100% 0); transform: translateX( 0);   }
    96%  { opacity: 1; clip-path: inset(90% 0  5% 0); transform: translateX(-6px); }
    97%  { opacity: 1; clip-path: inset(28% 0 62% 0); transform: translateX( 3px); }
    98%  { opacity: 0; clip-path: inset( 0  0 100% 0); transform: translateX( 0);   }
    99%  { opacity: 1; clip-path: inset(68% 0 24% 0); transform: translateX(-5px); }
  }

}

/* ──────────────────────────────────────────────────────────────────────────
   CUSTOM CURSOR — Pixel Art  (solo pointer:fine = mouse)

   Strategia: cursore gestito nativamente dal browser via CSS cursor:url().
   Tracking perfetto, zero lag, nessuna animazione di inseguimento.

   Tre stati del cursore (immagini 48×48 px):
     default  → freccia pixel-art  (cursor-arrow.png,      hotspot  0  0)
     hover    → mano pixel-art     (cursor-hand.png,       hotspot 11  5)
     :active  → mano + click-spark (cursor-hand-click.png, hotspot 11  5)

   Quarto stato — loading (navigazione o AJAX):
     body.page-is-leaving  o  body.cursor-loading
     → cursore nativo nascosto + .jpr-hourglass (div JS) che segue
       il mouse e cicla i 5 frame PNG via setInterval.

   Drop-shadow bianco: rende il contorno nero visibile su sfondi scuri.
────────────────────────────────────────────────────────────────────────── */
@media (pointer: fine) {

  /* ── Freccia pixel-art di default ── */
  .has-custom-cursor,
  .has-custom-cursor * {
    cursor: url('../../img/cursor-arrow.png') 0 0, auto !important;
  }

  /* ── Mano su elementi interattivi ── */
  .has-custom-cursor a,
  .has-custom-cursor button,
  .has-custom-cursor [role="button"],
  .has-custom-cursor label,
  .has-custom-cursor select,
  .has-custom-cursor input[type="submit"],
  .has-custom-cursor input[type="button"],
  .has-custom-cursor input[type="reset"],
  .has-custom-cursor input[type="checkbox"],
  .has-custom-cursor input[type="radio"],
  .has-custom-cursor .product-card,
  .has-custom-cursor .btn {
    cursor: url('../../img/cursor-hand.png') 11 5, pointer !important;
  }

  /* ── SVI gallery stack: batte `.woosvi_strap img:hover { cursor:pointer !important }`
        (specificità SVI = 0,2,0,1 — qui usiamo 0,3,0,1 aggiungendo .has-custom-cursor) ── */
  .has-custom-cursor .woosvi_strap img,
  .has-custom-cursor .woosvi_strap img:hover,
  .has-custom-cursor .svistacked img,
  .has-custom-cursor .svistacked img:hover,
  .has-custom-cursor .svi-gallery-thumbs img,
  .has-custom-cursor .svi-gallery-thumbs img:hover,
  .has-custom-cursor .pdp-gallery__figure,
  .has-custom-cursor .pdp-gallery__img {
    cursor: url('../../img/cursor-hand.png') 11 5, pointer !important;
  }

  /* ── Click/active: mano con spark ── */
  .has-custom-cursor a:active,
  .has-custom-cursor button:active,
  .has-custom-cursor [role="button"]:active,
  .has-custom-cursor .product-card:active,
  .has-custom-cursor .btn:active {
    cursor: url('../../img/cursor-hand-click.png') 11 5, pointer !important;
  }

  /* ── Loading: nascondi cursore nativo, mostra la clessidra JS ──
        DEVE coprire anche gli stati :active e :hover altrimenti la loro
        specificità (0,2,0,1) supera il selettore * (0,2,0,0) e il
        cursore nativo rimane visibile sovrapposto alla clessidra.     ── */
  .has-custom-cursor.page-is-leaving,
  .has-custom-cursor.page-is-leaving *,
  .has-custom-cursor.page-is-leaving a,
  .has-custom-cursor.page-is-leaving a:hover,
  .has-custom-cursor.page-is-leaving a:active,
  .has-custom-cursor.page-is-leaving button,
  .has-custom-cursor.page-is-leaving button:active,
  .has-custom-cursor.page-is-leaving [role="button"]:active,
  .has-custom-cursor.page-is-leaving .product-card:active,
  .has-custom-cursor.page-is-leaving .btn:active,
  .has-custom-cursor.cursor-loading,
  .has-custom-cursor.cursor-loading *,
  .has-custom-cursor.cursor-loading a,
  .has-custom-cursor.cursor-loading a:hover,
  .has-custom-cursor.cursor-loading a:active,
  .has-custom-cursor.cursor-loading button,
  .has-custom-cursor.cursor-loading button:active,
  .has-custom-cursor.cursor-loading [role="button"]:active,
  .has-custom-cursor.cursor-loading .product-card:active,
  .has-custom-cursor.cursor-loading .btn:active {
    cursor: none !important;
  }

  /* ── Clessidra pixel-art (div posizionato + animato via JS) ── */
  .jpr-hourglass {
    position: fixed;
    top: 0; left: 0;
    width: 48px;
    height: 48px;
    background: no-repeat center / contain;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 1.5px rgba(255,255,255,0.8));
    opacity: 0;
    transition: opacity 0.1s;
    will-change: left, top;
    image-rendering: pixelated;
  }

  .has-custom-cursor.page-is-leaving .jpr-hourglass,
  .has-custom-cursor.cursor-loading  .jpr-hourglass {
    opacity: 1;
  }

}

/* ──────────────────────────────────────────────────────────────────────────
   MAGNETIC BUTTONS
   Lo JS applica un transform inline per attrarre il bottone verso il cursore.
   Qui definiamo solo la transizione del ritorno a riposo.
────────────────────────────────────────────────────────────────────────── */
@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn--primary,
  .btn--secondary,
  .wc-block-components-button,
  .single_add_to_cart_button {
    transition:
      transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
      background-color var(--transition),
      border-color     var(--transition),
      color            var(--transition),
      box-shadow       var(--transition);
  }

  /* Quando il cursore esce, il bottone torna fluido al centro */
  .btn--primary.magnetic-leave,
  .btn--secondary.magnetic-leave {
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   IMPACT COUNTER BLOCK  (.block-impact-counter)
   Usato nella homepage per mostrare: kg plastica riciclata, paia prodotte, ecc.
────────────────────────────────────────────────────────────────────────── */
.block-impact-counter {
  padding: var(--section-spacing, 80px) 0;
  background: var(--color-bg, #fff);
  border-top: var(--border);
  border-bottom: var(--border);
}

.block-impact-counter__header {
  text-align: center;
  margin-bottom: 48px;
}

.block-impact-counter__eyebrow {
  display: block;
  font-size: var(--typo-label-size, 0.75rem);
  font-weight: var(--typo-label-weight, 600);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  margin-bottom: 12px;
}

.block-impact-counter__title {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: var(--typo-h2-weight, 700);
  line-height: 1.15;
}

.block-impact-counter__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
}

.block-impact-counter__item {
  padding: 40px 24px;
  text-align: center;
  border-right: var(--border);
}

.block-impact-counter__item:last-child {
  border-right: none;
}

.block-impact-counter__number {
  display: block;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--typo-h1-weight, 800);
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
  color: var(--color-primary, #000);
}

.block-impact-counter__suffix {
  font-size: 0.6em;
  font-weight: 600;
  vertical-align: super;
  margin-left: 2px;
}

.block-impact-counter__label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-text-secondary, #666);
  line-height: 1.4;
  max-width: 140px;
  margin: 0 auto;
}

/* ── Animazione contatore ── */
@media (prefers-reduced-motion: no-preference) {
  .block-impact-counter__number {
    transition: opacity 0.4s ease;
  }
}

/* ── Responsive ── */
@media (max-width: 767px) {
  .block-impact-counter__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .block-impact-counter__item {
    border-right: var(--border);
    border-bottom: var(--border);
  }

  .block-impact-counter__item:nth-child(even) {
    border-right: none;
  }

  .block-impact-counter__item:nth-last-child(-n+2):nth-child(odd),
  .block-impact-counter__item:last-child {
    border-bottom: none;
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   SKELETON LOADING
   Aggiunto automaticamente sulle .product-card__image mentre carica
   (lo JS osserva l'evento load sull'immagine).
────────────────────────────────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.product-card__media.is-loading::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--color-border, #e5e5e5) 25%,
    #f0f0f0 37%,
    var(--color-border, #e5e5e5) 63%
  );
  background-size: 1200px 100%;
  animation: skeleton-shimmer 1.4s infinite linear;
  z-index: 1;
  border-radius: inherit;
}

.product-card__media { position: relative; }

.product-card__media.is-loading .product-card__image {
  opacity: 0;
}

.product-card__media .product-card__image {
  transition: opacity 0.35s ease;
}