/* Animations de boutique — replis CSS par catégorie (docs/design/00-charte-graphique.md)
 *
 * Ces styles s'appliquent aux pages individuelles de boutique (Phase e-commerce, non
 * construite à ce stade). Ils servent de repli visuel quand WebGL est absent ou quand
 * prefers-reduced-motion est actif. La page d'accueil de l'annuaire (annuaire.html)
 * n'est PAS concernée — elle conserve ses propres styles dans directory.css.
 */

/* ─── Canvas boutique — positionnement de base ───────────────────────────────── */

#shop-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  display: block;
}

.shop-canvas__fallback {
  display: none;           /* masqué par défaut, révélé par JS si WebGL absent */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-size: 300% 300%;
  animation: gradientShift 8s ease infinite;
}

/* ─── Famille B — FOOD (Alimentation & restauration) ────────────────────────── */
/* Palette : vert kénilworth #2E7D5A, ocre #E8A020, brun terreux #2D1F14        */

.shop-canvas__fallback[data-category="FOOD"] {
  background: linear-gradient(
    135deg,
    #2E7D5A 0%,
    #F5F0E8 45%,
    #E8A020 75%,
    #2D1F14 100%
  );
  background-size: 300% 300%;
  animation: gradientShift 9s ease infinite;
}

/* ─── Famille C — FASHION (Mode & vêtements) ─────────────────────────────────── */
/* Palette : teal profond #1A6B7A, ivoire #FAFAF6, or #E8A020                    */

.shop-canvas__fallback[data-category="FASHION"] {
  background: linear-gradient(
    110deg,
    #1A6B7A 0%,
    #FAFAF6 50%,
    #E8A020 100%
  );
  background-size: 300% 300%;
  animation: gradientShiftFashion 10s ease infinite;
}

/* ─── Famille D — ELECTRONICS (Électronique & tech) ─────────────────────────── */
/* Palette : teal #1A6B7A, bleu électrique #0066CC, fond très sombre #0A0F1A    */

.shop-canvas__fallback[data-category="ELECTRONICS"] {
  background: linear-gradient(
    160deg,
    #0A0F1A 0%,
    #1A6B7A 40%,
    #0066CC 70%,
    #0A0F1A 100%
  );
  background-size: 300% 300%;
  animation: gradientShift 7s ease infinite;
}

/* ─── Famille E — BEAUTY (Beauté & bien-être) ────────────────────────────────── */
/* Palette : rose poudré #E8C4C4, blanc ivoire #FAFAF6, or #E8A020              */

.shop-canvas__fallback[data-category="BEAUTY"] {
  background: linear-gradient(
    125deg,
    #E8C4C4 0%,
    #FAFAF6 50%,
    #E8A020 100%
  );
  background-size: 300% 300%;
  animation: gradientShiftBeauty 11s ease infinite;
}

/* ─── Famille F — HOME (Maison & mobilier) ───────────────────────────────────── */
/* Palette : brun terreux #2D1F14, sable #F5F0E8, teal #1A6B7A                  */

.shop-canvas__fallback[data-category="HOME"] {
  background: linear-gradient(
    145deg,
    #2D1F14 0%,
    #F5F0E8 50%,
    #1A6B7A 100%
  );
  background-size: 300% 300%;
  animation: gradientShift 10s ease infinite;
}

/* ─── Keyframes ──────────────────────────────────────────────────────────────── */

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Variante FASHION : mouvement diagonal pour évoquer le mouvement du tissu */
@keyframes gradientShiftFashion {
  0%   { background-position: 0% 0%; }
  33%  { background-position: 100% 50%; }
  66%  { background-position: 50% 100%; }
  100% { background-position: 0% 0%; }
}

/* Variante BEAUTY : mouvement doux, plus lent, ascendant */
@keyframes gradientShiftBeauty {
  0%   { background-position: 50% 100%; }
  50%  { background-position: 50% 0%; }
  100% { background-position: 50% 100%; }
}

/* ─── Accessibilité — prefers-reduced-motion ─────────────────────────────────── */
/* Toutes les animations CSS de repli sont désactivées si l'utilisateur préfère   */
/* un mouvement réduit. L'animation Three.js est déjà bloquée côté JS.           */

@media (prefers-reduced-motion: reduce) {
  .shop-canvas__fallback {
    animation: none !important;
    background-position: 50% 50% !important;
  }
}