/* Edu's lamp (assets/theme-scene.js): the little ceiling lamp, its pull-cord and bead, Edu who
   tugs it, and the light (or the dark) that covers the page while the theme changes.

   The lamp, the cord and the bead are the scene's own illustration colours, cool greys like
   brushed steel; the light is the new page colour itself, white (#fafafa) for the light theme
   and night-black (#0a0a0a) for the dark one, never a warm glow. Orange is Edu, and the four
   thin "click" marks. theme-scene.js moves everything with transforms and opacity. */

/* The cover and the stage join the switch's own stacking context (the corner's, or the chat's):
   the cover over the page, the switch over the cover, and the lamp and Edu over both. */
.lc-cover, .lc-stage {
  --lc-steel: #9aa1ae; --lc-shade: #e3e6ec; --lc-shade-edge: #8b93a1; --lc-bulb: #f4f5f8;
  position: fixed; inset: 0; pointer-events: none; overflow: hidden; contain: strict;
}
.lc-cover { z-index: 20; }
.theme-toggle.tt-lift { z-index: 21; }
.lc-stage { z-index: 22; }

/* --- the light, the dark, and the sheet that lifts off ------------------------------------------ */
.lc-pool, .lc-iris, .lc-hole, .lc-dark, .lc-sheet { position: absolute; display: block; }
.lc-pool, .lc-iris { opacity: 0; will-change: transform, opacity; }
/* Each its own layer: the canvas is never redrawn as it scales, the rectangles are plain colour. */
.lc-hole, .lc-dark { will-change: transform; }
.lc-sheet { inset: 0; opacity: 0.004; will-change: opacity; } /* painted ahead, unseen */

/* --- the lamp ------------------------------------------------------------------------------------ */
.lc-lamp { position: absolute; will-change: transform; }
.lc-lamp-art { position: absolute; display: block; overflow: visible; }
.lc-stem { fill: var(--lc-steel); }
.lc-shade { fill: var(--lc-shade); stroke: var(--lc-shade-edge); stroke-width: 0.8; }
.lc-shade-hi { stroke: rgba(255, 255, 255, 0.85); stroke-width: 1.3; }
.lc-rim { stroke: var(--lc-shade-edge); stroke-width: 1.6; }
.lc-bulb { fill: var(--lc-bulb); stroke: var(--lc-shade-edge); stroke-width: 0.6; }
/* the bulb's light: plain white, soft at the edge */
.lc-glow {
  position: absolute; display: block; border-radius: 50%; opacity: 0; will-change: opacity;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.5) 30%, rgba(255, 255, 255, 0.12) 62%, rgba(255, 255, 255, 0));
}
.lc-cord { position: absolute; display: block; border-radius: 1px; background: var(--lc-steel); transform-origin: 50% 0; will-change: transform; }
.lc-bead {
  position: absolute; display: block; border-radius: 50%; will-change: transform;
  background: radial-gradient(circle at 34% 30%, #ffffff 0, #e6e9ef 38%, #a3aab6 100%);
  box-shadow: inset 0 0 0 0.6px rgba(64, 71, 86, 0.45);
}
.lc-clicks { position: absolute; }
.lc-click {
  position: absolute; display: block; left: -0.9px; top: -3.5px; width: 1.8px; height: 7px; border-radius: 1px;
  background: var(--brand); opacity: 0; will-change: transform, opacity;
}

/* the little sun or moon that lights up in the bulb at the click: white and cool, never warm */
.lc-glyph { position: absolute; display: block; opacity: 0; will-change: transform, opacity; }
.lc-glyph svg { display: block; width: 100%; height: 100%; overflow: visible; }
.lc-g-rays path { stroke: #ffffff; stroke-width: 1.1; stroke-linecap: round; fill: none; }
.lc-g-sun { fill: #ffffff; stroke: #c9d0dc; stroke-width: 0.5; }
.lc-g-moon { fill: #e6ecf8; stroke: #9aa6bd; stroke-width: 0.5; }

/* the stars that come out in the dark (to dark): plain cool-white dots */
.lc-stars { position: absolute; inset: 0; will-change: opacity; }
.lc-star { position: absolute; display: block; border-radius: 50%; background: #dfe6f3; opacity: 0; will-change: transform, opacity; }
.lc-star:not(.is-big) { transform-origin: 50% 50%; scale: 0.6; }

/* --- Edu ---------------------------------------------------------------------------------------- */
.lc-fly { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; opacity: 0; will-change: transform, opacity; }
.lc-body { position: absolute; }
.lc-body > .mascot { position: absolute; left: 0; top: 0; width: 100%; }
/* Its moods rest and its shadow stays on the ground; faces and paws change at once (a cartoon
   snap, and nothing inside the felt is redrawn frame after frame). */
.lc-stage .mascot .m-mood, .lc-stage .mascot .m-act, .lc-stage .mascot .m-stage, .lc-stage .mascot .m-dip {
  animation: none; transform: none;
}
.lc-stage .mascot .m-shadow { opacity: 0; }
/* No felt filter while it flies: at this size it looks the same, and nothing filtered is repainted
   when its face changes. */
.lc-edu [filter] { filter: none; }
.lc-stage .mascot .m-hand-l, .lc-stage .mascot .m-hand-r, .lc-stage .mascot .m-eye, .lc-stage .mascot .m-lid,
.lc-stage .mascot .m-mouth, .lc-stage .mascot .m-mouth-o, .lc-stage .mascot .m-joy, .lc-stage .mascot .m-joy-l,
.lc-stage .mascot .m-joy-r, .lc-stage .mascot .m-gaze, .lc-stage .mascot .m-accessory { transition: none; }
/* reaching for the bead and holding on (the left paw), the other paw out for balance */
.lc-edu.lc-reach .m-hand-l { transform: rotate(150deg); }
.lc-edu.lc-reach .m-hand-r { transform: rotate(-26deg); }
.lc-edu.lc-tug .m-hand-r { transform: rotate(-64deg); }
/* a big stretch as the light comes on */
.lc-edu.lc-stretch .m-hand-l { transform: rotate(138deg); }
.lc-edu.lc-stretch .m-hand-r { transform: rotate(-138deg); }

/* The page's speech bubbles and sparkles step aside while the lamp changes the light. */
.m-overlay { transition: opacity 0.2s ease; }
.m-overlay.lc-hush { opacity: 0; }

/* The logo takes its new ink at once while the page is covered (its sweep would end after the
   light has lifted and look like a leftover of the old theme). */
.lg.lc-snap .lg-port, .lg.lc-snap .lg-cap { transition: none; }

/* The page behind the chat rests while the chat changes theme over it (theme-scene.js). */
.lc-rest { content-visibility: hidden; }

/* Reduced motion: there is no scene (the theme simply changes). */
@media (prefers-reduced-motion: reduce) {
  .lc-cover, .lc-stage { display: none; }
}