/* Ambient depth on the Academy and Our Work & References pages
   (scripts/ambient.py, motion in public/ambient.js). Three layers per
   decorated section: BACK the green light, MID the site's metallic sphere in a
   perspective scene, FRONT the content (unchanged, always above). */
.lm-ambient-host { position: relative; isolation: isolate; }
.lm-ambient { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* BACK — green light: the theme's .nm-bg-shadow (primary green #66FF63, soft
   falloff, firefly breathing) as three radial layers, no animated blur.
   Peak alphas x the breathing (0.739 -> 1, i.e. 0.85 -> 1.15 around the
   mean): core 0.28-0.38, halo 0.15-0.20, diffusion 0.07-0.095 (desktop).
   --k scales every layer: tablet 0.92, phone 0.68, subtle x 0.6. */
.lm-ambient-light { --l: clamp(700px, 64vw, 1100px); --k: 1; position: absolute; left: var(--x); top: var(--y); width: var(--l); height: var(--l); margin: calc(var(--l) / -2) 0 0 calc(var(--l) / -2); will-change: transform, opacity; }
.lm-ambient-light.is-subtle { --l: clamp(560px, 48vw, 820px); --k: .6; }
.lm-ambient-light.is-left { --x: 4%; --y: 42%; }
.lm-ambient-light.is-right { --x: 96%; --y: 42%; }
.lm-ambient-light.is-top-left { --x: 10%; --y: 16%; }
.lm-ambient-light.is-top-right { --x: 90%; --y: 16%; }
.lm-ambient-light.is-lower-left { --x: 8%; --y: 78%; }
.lm-ambient-light.is-lower-right { --x: 92%; --y: 78%; }
.lm-ambient-light.is-center { --x: 50%; --y: 55%; }
.lm-light-breath { position: absolute; inset: 0; animation: lmLightBreath 6.5s ease-in-out infinite alternate; will-change: transform, opacity; }
.lm-light-breath > span { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.lm-light-outer { width: 100%; height: 100%; background: radial-gradient(closest-side, rgb(102 255 99 / calc(.095 * var(--k))), rgb(102 255 99 / calc(.045 * var(--k))) 45%, rgb(102 255 99 / 0)); }
.lm-light-halo { width: 55%; height: 55%; background: radial-gradient(closest-side, rgb(102 255 99 / calc(.2 * var(--k))), rgb(102 255 99 / calc(.09 * var(--k))) 50%, rgb(102 255 99 / 0)); }
.lm-light-core { width: 22%; height: 22%; background: radial-gradient(closest-side, rgb(102 255 99 / calc(.38 * var(--k))), rgb(102 255 99 / calc(.16 * var(--k))) 55%, rgb(102 255 99 / 0)); }
/* Breathing: opacity 0.85 -> 1.15 and scale 0.94 -> 1.06 around the mean. */
@keyframes lmLightBreath { from { opacity: .739; transform: scale(.94); } to { opacity: 1; transform: scale(1.06); } }
/* Phones: opacity 0.90 -> 1.08, scale 0.97 -> 1.04. */
@keyframes lmLightBreathPhone { from { opacity: .833; transform: scale(.97); } to { opacity: 1; transform: scale(1.04); } }

/* MID — the metallic sphere (theme s2-3d-shape-2, plus-lighter as on the
   homepage) in a perspective scene; it travels through depth on scroll
   (ambient.js). Its blurred copy is the far layer. 20-45% of the sphere sits
   outside the viewport (the page clips horizontally). */
.lm-ambient-scene { --s: clamp(320px, 30vw, 480px); --out: .32; position: absolute; top: var(--lm-top, 0px); width: var(--s); aspect-ratio: 551 / 556; perspective: 1400px; }
.lm-ambient-scene.is-strong { --s: clamp(360px, 34vw, 520px); --out: .36; }
.lm-ambient-scene.is-left { left: calc(50% - 50vw - var(--s) * var(--out)); }
.lm-ambient-scene.is-right { right: calc(50% - 50vw - var(--s) * var(--out)); }
.lm-ambient-sphere { position: absolute; inset: 0; transform-style: preserve-3d; mix-blend-mode: plus-lighter; will-change: transform; }
.lm-ambient-sphere img, .lm-ambient-far { display: block; width: 100%; height: auto; }
/* Far layer: below the sphere, toward the page edge (clear of the text
   columns); desktop only, phones and tablets keep the sphere alone. */
.lm-ambient-far { position: absolute; width: 24%; top: 86%; mix-blend-mode: plus-lighter; opacity: .9; will-change: transform; }
.lm-ambient-scene.is-left .lm-ambient-far { left: 62%; }
.lm-ambient-scene.is-right .lm-ambient-far { right: 62%; }
@media (max-width: 1199px) { .lm-ambient-far { display: none; } }

@media (min-width: 768px) { .lm-ambient-scene.is-desktop-off { display: none; } }
@media (min-width: 768px) and (max-width: 1199px) { .lm-ambient-scene.is-tablet-off { display: none; } }

/* Tablet: 80-90% of the desktop sizes (motion scaled in ambient.js). */
@media (min-width: 768px) and (max-width: 1199px) {
  .lm-ambient-scene { --s: clamp(280px, 36vw, 400px); }
  .lm-ambient-scene.is-strong { --s: clamp(300px, 40vw, 440px); }
  .lm-ambient-light { --l: clamp(600px, 76vw, 900px); --k: .92; }
  .lm-ambient-light.is-subtle { --l: clamp(480px, 58vw, 700px); --k: .55; }
}
/* Phones: sphere 180-300px, light 350-600px and softer (core 0.21-0.26). */
@media (max-width: 767px) {
  .lm-ambient-scene { --s: clamp(180px, 56vw, 280px); --out: .3; top: var(--lm-top-m, var(--lm-top, 0px)); perspective: 1000px; }
  .lm-ambient-scene.is-strong { --s: clamp(200px, 64vw, 300px); --out: .32; }
  .lm-ambient-scene.is-phone-off { display: none; }
  /* Phone side (is-m-left / is-m-right) may differ from the desktop side. */
  .lm-ambient-scene.is-m-left { left: calc(50% - 50vw - var(--s) * var(--out)); right: auto; }
  .lm-ambient-scene.is-m-right { right: calc(50% - 50vw - var(--s) * var(--out)); left: auto; }
  .lm-ambient-light { --l: clamp(350px, 118vw, 600px); --k: .68; }
  .lm-ambient-light.is-subtle { --l: clamp(320px, 96vw, 480px); --k: .42; }
  .lm-light-breath { animation-name: lmLightBreathPhone; animation-duration: 7.5s; }
}

/* Reduced motion: static sphere (no scroll, depth or rotation: ambient.js
   does not run), light static at low opacity. */
@media (prefers-reduced-motion: reduce) {
  .lm-light-breath { animation: none; opacity: .6; transform: none; }
  .lm-ambient-sphere, .lm-ambient-far, .lm-ambient-light { will-change: auto; }
}