/* Couche de finition "vivante" : micro-animations, transitions et ambiance.
   Objectif : faire "respirer" l'interface sans jamais attirer l'attention sur
   elle-même, et sans introduire la moindre nouvelle couleur — tout réutilise
   les tokens existants (variables.css). Entièrement désactivée si l'utilisateur
   a activé "réduire les animations" sur son appareil. */

@media (prefers-reduced-motion: no-preference) {

  /* --- Feedback tactile universel : tout élément cliquable réagit légèrement au toucher --- */
  .primary-btn, .send-btn, .opt-btn, .chip, .subcat-chip, .add-btn, .keypad button,
  .card, .nav-item, .cart-fab, .contact-card, .price-tile, .qty-ctrl button, .order-contact-btn {
    transition: transform .15s cubic-bezier(.34,1.56,.64,1), box-shadow .15s ease,
                background-color .15s ease, border-color .15s ease, color .15s ease;
  }
  .primary-btn:active, .send-btn:active, .opt-btn:active, .chip:active, .subcat-chip:active,
  .add-btn:active, .keypad button:active, .price-tile:active, .qty-ctrl button:active,
  .order-contact-btn:active {
    transform: scale(.94);
  }
  .card:active{ transform: scale(.985); }
  .contact-card:active{ transform: scale(.98); }
  .nav-item:active{ transform: scale(.9); }

  /* --- Ouverture des panneaux (panier, profil, fiche produit...) : légère respiration --- */
  .sheet{ transition: transform .32s cubic-bezier(.22,1,.36,1); }
  .sheet-overlay{ transition: opacity .3s ease; }

  /* --- Cartes produits : fondu discret à chaque (re)rendu de la grille, pour éviter
     tout effet de "coupe sèche" quand on change de catégorie ou de poids --- */
  .grid .card{ animation: card-fade-in .22s ease backwards; }
  @keyframes card-fade-in{ from{ opacity:0; } to{ opacity:1; } }

  /* --- FAB panier : petit rebond quand le contenu du panier augmente --- */
  .cart-fab.bump{ animation: fab-bump .32s cubic-bezier(.34,1.56,.64,1); }
  @keyframes fab-bump{
    0%{ transform: scale(1); }
    45%{ transform: scale(1.16); }
    100%{ transform: scale(1); }
  }

  /* --- Bouton "+" : petit pop de confirmation à l'ajout --- */
  .add-btn.pop{ animation: add-pop .25s ease; }
  @keyframes add-pop{
    0%{ transform: scale(1); }
    50%{ transform: scale(1.22); }
    100%{ transform: scale(1); }
  }

  /* --- PIN : pop discret à chaque chiffre saisi --- */
  .pin-dot{ transition: background-color .15s ease; }
  .pin-dot.filled{ animation: dot-pop .18s ease; }
  @keyframes dot-pop{
    0%{ transform: scale(.55); }
    60%{ transform: scale(1.15); }
    100%{ transform: scale(1); }
  }

  /* --- Petite secousse en cas d'échec de connexion/inscription (jamais agressive) --- */
  .auth-card.shake{ animation: auth-shake .4s ease; }
  @keyframes auth-shake{
    10%,90%{ transform: translateX(-1px); }
    20%,80%{ transform: translateX(2px); }
    30%,50%,70%{ transform: translateX(-3px); }
    40%,60%{ transform: translateX(3px); }
  }

  /* --- Ambiance vivante : très lent mouvement du fond, façon respiration --- */
  body::before{
    background-size:112% 112%;
    animation: ambient-breathe 34s ease-in-out infinite;
    transition: filter 4s ease;
  }
  @keyframes ambient-breathe{
    0%,100%{ background-position: 50% 50%; }
    50%{ background-position: 49% 46%; }
  }

  /* --- Cycle jour/nuit discret : légère variation de luminosité du fond selon l'heure
     locale du client (aube / jour / crépuscule / nuit). La palette ne change jamais,
     seule une nuance de luminosité/saturation très subtile est appliquée. --- */
  body.tod-nuit::before{ filter: brightness(.88) saturate(1.05); }
  body.tod-aube::before{ filter: brightness(1.03) saturate(1.06); }
  body.tod-jour::before{ filter: brightness(1.07) saturate(.97); }
  body.tod-crepuscule::before{ filter: brightness(1) saturate(1.12); }

  /* --- Poussière dorée décorative, uniquement sur l'écran d'accueil/connexion --- */
  .ambient-particles{ position:fixed; inset:0; z-index:-1; pointer-events:none; overflow:hidden; }
  .ambient-particles span{
    position:absolute; bottom:-10px; width:3px; height:3px; border-radius:50%;
    background:var(--gold); opacity:0; filter:blur(.3px);
    animation: particule-float linear infinite;
  }
  @keyframes particule-float{
    0%{ opacity:0; transform: translateY(0) translateX(0); }
    12%{ opacity:.3; }
    88%{ opacity:.12; }
    100%{ opacity:0; transform: translateY(-100vh) translateX(var(--drift, 12px)); }
  }

  /* --- Écran de succès de commande : un moment satisfaisant avant de refermer --- */
  .order-success-overlay{
    position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
    background:rgba(26,14,46,.72); backdrop-filter:blur(3px);
    opacity:0; pointer-events:none; transition:opacity .25s ease;
  }
  .order-success-overlay.show{ opacity:1; pointer-events:auto; }
  .order-success-inner{ display:flex; flex-direction:column; align-items:center; }
  .order-success-circle{
    width:84px;height:84px;border-radius:50%;
    background:var(--gold); display:flex;align-items:center;justify-content:center;
    animation: success-ring .5s ease;
  }
  @keyframes success-ring{
    0%{ box-shadow:0 0 0 0 rgba(244,169,71,.55); transform:scale(.7); }
    70%{ box-shadow:0 0 0 18px rgba(244,169,71,0); }
    100%{ transform:scale(1); }
  }
  .order-success-check{ width:38px;height:38px; }
  .order-success-check path{
    fill:none; stroke:#1B1706; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
    stroke-dasharray:40; stroke-dashoffset:40;
    animation: draw-check .35s ease .15s forwards;
  }
  @keyframes draw-check{ to{ stroke-dashoffset:0; } }
  .order-success-text{ margin-top:16px; color:var(--text); font-family:'Fraunces',serif; font-size:16px; text-align:center; }
}