/* ═══════════════════════════════════════════════════════════════════════════
   ROOS — FOND ANIMÉ (styles)
   Amplitudes minuscules, périodes longues (14–70 s) : le mouvement doit se
   sentir sans jamais se voir. transform/opacity uniquement.
   ═══════════════════════════════════════════════════════════════════════════ */

#roosBg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  --px: 0; --py: 0;                 /* parallaxe, alimentée en JS */
  contain: strict;
}
/* L'ancien canvas galaxie cède la place */
#bgCanvas, .app-bg-grid, .app-orb { display: none !important; }
/* Les halos d'origine du body feraient doublon */
body::after { display: none !important; }

/* ── ① Aurore d'encre : trois nappes qui dérivent ── */
.rbg-aurora { position: absolute; inset: -18%; }
.rbg-aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(var(--rbg-blur, 70px)); opacity: var(--rbg-aop, .55);
  will-change: transform;
}
.rbg-a1 {
  width: 62%; height: 68%; left: -6%; top: -12%;
  background: radial-gradient(circle at 40% 40%, var(--rbg-c1), transparent 68%);
  animation: rbg-d1 68s ease-in-out infinite alternate;
  transform: translate3d(calc(var(--px) * 9px), calc(var(--py) * 7px), 0);
}
.rbg-a2 {
  width: 55%; height: 60%; right: -8%; top: 8%;
  background: radial-gradient(circle at 55% 45%, var(--rbg-c2), transparent 66%);
  animation: rbg-d2 84s ease-in-out infinite alternate;
  transform: translate3d(calc(var(--px) * -7px), calc(var(--py) * 6px), 0);
}
.rbg-a3 {
  width: 70%; height: 55%; left: 18%; bottom: -18%;
  background: radial-gradient(circle at 50% 50%, var(--rbg-c3), transparent 70%);
  animation: rbg-d3 96s ease-in-out infinite alternate;
  transform: translate3d(calc(var(--px) * 5px), calc(var(--py) * -5px), 0);
}
@keyframes rbg-d1 { to { transform: translate3d(6%, 4%, 0) scale(1.16); } }
@keyframes rbg-d2 { to { transform: translate3d(-7%, 6%, 0) scale(1.10); } }
@keyframes rbg-d3 { to { transform: translate3d(4%, -5%, 0) scale(1.14); } }

/* ── ② Courbes de niveau ── */
.rbg-topowrap, .rbg-scan { position: absolute; inset: -4%; }
.rbg-topo { width: 100%; height: 100%; display: block; }
.rbg-topowrap .rbg-topo {
  opacity: var(--rbg-top, .5);
  animation: rbg-breathe 70s ease-in-out infinite alternate;
  transform: translate3d(calc(var(--px) * 4px), calc(var(--py) * 3px), 0);
}
@keyframes rbg-breathe {
  from { transform: translate3d(-0.7%, 0, 0); }
  to   { transform: translate3d(0.7%, -0.5%, 0); }
}
.rbg-l { fill: none; stroke: var(--rbg-line); stroke-width: .8; vector-effect: non-scaling-stroke; }
.rbg-m { stroke: var(--rbg-linem); stroke-width: 1.2; }
.rbg-t {
  fill: var(--rbg-linem); font-family: 'JetBrains Mono', monospace;
  font-size: 11px; letter-spacing: .06em; opacity: .8;
}

/* ── ③ Balayage de relevé : la bande révèle le relief ── */
.rbg-scan {
  -webkit-mask-image: linear-gradient(100deg, transparent 43%, #000 47.5%, #000 52.5%, transparent 57%);
          mask-image: linear-gradient(100deg, transparent 43%, #000 47.5%, #000 52.5%, transparent 57%);
  -webkit-mask-size: 250% 100%; mask-size: 250% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: rbg-sweep var(--rbg-scant, 14s) linear infinite;
  opacity: var(--rbg-scano, 1);
}
@keyframes rbg-sweep {
  from { -webkit-mask-position: 160% 0; mask-position: 160% 0; }
  to   { -webkit-mask-position: -70% 0; mask-position: -70% 0; }
}
.rbg-scan .rbg-l { stroke: var(--rbg-scanc); stroke-width: 1.2; }
.rbg-scan .rbg-m { stroke: var(--rbg-scancm); stroke-width: 1.7; }
.rbg-scan .rbg-t { fill: var(--rbg-scancm); opacity: 1; }

/* ── ④ Onde ROOS + ⑤ orbe ── */
.rbg-wave { position: absolute; inset: 0; width: 100%; height: 100%; }
.rbg-ring {
  fill: none; stroke: var(--rbg-ring); stroke-width: .32;
  vector-effect: non-scaling-stroke; transform-origin: 39px 30px; opacity: 0;
  animation: rbg-expand 20s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}
@keyframes rbg-expand {
  0%   { transform: scale(.3);  opacity: 0; }
  10%  { opacity: var(--rbg-ringo, .5); }
  72%  { opacity: calc(var(--rbg-ringo, .5) * .3); }
  100% { transform: scale(8);   opacity: 0; }
}
.rbg-orb {
  fill: var(--rbg-orb); opacity: var(--rbg-orbo, .5);
  filter: blur(var(--rbg-orbblur, 26px));
  animation: rbg-drift 54s ease-in-out infinite alternate;
}
@keyframes rbg-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(-8%, -4%) scale(1.16); }
  100% { transform: translate(4%, 3%) scale(.92); }
}

/* ── ⑥ Grain + ⑦ vignette ── */
.rbg-grain {
  position: absolute; inset: 0; opacity: var(--rbg-grain, .5);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 190px 190px;
}
.rbg-vig {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 100% 80% at 50% 40%, transparent 42%, var(--rbg-vig) 100%);
}

/* ══════════════ A · CONSOLE (sombre) ══════════════ */
:root, :root[data-theme="dark"] {
  --rbg-c1: oklch(0.36 0.075 250);
  --rbg-c2: oklch(0.34 0.060 215);
  --rbg-c3: oklch(0.30 0.055 285);
  --rbg-aop: .50; --rbg-blur: 78px;
  --rbg-line:  oklch(0.42 0.030 245 / .30);
  --rbg-linem: oklch(0.72 0.060 88 / .28);
  --rbg-top: .42;
  --rbg-scanc:  oklch(0.80 0.100 200 / .50);
  --rbg-scancm: oklch(0.88 0.100 88 / .72);
  --rbg-scant: 13s; --rbg-scano: 1;
  --rbg-ring: oklch(0.78 0.070 85 / .30); --rbg-ringo: .42;
  --rbg-orb: oklch(0.58 0.090 235); --rbg-orbo: .17; --rbg-orbblur: 30px;
  --rbg-grain: .45;
  --rbg-vig: oklch(0.07 0.015 250 / .62);
}

/* ══════════════ B · ATELIER (clair) ══════════════ */
:root[data-theme="light"] {
  --rbg-c1: oklch(0.90 0.035 245);
  --rbg-c2: oklch(0.92 0.030 200);
  --rbg-c3: oklch(0.91 0.030 80);
  --rbg-aop: .60; --rbg-blur: 84px;
  --rbg-line:  oklch(0.55 0.040 250 / .16);
  --rbg-linem: oklch(0.55 0.090 76 / .26);
  --rbg-top: .55;
  --rbg-scanc:  oklch(0.52 0.100 200 / .34);
  --rbg-scancm: oklch(0.55 0.120 76 / .50);
  --rbg-scant: 16s; --rbg-scano: .9;
  --rbg-ring: oklch(0.58 0.090 76 / .22); --rbg-ringo: .34;
  --rbg-orb: oklch(0.70 0.070 76); --rbg-orbo: .13; --rbg-orbblur: 34px;
  --rbg-grain: .30;
  --rbg-vig: oklch(0.55 0.030 255 / .10);
}

@media (prefers-reduced-motion: reduce) {
  .rbg-aurora i, .rbg-topowrap .rbg-topo, .rbg-scan, .rbg-ring, .rbg-orb {
    animation: none !important;
  }
  .rbg-scan { display: none; }
  .rbg-ring { opacity: var(--rbg-ringo, .4); transform: scale(3.4); }
}