/* =============================================================
   bg-stage.css — Fixed animated background for public pages.
   Ported from "Bayani.ai Fixed Background Demo.html".
   Consumes tokens defined in bayani.css :root (Bayani brand theme).

   Color variable mapping (demo → Bayani):
     --bg-page           → --color-bg-page           (#010812)
     --accent-cyan       → --color-accent-primary     (#00D2FF)
     --accent-gold       → --color-accent-secondary   (#FFC400)
     --accent-violet     → --color-accent-violet      (#6366F1)  rgb: --color-accent-violet-rgb
     --network-cyan      → --color-network-cyan       (#0C4D64)  rgb: --color-network-cyan-rgb
     --glow-soft         → --glow-accent
     --glow-strong       → --glow-accent-strong
   ============================================================= */

/* ── FIXED STAGE ─────────────────────────────────────────────
   Sits at z-index 0 behind all content. The sibling
   .public-site-shell is raised to z-index 2 so page content
   always paints above the animated layer. The constellation
   bands live inside this stage so they are automatically
   behind all page content with no z-index work needed. */
#bg-stage {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    background: var(--color-bg-page);
    pointer-events: none;
}

/* ── CSS AMBIENT GLOW LAYER ──────────────────────────────────
   Faded out across the top ~900 px so blobs stay calm behind
   the hero / nav area, with the animated region starting lower. */
.bg-layer-glow {
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 760px, #000 1000px);
            mask-image: linear-gradient(to bottom, transparent 0, transparent 760px, #000 1000px);
}

/* All blobs share the compositor-layer hint */
.bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    will-change: transform;
}

/* Blob 1 — primary cyan: --color-accent-primary-rgb (0, 210, 255) */
.bg-blob--1 {
    width: 46vw;
    height: 46vw;
    left: -8vw;
    top: -6vw;
    background: radial-gradient(circle, rgba(var(--color-accent-primary-rgb), .28), transparent 65%);
    animation: bg-roam1 60s ease-in-out infinite;
}

/* Blob 2 — violet: --color-accent-violet-rgb (99, 102, 241) */
.bg-blob--2 {
    width: 40vw;
    height: 40vw;
    right: -6vw;
    top: 24vh;
    background: radial-gradient(circle, rgba(var(--color-accent-violet-rgb), .22), transparent 65%);
    animation: bg-roam2 74s ease-in-out infinite;
}

/* Blob 3 — gold (solo accent, spatially clear of cyan blobs):
   --color-accent-secondary-rgb (255, 196, 0) */
.bg-blob--3 {
    width: 22vw;
    height: 22vw;
    left: 42vw;
    bottom: -6vh;
    background: radial-gradient(circle, rgba(var(--color-accent-secondary-rgb), .14), transparent 60%);
    animation: bg-roam3 88s ease-in-out infinite;
}

/* Multi-stop roaming animations — long durations for calm drift */
@keyframes bg-roam1 {
    0%, 100% { transform: translate(0, 0); }
    25%       { transform: translate(34vw, 18vh); }
    50%       { transform: translate(58vw, 52vh); }
    75%       { transform: translate(20vw, 40vh); }
}

@keyframes bg-roam2 {
    0%, 100% { transform: translate(0, 0); }
    25%       { transform: translate(-30vw, 28vh); }
    50%       { transform: translate(-52vw, -12vh); }
    75%       { transform: translate(-18vw, 44vh); }
}

@keyframes bg-roam3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%       { transform: translate(-26vw, -22vh) scale(1.1); }
    50%       { transform: translate(22vw, -44vh) scale(1); }
    75%       { transform: translate(-34vw, -14vh) scale(1.14); }
}

/* Faint grid — reinforces the engineered aesthetic.
   Grid line colour: --color-network-cyan-rgb (12, 77, 100) */
.bg-grid {
    position: absolute;
    inset: 0;
    opacity: .35;
    background-image:
        linear-gradient(rgba(var(--color-network-cyan-rgb), .18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--color-network-cyan-rgb), .18) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, black 30%, transparent 75%);
}

/* ── CANVAS LAYER (rings + hexagon, Motif B) ─────────────────
   Content drawn by bg-stage.js. */
.bg-layer-canvas {
    position: absolute;
    inset: 0;
}

.bg-layer-canvas canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── CURSOR GLOW ─────────────────────────────────────────────
   Follows the pointer via transform in JS; opacity driven by
   the .is-active class added on init.
   Colour: --color-accent-primary-rgb (0, 210, 255) */
#bg-cursor-glow {
    position: fixed;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--color-accent-primary-rgb), .10), transparent 60%);
    pointer-events: none;
    z-index: 1;
    left: 0;
    top: 0;
    transition: opacity .4s ease;
    opacity: 0;
    will-change: transform;
}

#bg-cursor-glow.is-active { opacity: 1; }

/* ── PAGE CONTENT LAYERING ───────────────────────────────────
   Raises the public shell above the fixed bg-stage (z-index 0)
   so page sections always render on top of the animation. */
.public-site-shell {
    position: relative;
    z-index: 2;
}

/* ── ACCESSIBILITY ───────────────────────────────────────────
   Freeze CSS animations for users who prefer reduced motion.
   The JS orchestrator also skips the canvas loop in this case. */
@media (prefers-reduced-motion: reduce) {
    .bg-blob { animation: none !important; }
}

/* ── CONSTELLATION BANDS ─────────────────────────────────────
   Positioned INSIDE #bg-stage so they sit behind all page content
   with zero z-index trickery needed.

   Strategy: .bg-constellation-container mirrors the max-w-7xl (1280px)
   content area, centered via left:50%/translateX(-50%). Each band is
   anchored to the container boundary with right:100% (left band) or
   left:100% (right band), so it naturally sits in the viewport gutter.
   #bg-stage's own overflow:hidden clips the band at the viewport edge.

   This requires NO viewport math and works at any screen width:
   - 1440px viewport → 80px gutter → 80px of each band visible
   - 2560px viewport → 640px gutter → full 200px band visible
   - 1280px viewport → 0px gutter → band fully hidden (correct) */

.bg-constellation-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1280px; /* matches Tailwind max-w-7xl */
    pointer-events: none;
}

.bg-constellation-band {
    position: absolute;
    top: 0;
    height: 100%;
    width: 200px;
    opacity: .85;
    pointer-events: none;
}

.bg-constellation-band--left {
    right: 100%; /* right edge = content left boundary */
    /* Fade outer edge (left) in, and inner edge (right) out before content overlaps */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 25%, black 60%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0%, black 25%, black 60%, transparent 100%);
}

.bg-constellation-band--right {
    left: 100%; /* left edge = content right boundary */
    /* Fade outer edge (right) in, and inner edge (left) out before content overlaps */
    -webkit-mask-image: linear-gradient(to left, transparent 0%, black 25%, black 60%, transparent 100%);
            mask-image: linear-gradient(to left, transparent 0%, black 25%, black 60%, transparent 100%);
}

@keyframes pulse-node {
    0%, 100% { opacity: .5; transform: scale(.8); }
    50%       { opacity: 1;  transform: scale(1.25); }
}

.bg-constellation-band .node {
    transform-box: fill-box;
    transform-origin: center;
    animation: pulse-node 4s ease-in-out infinite;
}

.bg-constellation-band .node:nth-child(2)  { animation-delay: 1.76s; }
.bg-constellation-band .node:nth-child(3)  { animation-delay: 2.18s; }
.bg-constellation-band .node:nth-child(4)  { animation-delay: 3.6s; }
.bg-constellation-band .node:nth-child(5)  { animation-delay: 1.82s; }
.bg-constellation-band .node:nth-child(6)  { animation-delay: 1.98s; }
.bg-constellation-band .node:nth-child(7)  { animation-delay: 2.29s; }
.bg-constellation-band .node:nth-child(8)  { animation-delay: 0.72s; }
.bg-constellation-band .node:nth-child(9)  { animation-delay: 2.0s; }
.bg-constellation-band .node:nth-child(10) { animation-delay: 2.46s; }
.bg-constellation-band .node:nth-child(11) { animation-delay: 3.09s; }
.bg-constellation-band .node:nth-child(12) { animation-delay: 0.37s; }
.bg-constellation-band .node:nth-child(13) { animation-delay: 1.18s; }
.bg-constellation-band .node:nth-child(14) { animation-delay: 0.35s; }
.bg-constellation-band .node:nth-child(15) { animation-delay: 3.16s; }
.bg-constellation-band .node:nth-child(16) { animation-delay: 2.7s; }
.bg-constellation-band .node:nth-child(17) { animation-delay: 0.16s; }
.bg-constellation-band .node:nth-child(18) { animation-delay: 3.83s; }
.bg-constellation-band .node:nth-child(19) { animation-delay: 3.76s; }
.bg-constellation-band .node:nth-child(20) { animation-delay: 2.55s; }
.bg-constellation-band .node:nth-child(21) { animation-delay: 2.4s; }
.bg-constellation-band .node:nth-child(22) { animation-delay: 0.61s; }
.bg-constellation-band .node:nth-child(23) { animation-delay: 0.06s; }
.bg-constellation-band .node:nth-child(24) { animation-delay: 2.06s; }
.bg-constellation-band .node:nth-child(25) { animation-delay: 0.23s; }
.bg-constellation-band .node:nth-child(26) { animation-delay: 0.74s; }
.bg-constellation-band .node:nth-child(27) { animation-delay: 0.94s; }
.bg-constellation-band .node:nth-child(28) { animation-delay: 0.12s; }
.bg-constellation-band .node:nth-child(29) { animation-delay: 1.81s; }
.bg-constellation-band .node:nth-child(30) { animation-delay: 1.72s; }
.bg-constellation-band .node:nth-child(31) { animation-delay: 3.29s; }
.bg-constellation-band .node:nth-child(32) { animation-delay: 2.02s; }
.bg-constellation-band .node:nth-child(33) { animation-delay: 2.5s; }
.bg-constellation-band .node:nth-child(34) { animation-delay: 1.95s; }
.bg-constellation-band .node:nth-child(35) { animation-delay: 2.58s; }
.bg-constellation-band .node:nth-child(36) { animation-delay: 1.78s; }
.bg-constellation-band .node:nth-child(37) { animation-delay: 1.08s; }
.bg-constellation-band .node:nth-child(38) { animation-delay: 3.89s; }
.bg-constellation-band .node:nth-child(39) { animation-delay: 3.88s; }
.bg-constellation-band .node:nth-child(40) { animation-delay: 3.28s; }
.bg-constellation-band .node:nth-child(41) { animation-delay: 2.76s; }
.bg-constellation-band .node:nth-child(42) { animation-delay: 1.23s; }
.bg-constellation-band .node:nth-child(43) { animation-delay: 0.9s; }
.bg-constellation-band .node:nth-child(44) { animation-delay: 1.13s; }
.bg-constellation-band .node:nth-child(45) { animation-delay: 0.27s; }
.bg-constellation-band .node:nth-child(46) { animation-delay: 2.99s; }
.bg-constellation-band .node:nth-child(47) { animation-delay: 1.56s; }
.bg-constellation-band .node:nth-child(48) { animation-delay: 3.3s; }
.bg-constellation-band .node:nth-child(49) { animation-delay: 1.51s; }
.bg-constellation-band .node:nth-child(50) { animation-delay: 3.74s; }
.bg-constellation-band .node:nth-child(51) { animation-delay: 3.3s; }
.bg-constellation-band .node:nth-child(52) { animation-delay: 0.0s; }
.bg-constellation-band .node:nth-child(53) { animation-delay: 0.82s; }
.bg-constellation-band .node:nth-child(54) { animation-delay: 3.55s; }
.bg-constellation-band .node:nth-child(55) { animation-delay: 1.83s; }
.bg-constellation-band .node:nth-child(56) { animation-delay: 3.82s; }
.bg-constellation-band .node:nth-child(57) { animation-delay: 1.55s; }
.bg-constellation-band .node:nth-child(58) { animation-delay: 0.28s; }
.bg-constellation-band .node:nth-child(59) { animation-delay: 2.45s; }
.bg-constellation-band .node:nth-child(60) { animation-delay: 3.04s; }
.bg-constellation-band .node:nth-child(61) { animation-delay: 1.05s; }
.bg-constellation-band .node:nth-child(62) { animation-delay: 0.34s; }
.bg-constellation-band .node:nth-child(63) { animation-delay: 1.3s; }
.bg-constellation-band .node:nth-child(64) { animation-delay: 3.76s; }
.bg-constellation-band .node:nth-child(65) { animation-delay: 2.96s; }
.bg-constellation-band .node:nth-child(66) { animation-delay: 0.46s; }
.bg-constellation-band .node:nth-child(67) { animation-delay: 0.96s; }
.bg-constellation-band .node:nth-child(68) { animation-delay: 0.39s; }
.bg-constellation-band .node:nth-child(69) { animation-delay: 0.23s; }
.bg-constellation-band .node:nth-child(70) { animation-delay: 3.11s; }
.bg-constellation-band .node:nth-child(71) { animation-delay: 0.69s; }
.bg-constellation-band .node:nth-child(72) { animation-delay: 2.18s; }
.bg-constellation-band .node:nth-child(73) { animation-delay: 1.74s; }
.bg-constellation-band .node:nth-child(74) { animation-delay: 0.74s; }
.bg-constellation-band .node:nth-child(75) { animation-delay: 2.85s; }
.bg-constellation-band .node:nth-child(76) { animation-delay: 0.51s; }
.bg-constellation-band .node:nth-child(77) { animation-delay: 2.51s; }
.bg-constellation-band .node:nth-child(78) { animation-delay: 0.45s; }
.bg-constellation-band .node:nth-child(79) { animation-delay: 1.64s; }
.bg-constellation-band .node:nth-child(80) { animation-delay: 0.83s; }

@media (max-width: 768px) {
    .bg-constellation-band { opacity: .4; }
}

@media (prefers-reduced-motion: reduce) {
    .bg-constellation-band .node { animation: none !important; }
}