/* ==========================================================================
   PILI PIZZA - ANIMATIONS
   Regle absolue : l'etat par defaut du HTML est VISIBLE.
   La classe .js, posee par un script en ligne avant le rendu, autorise
   l'animation. Sans JavaScript, rien n'est masque.
   Seuls transform et opacity sont animes.
   ========================================================================== */

/* --- Reveal au defilement ------------------------------------------------ */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--delay, 0ms);
}

/* Sortie de secours : posee par le JavaScript quand l'IntersectionObserver
   s'avere inoperant. Elle annule tout masquage. */
html.no-reveal .reveal,
html.no-reveal .hero__content > * {
  opacity: 1 !important;
  transform: none !important;
}
/* Le masquage ne tient pas qu'a l'opacite. Sans les trois lignes qui suivent,
   la sortie de secours laissait le visuel du hero zoome a 1,06 pour toujours,
   la parallaxe figee sur son dernier decalage, et l'anneau de marque
   litteralement invisible : son trace n'avait jamais ete lance. */
html.no-reveal .hero__media img,
html.no-reveal .parallax img { transform: none !important; }
html.no-reveal .ring-mark__svg circle { stroke-dashoffset: 0 !important; }

/* --- Sequence du hero ---------------------------------------------------- */
.js .hero__content > * {
  opacity: 0;
  transform: translateY(18px);
}
.js .hero.is-ready .hero__content > * {
  opacity: 1;
  transform: none;
  transition: opacity 720ms var(--ease-out), transform 720ms var(--ease-out);
}
.js .hero.is-ready .hero__mark { transition-delay: 60ms; }
.js .hero.is-ready .hero__eyebrow { transition-delay: 150ms; }
.js .hero.is-ready h1 { transition-delay: 240ms; }
.js .hero.is-ready .hero__lede { transition-delay: 330ms; }
.js .hero.is-ready .hero__cta { transition-delay: 420ms; }

.js .hero__media img { transform: scale(1.06); }
.js .hero.is-ready .hero__media img {
  transform: scale(1);
  transition: transform 1200ms var(--ease-out);
}

/* --- Anneau de marque : le trace se dessine ------------------------------ */
.js .ring-mark__svg circle {
  stroke-dasharray: 268 314;
  stroke-dashoffset: 268;
}
.js .ring-mark.is-in .ring-mark__svg circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1400ms var(--ease-out);
}

/* --- Anneau tournant de Pili distrib' ------------------------------------
   C'est le procede typographique du logo lui-meme : du texte en capitales
   espacees qui court sur un cercle. Pause au survol et au focus.            */
.ring-text__spin {
  transform-origin: 50% 50%;
  animation: ring-spin 44s linear infinite;
}
.distrib__ring:hover .ring-text__spin,
.distrib__ring:focus-within .ring-text__spin { animation-play-state: paused; }

@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- Parallaxe verticale : pilotee en JS via --shift, jamais en background */
.parallax img { will-change: auto; }
.js .parallax.is-active img { transform: translate3d(0, var(--shift, 0px), 0); }

/* --- Pulsation unique du bouton telephone au mobile ---------------------- */
@keyframes phone-pulse {
  0%, 100% { transform: scale(1); }
  38% { transform: scale(1.045); }
  62% { transform: scale(0.995); }
}
.js .btn--pulse.is-pulsing { animation: phone-pulse 760ms var(--ease-inout) 1; }

/* --- Compteur ------------------------------------------------------------ */
.counter { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   MOUVEMENT REDUIT
   Tout devient instantane. Aucun mouvement, y compris la rotation de
   l'anneau et la parallaxe.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal,
  .js .hero__content > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .js .hero__media img { transform: none !important; }
  .js .parallax.is-active img { transform: none !important; }
  .js .ring-mark__svg circle { stroke-dashoffset: 0 !important; }
  .ring-text__spin { animation: none !important; }
  .media--zoom:hover img { transform: none !important; }
  .btn::before { transition: none !important; }
}