/* ============= AMBIENT LIGHTING =============
   A fixed, non-interactive layer painted *behind* every page's content
   (z-index:-1 under the root stacking context, so it sits above the
   body's own background but below everything in normal flow — glass
   cards with backdrop-filter pick it up through their blur). Built and
   driven by ambient.js; toggled per user in Settings.

   Every moving part animates only `transform`/`translate`/`opacity`, so
   it stays on the compositor. The JS feeds three numbers in as custom
   properties on .arko-ambient itself (not :root, so recalcs stay
   scoped to this subtree):
     --arko-scroll    px scrolled
     --arko-progress  0..1 through the page
     --arko-energy    0..1, rises with scroll speed and decays at rest
   --amb-accent / --amb-neon are set per page from the page's own
   accent color. */

.arko-ambient {
  --arko-scroll: 0;
  --arko-progress: 0;
  --arko-energy: 0;
  --amb-accent: #6E8FA3;
  --amb-neon: #4FC3E8;
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.arko-ambient.on { opacity: 1; }

/* ---- light pools: large soft radial lights at three depths ---- */
.arko-ambient-pool {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}
.arko-ambient-pool.p1 {
  width: 78vmax; height: 78vmax;
  top: -38vmax; left: -18vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--amb-accent) 20%, transparent) 0%, transparent 62%);
  /* scroll parallax + a lean toward the cursor (--amb-mx/--amb-my, -1..1) */
  translate: calc(var(--amb-mx, 0) * 1.6vw) calc(var(--arko-scroll) * -0.06px + var(--amb-my, 0) * 1.2vh);
  opacity: calc(1 - var(--arko-progress) * 0.45);
  animation: arkoPoolDriftA 46s ease-in-out infinite alternate;
}
.arko-ambient-pool.p2 {
  width: 64vmax; height: 64vmax;
  top: 18vh; right: -30vmax;
  background: radial-gradient(circle, color-mix(in srgb, var(--amb-neon) 13%, transparent) 0%, transparent 60%);
  translate: calc(var(--amb-mx, 0) * -2.4vw) calc(var(--arko-scroll) * -0.14px + var(--amb-my, 0) * -1.8vh);
  opacity: calc(0.75 + var(--arko-progress) * 0.25);
  animation: arkoPoolDriftB 58s ease-in-out infinite alternate;
}
.arko-ambient-pool.p3 {
  width: 70vmax; height: 70vmax;
  bottom: -46vmax; left: 12vw;
  background: radial-gradient(circle, color-mix(in srgb, var(--amb-accent) 16%, transparent) 0%, transparent 60%);
  translate: calc(var(--amb-mx, 0) * 1vw) calc(var(--arko-scroll) * -0.22px + var(--amb-my, 0) * 0.8vh);
  /* Rises into view as you scroll down — the light "follows" you
     toward the bottom of the page rather than staying parked at the top. */
  opacity: calc(0.35 + var(--arko-progress) * 0.65);
  animation: arkoPoolDriftC 52s ease-in-out infinite alternate;
}
@keyframes arkoPoolDriftA { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vw, 4vh) scale(1.08); } }
@keyframes arkoPoolDriftB { from { transform: translate(0, 0) scale(1.05); } to { transform: translate(-7vw, 6vh) scale(0.94); } }
@keyframes arkoPoolDriftC { from { transform: translate(0, 0) scale(0.96); } to { transform: translate(5vw, -5vh) scale(1.06); } }

/* ---- neon streaks: thin light-leak bars that slide with scroll and
   brighten with scroll speed, like light trails ---- */
.arko-ambient-streak {
  position: absolute;
  height: 1.5px;
  width: 62vw;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--amb-neon) 85%, transparent) 50%, transparent);
  box-shadow: 0 0 14px 1px color-mix(in srgb, var(--amb-neon) 45%, transparent);
  will-change: transform, opacity;
}
.arko-ambient-streak.s1 {
  top: 22vh; left: -10vw;
  rotate: -9deg;
  translate: calc(var(--arko-scroll) * 0.05px) calc(var(--arko-scroll) * -0.1px);
  opacity: calc(0.07 + var(--arko-energy) * 0.33);
  animation: arkoStreakSlide 34s ease-in-out infinite alternate;
}
.arko-ambient-streak.s2 {
  top: 68vh; right: -14vw;
  rotate: -9deg;
  translate: calc(var(--arko-scroll) * -0.07px) calc(var(--arko-scroll) * -0.18px);
  opacity: calc(0.05 + var(--arko-energy) * 0.28);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--amb-accent) 85%, transparent) 50%, transparent);
  box-shadow: 0 0 14px 1px color-mix(in srgb, var(--amb-accent) 45%, transparent);
  animation: arkoStreakSlide 41s ease-in-out infinite alternate-reverse;
}
@keyframes arkoStreakSlide { from { transform: translateX(-4vw); } to { transform: translateX(6vw); } }

/* ---- light beams: soft shafts falling from the top, like light through a
   high window — the page's own colour, swaying slowly, fading out downward ---- */
.arko-ambient-beams {
  position: absolute; inset: -12vh -10vw 0;
  translate: calc(var(--amb-mx, 0) * -1vw) calc(var(--arko-scroll) * -0.03px);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 42%, transparent 82%);
  mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.55) 42%, transparent 82%);
  opacity: calc(1 - var(--arko-progress) * 0.6);
}
.arko-ambient-beams i {
  position: absolute; top: -18vh; height: 125vh;
  transform-origin: 50% 0;
  rotate: 22deg;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--amb-accent) 8%, transparent) 50%, transparent);
  animation: arkoBeamSway 27s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.arko-ambient-beams .b1 { left: 10vw; width: 12vw; }
.arko-ambient-beams .b2 { left: 27vw; width: 5vw; animation-duration: 34s; animation-delay: -9s; }
.arko-ambient-beams .b3 { left: 44vw; width: 17vw; animation-duration: 41s; animation-delay: -17s; }
@keyframes arkoBeamSway {
  0%   { transform: translateX(-1.5vw) rotate(-2.5deg); opacity: 0.45; }
  50%  { transform: translateX(1vw) rotate(0.5deg);    opacity: 0.95; }
  100% { transform: translateX(2vw) rotate(2.5deg);    opacity: 0.6; }
}

/* ---- sections rise into view (ambient.js setupReveal) ---- */
.arko-reveal { opacity: 0; }

/* ---- dust motes: specks drifting up through the light (ambient.js addMotes) ---- */
.arko-ambient-motes {
  position: absolute; inset: 0;
  translate: calc(var(--amb-mx, 0) * 1.2vw) calc(var(--amb-my, 0) * 0.8vh);
}
.arko-mote {
  position: absolute; left: var(--x); top: var(--y);
  width: var(--s); height: var(--s); border-radius: 50%;
  background: color-mix(in srgb, var(--amb-accent) 40%, #F3EBDD);
  box-shadow: 0 0 6px 1px color-mix(in srgb, var(--amb-accent) 50%, transparent);
  opacity: 0;
  animation: arkoMote var(--d) linear var(--delay) infinite;
  will-change: transform, opacity;
}
@keyframes arkoMote {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  14%  { opacity: var(--o); }
  50%  { transform: translate3d(var(--sway), -22vh, 0); }
  86%  { opacity: var(--o); }
  100% { transform: translate3d(calc(var(--sway) * -0.5), -46vh, 0); opacity: 0; }
}
/* Nothing moves while the lighting is off. */
.arko-ambient:not(.on) .arko-mote, .arko-ambient:not(.on) .arko-ambient-beams i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .arko-mote { display: none; }
  .arko-ambient-beams i { animation: none; opacity: 0.6; }
}

/* ---- vignette: darkens the edges so the lit center reads as the
   subject, the way a lens would ---- */
.arko-ambient-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(4, 6, 10, 0.55) 100%);
}

/* ---- "power-on" — applied by ambient.js via the Web Animations API
   (not a CSS class), so it layers on top of each card's own entrance
   animation instead of replacing it. Nothing to style here; kept as a
   note so the behavior isn't a mystery when reading this file. ---- */

@media (prefers-reduced-motion: reduce) {
  .arko-ambient-pool,
  .arko-ambient-streak {
    animation: none !important;
    translate: none !important;
  }
  .arko-ambient-streak { opacity: 0.06 !important; }
}

/* ---- neon accents tied to the same switch ----
   ambient.js puts .arko-ambient-on on <html> while lighting is enabled
   (set before first paint, so no flash), plus .arko-scrolled once the
   page has scrolled, and --amb-page-accent with the page's own color. */

/* A neon light strip along the bottom edge of the sticky header,
   brightest in the middle and fading to nothing at the ends. Faint at
   rest; it lights up once content is scrolled underneath, like a
   lit edge catching what's passing beneath it. */
html.arko-ambient-on .dash-header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 6%,
    color-mix(in srgb, var(--amb-page-accent, #6E8FA3) 70%, transparent) 30%,
    color-mix(in srgb, #4FC3E8 80%, transparent) 50%,
    color-mix(in srgb, var(--amb-page-accent, #6E8FA3) 70%, transparent) 70%,
    transparent 94%);
  box-shadow: 0 0 12px 0 color-mix(in srgb, #4FC3E8 35%, transparent);
  opacity: 0.3;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
html.arko-ambient-on.arko-scrolled .dash-header::after { opacity: 0.85; }

/* Section-title accent bars pick up a soft glow in the page's color. */
html.arko-ambient-on .overview-section-title::after {
  box-shadow: 0 0 10px 0 color-mix(in srgb, var(--amb-page-accent, #6E8FA3) 55%, transparent);
}

/* ---- glass spotlight (ambient.js setupSpotlight) ----
   A soft highlight under the pointer, plus the nearest stretch of the
   border lit in the tile's own color (--spot-color). The ring is the
   same radial light masked down to a 1px frame. */
.arko-spot {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 1;
}
.arko-spot::before,
.arko-spot::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.arko-spot::before {
  background: radial-gradient(260px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(255, 255, 255, 0.07), transparent 62%);
}
.arko-spot::after {
  padding: 1px;
  background: radial-gradient(170px circle at var(--spot-x, 50%) var(--spot-y, 50%), color-mix(in srgb, var(--spot-color, #4FC3E8) 90%, white), transparent 72%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
html.arko-ambient-on .arko-lit > .arko-spot { opacity: 1; }

/* ---- sparkle burst (ambient.js sparkle) ---- */
.arko-sparkle { position: fixed; inset: 0; pointer-events: none; z-index: 2000; }
.arko-sparkle span { position: absolute; border-radius: 50%; transform: translate(-50%, -50%); }

/* Settings dropdown toggle row icon — the switch itself reuses the
   page's existing .dropdown-toggle-row / .switch styles. */
.arko-ambient-toggle-label { display: inline-flex; align-items: center; gap: 10px; }
.arko-ambient-toggle-label svg { width: 15px; height: 15px; flex-shrink: 0; color: #4FC3E8; filter: drop-shadow(0 0 4px rgba(79,195,232,0.6)); }