/* === Abeilles en vol =============================================
   Communes à toutes les pages. Chaque abeille suit un trajet (offset-path) :
   écrit à la main sur l'accueil (home.css), calculé par effects/bees.js ailleurs,
   dans les blocs marqués data-bees="n". Une traînée dorée les suit (effects/bee-trails.js). */

/* Calque posé par bees.js dans un bloc data-bees : les abeilles ne débordent jamais du bloc */
.bee-flight {
  position: absolute;
  z-index: 3;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-bee,
.section-wander-bee {
  position: absolute;
  left: 0;
  top: 0;
  object-fit: contain;
  pointer-events: none;
  offset-rotate: 0deg !important;
}
.hero-bee {
  width: 30px;
  height: 24px;
  filter: drop-shadow(0 4px 5px #000);
  will-change: offset-distance, transform;
  animation: heroBee 15s ease-in-out infinite;
}
.section-wander-bee {
  z-index: 2;
  width: 25px;
  height: 20px;
  filter: drop-shadow(0 3px 5px #000);
  will-change: offset-distance, opacity;
  animation: sectionBee 22s ease-in-out infinite;
}

.bee-trail-canvas {
  position: fixed;
  z-index: 1;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  /* Ni mode de fusion ni filtre : sur un calque plein écran, le navigateur devrait les recalculer à chaque image
     (saccades au défilement). Les traînées sont déjà dorées et translucides. */
}

@media (max-width: 1180px) {
  .section-wander-bee {
    opacity: 0.65;
  }
}

@media (max-width: 900px) {
  .section-wander-bee {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bee,
  .section-wander-bee,
  .bee-trail-canvas {
    display: none !important;
  }
}

@keyframes heroBee {
  0%,
  7% {
    offset-distance: 0;
    opacity: 0;
  }
  17% {
    opacity: 0.95;
  }
  83% {
    opacity: 0.95;
  }
  93%,
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

@keyframes sectionBee {
  0%,
  6% {
    offset-distance: 0;
    opacity: 0;
  }
  14% {
    opacity: 0.72;
  }
  48% {
    opacity: 0.92;
  }
  86% {
    opacity: 0.72;
  }
  94%,
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}