/*
 * Lesson ambient field (T205.1). Decorative drifting-blob canvas that sits
 * BEHIND the lesson reading column. A cream-only, theme-aware port of the
 * landing AmbientField (dashboard/src/landing/components/AmbientField.tsx).
 *
 * The brand blob geometry + the desynced wandering keyframes (ambient-w1..w5,
 * coprime-ish 29/37/43/31/47s so the motion never visibly syncs) are copied
 * VERBATIM from that component's AMBIENT_CSS. Animation is transform-only on a
 * single shared blur container -> GPU-cheap, no layout/paint thrash. A
 * prefers-reduced-motion rule freezes the blobs for motion-sensitive readers.
 *
 * CRITICAL divergence from the landing: there is NO bright->cobalt ombre here.
 * The blob COLOURS stay brand-invariant; only the field's canvas background and
 * the glow opacity switch by theme. Dark mode is scoped with the SAME selector
 * lesson.css uses (html[data-theme="dark"]) so the field tracks the lesson
 * theme: cream canvas + full presence in light, near-black canvas + dimmed
 * blobs in dark so text and inline SVG stay readable.
 *
 * No user-facing copy lives here (decorative only). No em dashes.
 */

/* --- blob geometry + wandering keyframes (verbatim from AmbientField.tsx) --- */
.ambient-blob{position:absolute;border-radius:50%;will-change:transform}
.ambient-b1{width:46vw;height:46vw;left:6%;top:8%;background:radial-gradient(circle,rgba(125,234,176,.28),transparent 68%);animation:ambient-w1 29s ease-in-out infinite}
.ambient-b2{width:52vw;height:52vw;left:54%;top:2%;background:radial-gradient(circle,rgba(34,211,238,.24),transparent 68%);animation:ambient-w2 37s ease-in-out infinite}
.ambient-b3{width:40vw;height:40vw;left:30%;top:34%;background:radial-gradient(circle,rgba(88,71,176,.22),transparent 68%);animation:ambient-w3 43s ease-in-out infinite}
.ambient-b4{width:50vw;height:50vw;left:60%;top:46%;background:radial-gradient(circle,rgba(245,239,226,.30),transparent 68%);animation:ambient-w4 31s ease-in-out infinite}
.ambient-b5{width:44vw;height:44vw;left:10%;top:62%;background:radial-gradient(circle,rgba(34,211,238,.20),transparent 68%);animation:ambient-w5 47s ease-in-out infinite}
@keyframes ambient-w1{0%{transform:translate(0,0) scale(1)}25%{transform:translate(14vw,8vh) scale(1.12)}55%{transform:translate(-6vw,18vh) scale(.96)}80%{transform:translate(8vw,-6vh) scale(1.06)}100%{transform:translate(0,0) scale(1)}}
@keyframes ambient-w2{0%{transform:translate(0,0) scale(1)}30%{transform:translate(-16vw,10vh) scale(1.08)}60%{transform:translate(6vw,-8vh) scale(.94)}85%{transform:translate(-10vw,14vh) scale(1.1)}100%{transform:translate(0,0) scale(1)}}
@keyframes ambient-w3{0%{transform:translate(0,0) scale(1)}28%{transform:translate(12vw,-10vh) scale(1.1)}58%{transform:translate(-14vw,8vh) scale(1)}82%{transform:translate(4vw,16vh) scale(.92)}100%{transform:translate(0,0) scale(1)}}
@keyframes ambient-w4{0%{transform:translate(0,0) scale(1)}24%{transform:translate(-10vw,-12vh) scale(1.06)}52%{transform:translate(8vw,10vh) scale(1.14)}78%{transform:translate(-12vw,4vh) scale(.98)}100%{transform:translate(0,0) scale(1)}}
@keyframes ambient-w5{0%{transform:translate(0,0) scale(1)}33%{transform:translate(16vw,-8vh) scale(1.1)}63%{transform:translate(-8vw,-14vh) scale(.95)}88%{transform:translate(10vw,6vh) scale(1.08)}100%{transform:translate(0,0) scale(1)}}
@media (prefers-reduced-motion:reduce){.ambient-blob{animation:none}}

/* --- lesson-only theme-aware canvas (replaces the landing ombre) --- */
/* field container: fixed full-viewport, behind content, non-interactive */
.ambient-field{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
/* inner glow wrapper: one shared blur, drift past edges */
.ambient-glow{position:absolute;inset:-30%;pointer-events:none;filter:blur(60px)}
/* LIGHT (default): cream canvas, blobs kept very faint so they never
   compete with the lesson text -- a barely-there tint, not a feature. */
:root .ambient-field{background:#F5EFE2}
:root .ambient-glow{opacity:0.6}
/* DARK: near-black canvas, blobs dimmed further so text/SVG stay readable */
:root[data-theme="dark"] .ambient-field, html[data-theme="dark"] .ambient-field{background:#0d0e0c}
:root[data-theme="dark"] .ambient-glow, html[data-theme="dark"] .ambient-glow{opacity:0.35}