/* ============================================
   JUMPSTART WITH LG - BACKGROUND ENGINE
   jumpstartwithlg.com | css/jlg-background.css
   ============================================

   DELETE FROM sections.css before using this:
     .hero::before   (two radial glows)
     .hero::after    (grain)
   Both are replaced here, site-wide. Leaving them stacks two glow
   systems in the hero.

   KEEP: .final-cta::before - that is section design, not atmosphere.

   WHY FIXED, NOT ABSOLUTE
   An absolute canvas spans the document, so light placed in viewport
   units only covers the first screen or two and everything below reads
   as flat. Fixed means the light is always present at every scroll
   position, and the composited layer is one screen instead of six.

   NO OVERLAY
   There is no scrim. A panel laid over the light is the washed-out mask
   this engine exists to avoid. Legibility comes from where the light
   sits - sources at the frame edges, small hot centres, long tails -
   so the reading area stays clear on its own.

   LAYERS
     canvas   base wash                      static
     lime     upper right        23s         transform + opacity
     pink     lower left         31s         transform + opacity
     orbits   rings, home only   43s         transform
     currents two strokes        18/26s      stroke-dashoffset (repaints)
     grain    tiled noise                    static
   ============================================ */

:root {
    --bg-travel-near: 110px;
    --bg-travel-mid:   78px;
    --bg-travel-far:   34px;

    --bg-o-lime:  0.55;
    --bg-o-pink:  0.50;
    --bg-o-orbit: 0.60;
}

.bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    background: linear-gradient(168deg,
        rgba(255,255,255,0.02) 0%,
        transparent 45%,
        rgba(0,0,0,0.14) 100%);
}

/* Content must sit above the canvas. */
body > *:not(.bg) { position: relative; z-index: 1; }

/* ---- light sources ---- */
.bg-light {
    position: absolute;
    width: 72vw;
    height: 72vh;
    pointer-events: none;
    will-change: transform, opacity;
}

.bg-lime-a {
    top: -22vh;
    right: -18vw;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(194,255,0,0.30) 0%,
        rgba(194,255,0,0.13) 26%,
        rgba(194,255,0,0.04) 46%,
        transparent 66%);
    opacity: var(--bg-o-lime);
    animation: bgLime 23s ease-in-out infinite;
    animation-delay: -8s;
}

.bg-pink-a {
    bottom: -26vh;
    left: -20vw;
    background: radial-gradient(ellipse at 50% 50%,
        rgba(214,0,127,0.34) 0%,
        rgba(214,0,127,0.15) 28%,
        rgba(214,0,127,0.04) 48%,
        transparent 68%);
    opacity: var(--bg-o-pink);
    animation: bgPink 31s ease-in-out infinite;
    animation-delay: -19s;
}

/* ---- orbits: home signature ---- */
.bg-orbits {
    position: absolute;
    top: -14vh;
    right: -28vw;
    width: min(1100px, 130vw);
    aspect-ratio: 1;
    opacity: var(--bg-o-orbit);
    will-change: transform;
    animation: bgOrbits 43s ease-in-out infinite;
    animation-delay: -12s;
}
.bg-orbits svg { width: 100%; height: 100%; }
.bg-orbits ellipse { fill: none; stroke: url(#jlgOrbit); stroke-width: 1; }
.bg-orbits ellipse:nth-of-type(2) { opacity: 0.5; }
.bg-orbits ellipse:nth-of-type(3) { opacity: 0.24; }

/* The only layer that repaints rather than composites. Profile here. */
.bg-orbits .current {
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-dasharray: 45 955;
    animation: bgCurrent 18s linear infinite;
    opacity: 0.85;
}
.bg-orbits .current-lime { stroke: #C2FF00; }
.bg-orbits .current-pink {
    stroke: #D6007F;
    stroke-dasharray: 32 968;
    animation-duration: 26s;
    animation-direction: reverse;
    animation-delay: -9s;
    opacity: 0.7;
}

.bg-grain {
    position: absolute;
    inset: 0;
    opacity: 0.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ============================================
   SECTIONS

   Raised sections were opaque, which covered the canvas completely and
   made the page read as lit / flat / lit / flat. A light tint keeps the
   tonal step between sections while letting the engine through.
   ============================================ */
.section--raised {
    background: rgba(255, 255, 255, 0.025);
}

/* ============================================
   KEYFRAMES
   Uneven waypoints, path out differs from path back, scale and opacity
   peak away from position peaks. All return exactly to origin.
   ============================================ */

@keyframes bgLime {
    0%   { transform: translate3d(0,0,0) scale(1); opacity: var(--bg-o-lime); }
    21%  { transform: translate3d(calc(var(--bg-travel-near) * -0.38), calc(var(--bg-travel-near) * 0.34), 0) scale(1.07); }
    39%  { opacity: calc(var(--bg-o-lime) * 1.2); }
    48%  { transform: translate3d(calc(var(--bg-travel-near) * -1), calc(var(--bg-travel-near) * 0.66), 0) scale(1.11); }
    67%  { transform: translate3d(calc(var(--bg-travel-near) * -0.54), calc(var(--bg-travel-near) * 0.92), 0) scale(1.04); opacity: calc(var(--bg-o-lime) * 0.78); }
    88%  { transform: translate3d(calc(var(--bg-travel-near) * -0.16), calc(var(--bg-travel-near) * 0.30), 0) scale(1.06); }
    100% { transform: translate3d(0,0,0) scale(1); opacity: var(--bg-o-lime); }
}

@keyframes bgPink {
    0%   { transform: translate3d(0,0,0) scale(1); opacity: var(--bg-o-pink); }
    18%  { transform: translate3d(calc(var(--bg-travel-mid) * 0.56), calc(var(--bg-travel-mid) * -0.22), 0) scale(1.08); opacity: calc(var(--bg-o-pink) * 0.82); }
    43%  { transform: translate3d(calc(var(--bg-travel-mid) * 0.92), calc(var(--bg-travel-mid) * -0.74), 0) scale(1.02); }
    61%  { opacity: calc(var(--bg-o-pink) * 1.18); }
    72%  { transform: translate3d(calc(var(--bg-travel-mid) * 0.30), calc(var(--bg-travel-mid) * -0.95), 0) scale(1.09); }
    90%  { transform: translate3d(calc(var(--bg-travel-mid) * 0.10), calc(var(--bg-travel-mid) * -0.26), 0) scale(1.03); }
    100% { transform: translate3d(0,0,0) scale(1); opacity: var(--bg-o-pink); }
}

@keyframes bgOrbits {
    0%   { transform: translate3d(8px,-8px,0) rotate(-27deg); }
    27%  { transform: translate3d(calc(var(--bg-travel-far) * -0.45), calc(var(--bg-travel-far) * 0.38), 0) rotate(-22deg); }
    53%  { transform: translate3d(calc(var(--bg-travel-far) * -0.82), calc(var(--bg-travel-far) * 0.74), 0) rotate(-16deg); }
    78%  { transform: translate3d(calc(var(--bg-travel-far) * -0.30), calc(var(--bg-travel-far) * 0.40), 0) rotate(-21deg); }
    100% { transform: translate3d(8px,-8px,0) rotate(-27deg); }
}

@keyframes bgCurrent {
    from { stroke-dashoffset: 0; }
    to   { stroke-dashoffset: -1000; }
}

/* ============================================
   VARIANTS - one engine, three configurations
   ============================================ */
[data-bg="home"] { --bg-o-lime: 0.55; --bg-o-pink: 0.50; --bg-o-orbit: 0.60; }

[data-bg="page"] {
    --bg-o-lime: 0.38;
    --bg-o-pink: 0.34;
    --bg-travel-near: 80px;
    --bg-travel-mid:  56px;
}
[data-bg="page"] .bg-orbits { display: none; }

[data-bg="quiet"] { --bg-o-lime: 0.24; --bg-o-pink: 0.22; }
[data-bg="quiet"] .bg-orbits { display: none; }
[data-bg="quiet"] .bg-light  { animation: none; }

/* ============================================
   MOTION CONTROL
   ============================================ */
.bg.is-paused .bg-light,
.bg.is-paused .bg-orbits,
.bg.is-paused .current { animation-play-state: paused; }

[data-bg-motion="off"] .bg-light,
[data-bg-motion="off"] .bg-orbits,
[data-bg-motion="off"] .current { animation: none; }

/* ============================================
   BREAKPOINTS
   ============================================ */
@media (max-width: 1023px) {
    :root { --bg-travel-near: 74px; --bg-travel-mid: 52px; --bg-travel-far: 24px; }
    .bg-light  { width: 92vw; height: 64vh; }
    .bg-orbits { right: -44vw; opacity: calc(var(--bg-o-orbit) * 0.8); }
}

@media (max-width: 767px) {
    :root { --bg-travel-near: 48px; --bg-travel-mid: 32px; }
    .bg-light     { width: 120vw; height: 58vh; }
    .bg-pink-a    { animation: none; }
    .bg-orbits    { animation: none; opacity: calc(var(--bg-o-orbit) * 0.55); }
    .current-pink { display: none; }
    .current-lime { animation-duration: 26s; stroke-width: 1.2; opacity: 0.55; }
}

/* ============================================
   REDUCED MOTION
   Scoped so an explicit opt-in wins: the system setting is the default,
   not an override.
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    html:not([data-bg-motion="on"]) .bg-light,
    html:not([data-bg-motion="on"]) .bg-orbits { animation: none; }
    html:not([data-bg-motion="on"]) .current   { display: none; }
}