/* Guillac Parts — effets de mouvement discrets (boutique : rien qui gêne l'achat).
   Chargé par functions.php (Réglages → Accueil animé → « Effets de navigation »). Tout est coupé avec « réduire les animations »,
   et chaque effet ne s'active que si le navigateur le connaît (sinon la page reste exactement comme avant). */

/* Titres sur des lignes équilibrées, paragraphes sans mot orphelin */
.h-section,.h-page,.hero-title,.h-product,.card-name{text-wrap:balance}
.prose p,.hero-text{text-wrap:pretty}

@media (prefers-reduced-motion:no-preference){
  /* ---------- Changement de page en fondu (View Transitions entre documents) ---------- */
  @view-transition{navigation:auto}
  .top{view-transition-name:gp-top} /* l'en-tête ne clignote pas d'une page à l'autre */
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.2s}
  /* Photo de la carte produit qui s'agrandit en photo de la fiche (nom posé par guillac.js au clic) */
  ::view-transition-group(gp-shot){animation-duration:.38s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
  ::view-transition-old(gp-shot),::view-transition-new(gp-shot){height:100%;width:100%;object-fit:contain}

  /* ---------- Apparition au défilement (cartes, catégories, titres) ---------- */
  @supports (animation-timeline:view()){
    .grid:not(.rail-track)>.card,.cats>.cat,.h-section{
      animation:gp-rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
    /* En-tête : une ombre douce apparaît dès qu'on quitte le haut de page */
    .top{animation:gp-top linear both;animation-timeline:scroll(root);animation-range:0 140px}
  }

  /* ---------- Cartes produits : légère avancée de la photo au survol ---------- */
  .card-img{overflow:clip}
  .card-img img{transition:scale .45s cubic-bezier(.2,.8,.2,1)}
  .card:hover .card-img img{scale:1.045}
  .cat img{transition:scale .45s cubic-bezier(.2,.8,.2,1)}
  .cat:hover img{scale:1.04}
  .cat{overflow:clip}

  /* Boutons : petit enfoncement au clic */
  .btn{transition:background .2s,color .2s,border-color .2s,scale .12s}
  .btn:active:not([disabled]){scale:.97}
}
/* « translate » / « opacity » (et non transform) : le survol des cartes garde son translateY */
@keyframes gp-rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:none}}
@keyframes gp-top{to{box-shadow:0 8px 24px -14px color-mix(in srgb,#000 45%,transparent)}}

/* Pièce qui vole vers le panier (créée par guillac.js) */
.gp-fly{position:fixed;z-index:70;pointer-events:none;border-radius:10px;object-fit:contain;background:var(--white);
  box-shadow:0 12px 30px -10px rgba(0,0,0,.35)}