/* =====================================================================
   backgrounds.css — animated section backgrounds (light theme)
   Add data-bg="<effect>" to any section; backgrounds.js builds the layer.
   Effects: glowline, aurora, dots, cells, mesh, dna, ecg, bars,
            circuit, network, bokeh, signal, beams, waves
   ===================================================================== */

[data-bg] {
  position: relative;
  isolation: isolate;
}

/* Section content always sits above its background layer */
[data-bg] > :not(.bgfx):not(.blob) {
  position: relative;
  z-index: 1;
}

.bgfx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Strips are 200% wide on purpose (they scroll by half their width) */
.bgfx svg {
  max-width: none;
}

.bgfx canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Off-screen layers stop animating (set by backgrounds.js) */
.bgfx.is-paused,
.bgfx.is-paused * {
  animation-play-state: paused !important;
}

/* ---------- glowline: light runs along the top & bottom borders ---------- */
.bgfx--glowline {
  background-image: radial-gradient(rgba(10, 108, 255, 0.14) 1px, transparent 1.4px);
  background-size: 16px 16px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.bgfx--glowline::before,
.bgfx--glowline::after {
  content: "";
  position: absolute;
  left: 0;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--primary), var(--accent), transparent);
  box-shadow: 0 0 8px rgba(10, 108, 255, 0.45);
  will-change: transform;
  animation: bg-run-x 7s linear infinite;
}

.bgfx--glowline::before { top: -1px; }
.bgfx--glowline::after  { bottom: -1px; animation-direction: reverse; animation-duration: 9s; }

/* transform only, so the light never forces a repaint */
@keyframes bg-run-x {
  from { transform: translateX(-100%); }
  to   { transform: translateX(340%); }
}

/* ---------- aurora: soft colour ribbons drifting ---------- */
.bgfx--aurora i {
  position: absolute;
  width: 55%;
  height: 160%;
  top: -30%;
  border-radius: 50%;
  opacity: 0.6;
  will-change: transform;
  animation: bg-aurora 22s var(--ease-in-out) infinite alternate;
}

.bgfx--aurora i:nth-child(1) { left: -10%; background: radial-gradient(closest-side, #b9d6ff, transparent); }
.bgfx--aurora i:nth-child(2) { left: 30%;  background: radial-gradient(closest-side, #bff3e8, transparent); animation-delay: -7s; animation-duration: 26s; }
.bgfx--aurora i:nth-child(3) { left: 62%;  background: radial-gradient(closest-side, #ffdcc9, transparent); animation-delay: -13s; animation-duration: 30s; }

@keyframes bg-aurora {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(12%, -8%, 0) rotate(25deg) scale(1.15); }
  100% { transform: translate3d(-10%, 6%, 0) rotate(-15deg) scale(0.95); }
}

/* ---------- dots / cells / network: canvas, faded at the edges ---------- */
.bgfx--dots,
.bgfx--network {
  -webkit-mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 75% at 50% 50%, #000 40%, transparent 100%);
}

/* ---------- mesh: drifting gradient blobs + film grain ----------
   Soft radial gradients instead of blur() filters: they look the same
   but cost nothing to move. */
.bgfx--mesh i {
  position: absolute;
  width: clamp(420px, 55vw, 860px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.75;
  will-change: transform;
  animation: bg-drift 26s var(--ease-in-out) infinite alternate;
}

.bgfx--mesh i:nth-child(1) { top: -6%; left: -14%;  background: radial-gradient(closest-side, #9cc4ff, transparent); }
.bgfx--mesh i:nth-child(2) { top: 22%; right: -16%; background: radial-gradient(closest-side, #9ff0df, transparent); animation-delay: -9s; }
.bgfx--mesh i:nth-child(3) { top: 50%; left: 2%;    background: radial-gradient(closest-side, #ffd0bb, transparent); animation-delay: -3s; }
.bgfx--mesh i:nth-child(4) { bottom: -12%; right: 12%; background: radial-gradient(closest-side, #d5ccff, transparent); animation-delay: -15s; }

.bgfx--mesh::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


@keyframes bg-drift {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(8%, 10%, 0) rotate(40deg); }
}

/* ---------- ecg: heart-monitor lines scroll across ---------- */
.bgfx--ecg {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}

.bgfx--ecg svg {
  position: absolute;
  left: 0;
  width: 200%;
  height: 120px;
  animation: bg-scroll-x 16s linear infinite;
}

.bgfx--ecg svg path {
  fill: none;
  stroke-width: 1.6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.bgfx--ecg svg:nth-child(1) { top: 12%; }
.bgfx--ecg svg:nth-child(1) path { stroke: rgba(10, 108, 255, 0.22); }
.bgfx--ecg svg:nth-child(2) { top: 42%; animation-duration: 24s; animation-direction: reverse; }
.bgfx--ecg svg:nth-child(2) path { stroke: rgba(0, 194, 168, 0.2); }
.bgfx--ecg svg:nth-child(3) { top: 70%; animation-duration: 20s; }
.bgfx--ecg svg:nth-child(3) path { stroke: rgba(255, 107, 53, 0.16); }

@keyframes bg-scroll-x {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* ---------- bars: equaliser bars rise and fall (stats band) ---------- */
.bgfx--bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding-inline: 6px;
  -webkit-mask-image: linear-gradient(0deg, #000, transparent 85%);
          mask-image: linear-gradient(0deg, #000, transparent 85%);
}

.bgfx--bars i {
  flex: 1;
  height: var(--h, 60%);
  border-radius: 6px 6px 0 0;
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.04));
  transform-origin: bottom;
  animation: bg-bar var(--s, 3s) var(--ease-in-out) var(--d, 0s) infinite alternate;
}

.bgfx--bars::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%);
  animation: bg-shine 6s var(--ease-in-out) infinite;
}

@keyframes bg-bar {
  from { transform: scaleY(0.25); }
  to   { transform: scaleY(1); }
}

@keyframes bg-shine {
  0%, 30% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}

/* ---------- circuit: grid with light pulses running along the lines ---------- */
.bgfx--circuit {
  background-image:
    linear-gradient(rgba(10, 108, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(10, 108, 255, 0.07) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, #000 45%, transparent);
          mask-image: radial-gradient(ellipse 90% 80% at 50% 45%, #000 45%, transparent);
}

.bgfx--circuit i {
  position: absolute;
  border-radius: 2px;
  animation: var(--anim) var(--s, 6s) linear var(--d, 0s) infinite;
}

.bgfx--circuit i.is-x {
  left: 0;
  width: 160px;
  height: 2px;
  margin-top: -0.5px;
  background: linear-gradient(90deg, transparent, var(--c, var(--primary)));
  box-shadow: 0 0 10px var(--c, var(--primary));
  --anim: bg-pulse-x;
}

.bgfx--circuit i.is-y {
  top: 0;
  width: 2px;
  height: 160px;
  margin-left: -0.5px;
  background: linear-gradient(180deg, transparent, var(--c, var(--accent)));
  box-shadow: 0 0 10px var(--c, var(--accent));
  --anim: bg-pulse-y;
}

@keyframes bg-pulse-x {
  from { transform: translateX(-200px); }
  to   { transform: translateX(110vw); }
}

@keyframes bg-pulse-y {
  from { transform: translateY(-200px); }
  to   { transform: translateY(120vh); }
}

/* ---------- bokeh: soft orbs float upward ---------- */
.bgfx--bokeh i {
  position: absolute;
  bottom: -180px;
  left: var(--x);
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.9), var(--c) 60%, transparent 72%);
  opacity: 0.5;
  will-change: transform;
  animation: bg-rise var(--s, 24s) linear var(--d, 0s) infinite;
}

@keyframes bg-rise {
  0%   { transform: translate3d(0, 0, 0); }
  50%  { transform: translate3d(40px, -60vh, 0); }
  100% { transform: translate3d(-20px, -130vh, 0); }
}

/* ---------- signal: message waves spread from the phone, bubbles float ---------- */
.bgfx--signal .signal {
  position: absolute;
  top: 50%;
  right: clamp(-200px, 4vw, 180px);
  width: 900px;
  aspect-ratio: 1;
  translate: 25% -50%;
}

.bgfx--signal .signal i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(37, 211, 102, 0.28);
  animation: bg-ring 6s var(--ease-out) infinite;
  opacity: 0;
}

@keyframes bg-ring {
  0%   { transform: scale(0.1); opacity: 0.9; }
  100% { transform: scale(1); opacity: 0; }
}

.bgfx--signal .signal i:nth-child(2) { animation-delay: -1.5s; }
.bgfx--signal .signal i:nth-child(3) { animation-delay: -3s; }
.bgfx--signal .signal i:nth-child(4) { animation-delay: -4.5s; }

.bgfx--signal .bubble {
  position: absolute;
  left: var(--x);
  bottom: -80px;
  width: var(--w, 70px);
  height: calc(var(--w, 70px) * 0.55);
  border: 1.5px solid var(--c, rgba(37, 211, 102, 0.3));
  border-radius: 16px 16px 16px 4px;
  background: rgba(255, 255, 255, 0.5);
  animation: bg-rise var(--s, 20s) linear var(--d, 0s) infinite;
}

.bgfx--signal .bubble::before {
  content: "";
  position: absolute;
  left: 16%;
  right: 30%;
  top: 34%;
  height: 4px;
  border-radius: 4px;
  background: var(--c, rgba(37, 211, 102, 0.3));
  box-shadow: 0 9px 0 var(--c, rgba(37, 211, 102, 0.3));
}

/* ---------- beams: light falls down faint column lines ---------- */
.bgfx--beams {
  background-image: linear-gradient(90deg, rgba(10, 108, 255, 0.06) 1px, transparent 1px);
  background-size: 120px 100%;
  background-position: center top;
}

.bgfx--beams i {
  position: absolute;
  top: 0;
  left: var(--x);
  width: 2px;
  height: 180px;
  margin-left: -0.5px;
  background: linear-gradient(180deg, transparent, var(--c, var(--primary)), transparent);
  filter: drop-shadow(0 0 6px var(--c, var(--primary)));
  opacity: 0.55;
  animation: bg-fall var(--s, 7s) linear var(--d, 0s) infinite;
}

@keyframes bg-fall {
  from { transform: translateY(-220px); }
  to   { transform: translateY(140vh); }
}

/* ---------- waves: layered waves roll along the bottom ---------- */
.bgfx--waves svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 200%;
  height: var(--h, 220px);
  animation: bg-scroll-x var(--s, 18s) linear infinite;
}

.bgfx--waves svg:nth-child(2) { --h: 170px; --s: 26s; animation-direction: reverse; }
.bgfx--waves svg:nth-child(3) { --h: 120px; --s: 14s; }

/* ---------- Reduced motion: everything holds still ---------- */
@media (prefers-reduced-motion: reduce) {
  .bgfx,
  .bgfx *,
  .bgfx::before,
  .bgfx::after {
    animation: none !important;
  }
  .bgfx--bokeh,
  .bgfx--circuit i,
  .bgfx--beams i,
  .bgfx--signal .bubble {
    display: none;
  }
}