/* Living illustrations (public/living.js). The rest state is the app's own .art styling; everything here is
   transient: the arrival (ink wipe, blob settle, accent sparks) and the constellation draw-on. Only opacity,
   transforms and masks animate. Under reduced motion nothing is hidden and nothing moves. */
@property --lv-r{syntax:'<percentage>';inherits:false;initial-value:150%}

/* Until an item first becomes active its art waits unseen, so it can arrive instead of blinking out and back. */
@media (prefers-reduced-motion:no-preference){
  .living .lesson:not(.is-active) .art:not(.lv-seen) :is(.blob,.illo,.fact-chip){opacity:0}
}

/* Arrival: the ink develops outwards from a soft focal point, intersected with the illustration's own mask.
   The focal point varies with the blob shape so neighbouring items do not arrive identically. The wipe is the
   first (source) layer: WebKit composites only inside each layer's painted tile, so with the no-repeat
   illustration on top its letterbox would show unmasked ink. */
.art{--lv-x:50%;--lv-y:56%;--lv-spark:var(--bright)}
.art.blob-1{--lv-x:36%;--lv-y:64%}
.art.blob-2{--lv-x:63%;--lv-y:44%}
.art.lv-in .illo-ink{
  -webkit-mask:radial-gradient(circle at var(--lv-x) var(--lv-y),#000 calc(var(--lv-r) - 24%),transparent var(--lv-r)),var(--illo) center/contain no-repeat;
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle at var(--lv-x) var(--lv-y),#000 calc(var(--lv-r) - 24%),transparent var(--lv-r)),var(--illo) center/contain no-repeat;
  mask-composite:intersect;
  animation:lv-ink 1.15s cubic-bezier(.35,.15,.2,1) both}
@keyframes lv-ink{from{--lv-r:0%}to{--lv-r:150%}}
/* Classics engravings arrive like a print pulled from the plate: a soft edge travelling top to bottom. */
[data-domain="classics"] .art.lv-in .illo-ink{
  -webkit-mask:linear-gradient(172deg,#000 calc(var(--lv-r) - 26%),transparent var(--lv-r)),var(--illo) center/contain no-repeat;
  -webkit-mask-composite:source-in;
  mask:linear-gradient(172deg,#000 calc(var(--lv-r) - 26%),transparent var(--lv-r)),var(--illo) center/contain no-repeat;
  mask-composite:intersect;
  animation-duration:1.3s}

/* Sparks: a few accent dots drift out from behind the drawing and fade. Light theme deepens them a little so
   they stay visible against the pale blob. */
.lv-sparks{position:absolute;inset:0;z-index:-1;pointer-events:none}
.lv-sparks i{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px;border-radius:50%;background:var(--lv-spark);opacity:0}
.lv-sparks i.ring{background:none;box-shadow:inset 0 0 0 1.6px var(--lv-spark)}
:root:not([data-theme="dark"]) .art{--lv-spark:color-mix(in srgb,var(--bright) 62%,var(--accent))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .art{--lv-spark:var(--bright)}}

/* Constellations (drawSky): ink lines that draw on in sequence between bright-accent stars, then the name. */
.lv-sky{display:block;width:100%;height:100%;overflow:visible;fill:none;stroke:none;--lv-star:color-mix(in srgb,var(--bright) 55%,var(--accent))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lv-sky{--lv-star:color-mix(in srgb,var(--bright) 55%,#fff)}}
:root[data-theme="dark"] .lv-sky{--lv-star:color-mix(in srgb,var(--bright) 55%,#fff)}
.lv-sky path{fill:none;stroke:var(--ink);stroke-opacity:.5;stroke-width:.5;stroke-linecap:round}
.lv-star{fill:var(--lv-star)}
.lv-halo{fill:var(--lv-star);opacity:.2}
.lv-sky-label{display:block;margin-top:.5em;text-align:center;font-size:12px;font-weight:650;letter-spacing:.14em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 76%,transparent)}
[data-domain="classics"] .lv-sky-label{font-family:var(--serif,inherit);font-size:16px;font-weight:600;letter-spacing:.06em;text-transform:none}
@media (prefers-reduced-motion:no-preference){
  .lv-sky.lv-draw .lv-star,.lv-sky.lv-draw .lv-halo{transform-box:fill-box;transform-origin:center;animation:lv-star 700ms cubic-bezier(.2,.7,.2,1) calc(var(--d)*1ms) both}
  .lv-sky.lv-draw .lv-halo{animation-name:lv-halo;animation-duration:1.4s}
  .lv-sky.lv-draw path{animation:lv-line 560ms cubic-bezier(.45,.05,.25,1) calc(var(--d)*1ms) both}
  .lv-sky.lv-draw+.lv-sky-label{animation:lv-label 700ms cubic-bezier(.2,.7,.2,1) calc(var(--d)*1ms) both}
  /* While its item is active the brightest stars glint slowly; the loop stops with the item. */
  .is-active .lv-sky .lv-halo{animation:lv-glint 3.6s ease-in-out infinite alternate}
  .is-active .lv-sky.lv-draw .lv-halo{animation:lv-halo 1.4s cubic-bezier(.2,.7,.2,1) calc(var(--d)*1ms) both,lv-glint 3.6s ease-in-out calc(var(--d)*1ms + 1.4s) infinite alternate}
}
@keyframes lv-star{from{opacity:0;transform:scale(.2)}55%{opacity:1;transform:scale(1.5)}}
@keyframes lv-halo{from{opacity:0;transform:scale(.3)}50%{opacity:.4}}
@keyframes lv-glint{from{opacity:.2}to{opacity:.08}}
@keyframes lv-line{from{stroke-dashoffset:var(--len)}}
@keyframes lv-label{from{opacity:0;translate:0 6px}}