/*
 * BENJI 2027 — Ambient backgrounds
 * Ajout autonome : ne modifie ni le réseau canvas ni les éléments interactifs.
 * Styles chargés APRES styles.css et network.css.
 */

.bi-atmosphere {
  position: relative;
  isolation: isolate;
  overflow: clip;
  --bi-x: 72%;
  --bi-y: 37%;
}

.bi-atmosphere::before,
.bi-atmosphere::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* 01 — Accueil : halo sensible à la souris + trame technique légère. */
.hero.bi-atmosphere::before {
  background:
    radial-gradient(ellipse 40% 48% at var(--bi-x) var(--bi-y), rgba(38, 75, 255, .17), transparent 78%),
    radial-gradient(ellipse 35% 38% at 13% 88%, rgba(216, 243, 106, .19), transparent 82%),
    radial-gradient(ellipse 45% 45% at 92% 90%, rgba(116, 148, 237, .10), transparent 79%);
  animation: bi-bg-breathe 19s ease-in-out infinite alternate;
}

.hero.bi-atmosphere::after {
  background-image:
    linear-gradient(rgba(32, 33, 30, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 33, 30, .055) 1px, transparent 1px);
  background-size: 72px 72px;
  opacity: .45;
  -webkit-mask-image: radial-gradient(ellipse 50% 63% at 78% 42%, #000, transparent 97%);
  mask-image: radial-gradient(ellipse 50% 63% at 78% 42%, #000, transparent 97%);
  animation: bi-grid-travel 38s linear infinite;
}

/* 02 — Expertises : lueur localisée et courbes concentriques très fines. */
.expertises.bi-atmosphere::before {
  background:
    radial-gradient(ellipse 43% 50% at var(--bi-x) var(--bi-y), rgba(38, 75, 255, .095), transparent 77%),
    radial-gradient(ellipse 42% 40% at 5% 87%, rgba(216, 243, 106, .15), transparent 78%);
  animation: bi-bg-breathe 25s ease-in-out infinite alternate-reverse;
}

.expertises.bi-atmosphere::after {
  background: repeating-radial-gradient(
    circle at 85% 49%,
    transparent 0 34px,
    rgba(38, 75, 255, .10) 35px,
    transparent 36px 72px
  );
  opacity: .38;
  -webkit-mask-image: radial-gradient(ellipse 42% 54% at 85% 50%, #000, transparent 92%);
  mask-image: radial-gradient(ellipse 42% 54% at 85% 50%, #000, transparent 92%);
  animation: bi-line-float 25s ease-in-out infinite alternate;
}

/* 03 — Approche : un flux en diagonale qui habille l'espace libre. */
.approach.bi-atmosphere::before {
  background:
    radial-gradient(ellipse 42% 49% at var(--bi-x) var(--bi-y), rgba(38, 75, 255, .105), transparent 80%),
    radial-gradient(ellipse 30% 40% at 9% 80%, rgba(216, 243, 106, .12), transparent 80%);
  animation: bi-bg-breathe 22s ease-in-out infinite alternate;
}

.approach.bi-atmosphere::after {
  background: repeating-linear-gradient(
    130deg,
    transparent 0 60px,
    rgba(38, 75, 255, .048) 61px,
    transparent 62px 122px
  );
  opacity: .45;
  -webkit-mask-image: linear-gradient(90deg, transparent 10%, #000 67%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 10%, #000 67%, transparent 100%);
  animation: bi-grid-travel 44s linear infinite;
}

/* 04 — FAQ : simple écho bleu, pour finir sans surcharger le contact. */
.faq.bi-atmosphere::before {
  background: radial-gradient(
    ellipse 36% 69% at var(--bi-x) var(--bi-y),
    rgba(38, 75, 255, .10),
    transparent 87%
  );
  animation: bi-bg-breathe 22s ease-in-out infinite alternate-reverse;
}

@keyframes bi-bg-breathe {
  from { opacity: .72; transform: scale(1); }
  to   { opacity: 1; transform: scale(1.045); }
}

@keyframes bi-grid-travel {
  from { background-position: 0 0; }
  to   { background-position: 72px 72px; }
}

@keyframes bi-line-float {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-12px, 9px, 0) scale(1.025); }
}

/* Respect des préférences déjà gérées par script.js. */
@media (prefers-reduced-motion: reduce) {
  .bi-atmosphere::before,
  .bi-atmosphere::after {
    animation: none !important;
  }
}

@media (max-width: 620px) {
  /* Ambiances fixes et un peu plus sobres sur petit écran. */
  .hero.bi-atmosphere::before,
  .expertises.bi-atmosphere::before,
  .approach.bi-atmosphere::before,
  .faq.bi-atmosphere::before {
    opacity: .8;
  }
  .hero.bi-atmosphere::after,
  .expertises.bi-atmosphere::after,
  .approach.bi-atmosphere::after {
    opacity: .22;
    animation: none;
  }
}