/* Original light/grain recipes from https://updriftlabs.com/styles.css */
:root{--paper:oklch(16% 0.008 62);color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;padding:0;width:100%;height:100%;overflow:hidden}
body{background:var(--paper)}
/* Paper texture: warm glow vignette + faint light grain */
.bg-paper {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 60% at -8% 108%, oklch(30% 0.060 30 / 0.55), transparent 64%);
}
/* ─── Aurora background (Aceternity technique) ───────────────────────────
 * Flowing northern-lights bands: two repeating-linear-gradients (dark tint
 * stripes over warm color stripes), blurred, with a blend-mode ::after layer
 * that scrolls to make the light flow. Concentrated in the top-left corner,
 * warm hues only so the dark theme is unchanged. */
.aurora {
  /* Absolute + bounded height → the aurora scrolls away with the hero
   * (overflow:hidden clips it; not fixed, so it does not stay on screen).
   * Height matches production's aurora (≈ full hero viewport). */
  position: absolute; top: 0; left: 0; right: 0;
  height: 80vh;
  /* Rectangular grid lives ON the aurora layer so it inherits the exact same
   * mask: the grid is only visible where the lights are, fading in on the left
   * and out on the right in sync with them (lights "reveal" the grid). */
  background-image:
    linear-gradient(to right, oklch(86% 0.05 72 / 0.22) 1px, transparent 1px),
    linear-gradient(to bottom, oklch(86% 0.05 72 / 0.22) 1px, transparent 1px);
  background-size: 58px 58px;
  background-position: 0 0;
  z-index: -1; pointer-events: none;   /* behind the h1 and the network canvas */
  overflow: hidden;
  /* Grid + light share ONE soft glow envelope, so the grid is only revealed
   * where the light actually pools and is invisible in the dark areas:
   *   radial  → the glow hotspot behind the headline; fades to nothing in the
   *             far-left margin and toward the bottom.
   *   right   → guarantees nothing reaches the network box on the right.
   * intersect = a pixel shows only where BOTH keep it. */
  -webkit-mask-image:
    radial-gradient(ellipse 60% 62% at 26% 22%,
      #000 8%, rgba(0,0,0,0.62) 40%, rgba(0,0,0,0.28) 64%, transparent 88%),
    linear-gradient(to right, #000 0%, #000 44%, transparent 56%);
  mask-image:
    radial-gradient(ellipse 60% 62% at 26% 22%,
      #000 8%, rgba(0,0,0,0.62) 40%, rgba(0,0,0,0.28) 64%, transparent 88%),
    linear-gradient(to right, #000 0%, #000 44%, transparent 56%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Exact Aceternity recipe (as shipped on production):
 *  --stripes : dark page-colour stripes with thin transparent slits — these
 *              CARVE the colour bands into rays (normal blend, not screen).
 *  --bands   : the warm colour gradient seen through the slits.
 * Base (::before) is blurred + normal blend; the moving copy (::after) uses
 * difference blend to make the light flow. Warm hues only → theme unchanged. */
.aurora::before,
.aurora::after {
  content: "";
  position: absolute; inset: -10px;
  --stripes: repeating-linear-gradient(100deg,
    var(--paper) 0%, var(--paper) 7%,
    transparent 10%, transparent 12%, var(--paper) 16%);
  /* Multi-hue warm aurora (production uses blue→purple→magenta; this is the
   * warm-palette analogue), column order reversed: red-clay → gold → coral → amber. */
  --bands: repeating-linear-gradient(100deg,
    oklch(60% 0.19 25) 10%,
    oklch(90% 0.185 95) 15%,
    oklch(66% 0.18 34) 20%,
    oklch(78% 0.15 70) 25%,
    oklch(60% 0.19 25) 30%);
  background-image: var(--stripes), var(--bands);
  background-size: 300%, 200%;
  background-position: 50% 50%, 50% 50%;
  opacity: 0.5;
}
.aurora::before {
  filter: blur(10px);
}
.aurora::after {
  background-size: 200%, 100%;
  background-attachment: fixed;
  mix-blend-mode: difference;
  /* reverse → bands drift left → right */
  animation: aurora-flow 60s linear infinite reverse;
}
@keyframes aurora-flow {
  from { background-position: 50% 50%, 50% 50%; }
  to   { background-position: 350% 50%, 350% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .aurora::after { animation: none; }
}
.bg-paper::after {
  content: ""; position: absolute; inset: 0;
  opacity: 0.05; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.92 0 0 0 0 0.87 0 0 0 0 0.78 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}


.foreground{position:relative;z-index:1;display:block;width:1440px;height:1000px;pointer-events:none}
.aurora::after{animation-play-state:paused}
html[data-lights-play="true"] .aurora::after{animation-play-state:running}