/* Mouvement — partie CSS.
 *
 * RÈGLE : les ENTRÉES appartiennent à GSAP (js/motion.js). Ce fichier ne
 * contient que ce que GSAP ne doit pas gérer : réactions au doigt, ambiances
 * en boucle, et l'en-tête qui se resserre au défilement.
 *
 * Ne jamais remettre ici une animation d'entrée sur un élément que GSAP
 * touche : une animation CSS l'emporte sur le style en ligne pendant qu'elle
 * tourne, et écrase silencieusement la parallaxe et les séquences. */

:root {
  --ease-sortie: cubic-bezier(.22, .61, .36, 1);
  --ease-entree: cubic-bezier(.16, .84, .44, 1);
  --t-court: .18s;
  --t-moyen: .32s;
}

/* Sous le doigt ─────────────────────────────────────────────────────────── */

.action, .grid__item, .list__item, .cat, .opt, .mealbar,
.iconbtn, .viewtoggle button, .unit button, .artoggle button, .voice__opt {
  transition: transform var(--t-court) var(--ease-sortie),
              background-color var(--t-court) linear,
              border-color var(--t-court) linear,
              color var(--t-court) linear;
  -webkit-tap-highlight-color: transparent;
}

.action:active, .grid__item:active, .list__item:active,
.opt:active, .mealbar:active { transform: scale(.96); }
.iconbtn:active, .cat:active, .viewtoggle button:active,
.unit button:active, .artoggle button:active { transform: scale(.9); }

/* Le bouton principal se fait balayer d'un éclat à l'appui. */
.action--primary { position: relative; overflow: hidden; }
.action--primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.34) 50%, transparent 70%);
  transform: translateX(-120%);
  pointer-events: none;
}
.action--primary:active::after {
  transform: translateX(120%);
  transition: transform .55s var(--ease-sortie);
}

/* GSAP anime l'échelle horizontale des jauges : il lui faut une origine. */
.gauge__fill, .mealbar__fill, .macrobar__seg { transform-origin: left center; }

/* Ambiances en boucle ───────────────────────────────────────────────────── */

@keyframes cible-respire {
  0%, 100% { transform: scale(1);    opacity: 1;   }
  50%      { transform: scale(1.035); opacity: .82; }
}
.scan__target { animation: cible-respire 3s ease-in-out infinite; }

@keyframes balayage { from { transform: translateY(-100%); } to { transform: translateY(400%); } }
.ar__stage:not([data-charge])::after {
  content: ''; position: absolute; left: 0; right: 0; height: 25%;
  background: linear-gradient(180deg, transparent, rgba(236,48,19,.22), transparent);
  animation: balayage 1.4s linear infinite;
  pointer-events: none;
}

/* En-tête qui se resserre (piloté par la classe posée dans motion.js) ───── */

.menu__head { transition: padding-top var(--t-moyen) var(--ease-sortie); }
.menu__resto { transition: font-size var(--t-moyen) var(--ease-sortie); }
.menu__table {
  transition: opacity var(--t-moyen) var(--ease-sortie),
              max-height var(--t-moyen) var(--ease-sortie);
  max-height: 3rem; overflow: hidden;
}
.menu--compact .menu__resto { font-size: 1.28rem; }
.menu--compact .menu__table { opacity: 0; max-height: 0; }
.menu--compact .menu__head { padding-top: calc(var(--safe-top) * .62); }

/* La photo du détail est déplacée en continu au défilement : on prévient le
   compositeur, sinon le déplacement saccade sur les téléphones modestes. */
.detail__hero .photo { will-change: transform; }

/* Confort ───────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .detail__hero .photo { transform: none !important; }
}