/*
 * Animation d'attente « panier » — palette et mouvement (composant PanierSpinner).
 *
 * Feuille globale et non isolée (.razor.css) : le CSS isolé de Blazor rattacherait sélecteurs et
 * @keyframes au composant, sans rien apporter ici — tout est préfixé « pan- » sous « .panier » —
 * et la palette ne pourrait plus être surchargée depuis l'application.
 */

.panier {
  display: block;
  /* Palette — surchargeable depuis l'application */
  --c-osier: #c98a4b;
  --c-osier-d: #94592a;
  --c-osier-l: #e0a864;
  --c-fond: #5e3a1c;
  --c-tissu: var(--primary, #5b8c3e);   /* le torchon prend la couleur du site */
  --c-tissu-l: rgba(255, 255, 255, .55);
  --c-chou: #3f8a3a;
  --c-chou-l: #6cb45a;
  --c-tige: #8cc26b;
  --c-tige-d: #6a9c4c;
  --c-viande: #b8322b;
  --c-gras: #f2d7bf;
  --c-os: #f3ead9;
  --c-verre: #e8efd9;
  --c-huile: #d9a421;
  --c-bouchon: #3d5f2c;
  --c-etiquette: #fbf5e3;
  --c-olive: #6b8e23;
  --c-carotte: #ee8a24;
  --c-carotte-d: #c7661a;
  --c-fane: #4f9a3c;
  --c-pomme: #d6402f;
  --c-pomme-l: #f2a08f;
  --c-queue: #6b4423;
  --c-feuille: #5aa24a;
  --c-fromage: #f5c542;
  --c-fromage-l: #ffe28c;
  --c-fromage-d: #d9a126;
  --c-ombre: rgba(40, 30, 20, .14);
  --spd: 1;
  --cycle: 8.4s;    /* six produits : 1,4 s chacun */
}

.panier .pan-ombre { fill: var(--c-ombre) }
.panier .pan-osier { fill: var(--c-osier) }
.panier .pan-osier-l { fill: var(--c-osier-l) }
.panier .pan-fond { fill: var(--c-fond) }
.panier .pan-bord { fill: var(--c-osier-l) }
.panier .pan-tissu { fill: var(--c-tissu) }
.panier .pan-chou { fill: var(--c-chou) }
.panier .pan-chou-l { fill: var(--c-chou-l) }
.panier .pan-tige { fill: var(--c-tige) }
.panier .pan-viande { fill: var(--c-viande) }
.panier .pan-gras { fill: var(--c-gras) }
.panier .pan-os { fill: var(--c-os) }
.panier .pan-verre { fill: var(--c-verre) }
.panier .pan-huile { fill: var(--c-huile) }
.panier .pan-bouchon { fill: var(--c-bouchon) }
.panier .pan-etiquette { fill: var(--c-etiquette) }
.panier .pan-olive { fill: var(--c-olive) }
.panier .pan-carotte { fill: var(--c-carotte) }
.panier .pan-fane { fill: var(--c-fane) }
.panier .pan-pomme { fill: var(--c-pomme) }
.panier .pan-feuille { fill: var(--c-feuille) }
.panier .pan-fromage { fill: var(--c-fromage) }
.panier .pan-fromage-l { fill: var(--c-fromage-l) }
.panier .pan-fromage-d { fill: var(--c-fromage-d) }

.panier .pan-anse { fill: none; stroke: var(--c-osier-d); stroke-width: 3.4; stroke-linecap: round }
.panier .pan-anse-l { fill: none; stroke: var(--c-osier-l); stroke-width: 1.1; stroke-linecap: round; opacity: .8 }
.panier .pan-tresse { fill: none; stroke: var(--c-osier-d); stroke-width: .7; opacity: .55 }
.panier .pan-tissu-l { fill: none; stroke: var(--c-tissu-l); stroke-width: .9 }
.panier .pan-bord-l { fill: none; stroke: #fff; stroke-width: .8; stroke-linecap: round; opacity: .35 }
.panier .pan-bord-d { fill: none; stroke: var(--c-osier-d); stroke-width: 1; stroke-dasharray: 2.6 1.8; opacity: .7 }
.panier .pan-tige-d { fill: none; stroke: var(--c-tige-d); stroke-width: .6; stroke-linecap: round }
.panier .pan-persille { fill: none; stroke: var(--c-gras); stroke-width: .75; stroke-linecap: round; opacity: .85 }
.panier .pan-reflet { fill: none; stroke: #fff; stroke-width: .8; stroke-linecap: round; opacity: .6 }
.panier .pan-carotte-d { fill: none; stroke: var(--c-carotte-d); stroke-width: .6; stroke-linecap: round }
.panier .pan-pomme-l { fill: none; stroke: var(--c-pomme-l); stroke-width: .9; stroke-linecap: round }
.panier .pan-queue { fill: none; stroke: var(--c-queue); stroke-width: 1; stroke-linecap: round }
.panier .pan-croute { fill: none; stroke: var(--c-fromage-d); stroke-width: .7 }

/* --- trajet des produits ---
 * Un produit occupe un sixième du cycle : il arrive de la gauche en montant, passe au-dessus du
 * panier, y tombe, puis reste invisible jusqu'au tour suivant. Les décalages négatifs le mettent
 * en file derrière le précédent : un seul produit en l'air à la fois.
 * .pan-produit porte l'avance horizontale et l'apparition, .pan-vol la hauteur et la rotation. */
.panier .pan-produit,
.panier .pan-vol {
  transform-box: view-box;
  transform-origin: 0 0;
}
.panier .pan-produit {
  transform: translateX(64px);
  opacity: 0;
  animation:
    pan-avance calc(var(--cycle) * var(--spd)) linear infinite,
    pan-apparition calc(var(--cycle) * var(--spd)) linear infinite;
}
.panier .pan-vol {
  transform: translateY(63px);
  animation: pan-vol calc(var(--cycle) * var(--spd)) linear infinite;
}
.panier .pan-produit-1, .panier .pan-produit-1 .pan-vol { animation-delay: 0s }
.panier .pan-produit-2, .panier .pan-produit-2 .pan-vol { animation-delay: calc(var(--cycle) * var(--spd) * -5 / 6) }
.panier .pan-produit-3, .panier .pan-produit-3 .pan-vol { animation-delay: calc(var(--cycle) * var(--spd) * -4 / 6) }
.panier .pan-produit-4, .panier .pan-produit-4 .pan-vol { animation-delay: calc(var(--cycle) * var(--spd) * -3 / 6) }
.panier .pan-produit-5, .panier .pan-produit-5 .pan-vol { animation-delay: calc(var(--cycle) * var(--spd) * -2 / 6) }
.panier .pan-produit-6, .panier .pan-produit-6 .pan-vol { animation-delay: calc(var(--cycle) * var(--spd) * -1 / 6) }

@keyframes pan-avance {
  0%    { transform: translateX(-14px); animation-timing-function: cubic-bezier(.3, .45, .55, 1) }
  11.5% { transform: translateX(64px) }
  100%  { transform: translateX(64px) }
}
@keyframes pan-apparition {
  0%    { opacity: 0 }
  2%    { opacity: 1 }
  15.6% { opacity: 1 }
  16.4% { opacity: 0 }
  100%  { opacity: 0 }
}
@keyframes pan-vol {
  /* montée en ralentissant, léger flottement au sommet, chute en accélérant */
  0%    { transform: translateY(36px) rotate(-35deg); animation-timing-function: cubic-bezier(.15, .6, .4, 1) }
  7.5%  { transform: translateY(17px) rotate(-6deg); animation-timing-function: cubic-bezier(.45, 0, .55, 1) }
  11.5% { transform: translateY(20px) rotate(6deg); animation-timing-function: cubic-bezier(.55, 0, 1, .5) }
  15.8% { transform: translateY(63px) rotate(0deg) }
  100%  { transform: translateY(63px) rotate(0deg) }
}

/* --- le panier accuse le coup à chaque produit reçu --- */
.panier .pan-secousse {
  transform-box: view-box;
  transform-origin: 64px 72px;
  animation: pan-secousse calc(var(--cycle) * var(--spd) / 6) ease-out infinite;
}
@keyframes pan-secousse {
  0%   { transform: translateY(0) scale(1, 1) }
  6%   { transform: translateY(.9px) scale(1.012, .985) }
  18%  { transform: translateY(0) scale(1, 1) }
  100% { transform: translateY(0) scale(1, 1) }
}

/* Mouvement réduit : plus de trajet, deux produits posés qui dépassent du panier. */
@media (prefers-reduced-motion: reduce) {
  .panier .pan-produit, .panier .pan-vol, .panier .pan-secousse { animation: none }
  .panier .pan-produit-1 { opacity: 1; transform: translateX(56px) }
  .panier .pan-produit-1 .pan-vol { transform: translateY(45px) rotate(-12deg) }
  .panier .pan-produit-3 { opacity: 1; transform: translateX(72px) }
  .panier .pan-produit-3 .pan-vol { transform: translateY(42px) rotate(12deg) }
}