/* Shared classes used inside every AfterLife SVG. Colours come only from tokens. */

.al { display: inline-block; vertical-align: middle; }

.ln {
  stroke: var(--ink);
  stroke-width: var(--line);
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.ln-detail { stroke-width: var(--line-detail); }
.ln-glyph { stroke-width: var(--line-glyph); }
.nofill { fill: none; }
.nostroke { stroke: none; }

.f-paper { fill: var(--paper); }
.f-paper-shade { fill: var(--paper-shade); }
.f-surface { fill: var(--surface); }
.f-button { fill: var(--button); }
.f-stone { fill: var(--stone); }
.f-deep { fill: var(--deep); }
.f-ink { fill: var(--ink); }
.f-text { fill: var(--text); }
.f-on-lamp { fill: var(--on-lamp); }
.f-banner { fill: var(--banner); }
.f-banner-ink { fill: var(--banner-ink); }
.f-lamp { fill: var(--lamp); }
.f-lamp-light { fill: var(--lamp-light); }
.f-flame-core { fill: var(--flame-core); }
.f-heart { fill: var(--heart); }
.f-mind { fill: var(--mind); }
.f-meter { fill: var(--meter); }
.f-gem { fill: var(--gem); }
.f-gem-shade { fill: var(--gem-shade); }
.f-gem-light { fill: var(--gem-light); }
.f-soul { fill: var(--soul); }
.f-soul-shade { fill: var(--soul-shade); }
.f-soul-glow { fill: var(--soul-glow); }
.f-shawl { fill: var(--shawl); }
.f-cheek { fill: var(--cheek); }
.f-water { fill: var(--water); }
.f-leaf { fill: var(--leaf); }
.f-locked { fill: var(--locked); }
.f-locked-ink { fill: var(--locked-ink); }
.f-path { fill: var(--path); }
.f-crow { fill: var(--crow); }
.f-crow-shade { fill: var(--crow-shade); }
.f-crow-light { fill: var(--crow-light); }
.f-beak { fill: var(--beak); }
.f-good { fill: var(--good); }
.f-wrong { fill: var(--wrong); }
.f-shade { fill: var(--shade); }

.s-ink { stroke: var(--ink); }
.s-banner-ink { stroke: var(--banner-ink); }
.s-locked-ink { stroke: var(--locked-ink); }
.s-crow-light { stroke: var(--crow-light); }
.s-lamp { stroke: var(--lamp); }
.s-path { stroke: var(--path); }
.s-meter { stroke: var(--meter); }
.s-paper-shade { stroke: var(--paper-shade); }
.s-beak { stroke: var(--beak); }
.s-surface { stroke: var(--surface); }
.s-locked { stroke: var(--locked); }
.s-heart { stroke: var(--heart); }
.s-mind { stroke: var(--mind); }
.s-heart-mix { stroke: color-mix(in oklab, var(--heart) 60%, var(--surface)); }
.s-mind-mix { stroke: color-mix(in oklab, var(--mind) 60%, var(--surface)); }
.s-lamp-light { stroke: var(--lamp-light); }

/* Geometry-sized strokes (bands, paths) scale with the art, unlike outlines. */
.band { fill: none; stroke-linecap: butt; }
.path-edge { fill: none; stroke: var(--ink); stroke-width: 18; stroke-linejoin: round; stroke-linecap: round; }
.path-fill { fill: none; stroke: var(--path); stroke-width: 14; stroke-linejoin: round; stroke-linecap: round; }
.path-dots { fill: none; stroke: var(--paper-shade); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 0.1 10; opacity: 0.7; }
.ring { fill: none; stroke-width: 3px; stroke-dasharray: 7 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.slot { fill: none; stroke: none; }
.hitbox { fill: none; stroke: none; pointer-events: all; }
.part-done { display: none; }
.is-done .part-done { display: inline; }
.is-disabled { opacity: 0.45; }
.no-shawl .part-shawl { display: none; }

.glow-outer { opacity: var(--glow-outer); }
.glow-inner { opacity: var(--glow-inner); }

.t {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  text-anchor: middle;
  dominant-baseline: central;
}
.t-heavy { font-weight: var(--fw-heavy); }

/* Animatable groups: pivots are relative to the part's own box, not the SVG. */
.part { transform-box: fill-box; transform-origin: 50% 50%; }
.part[data-pivot="bottom"] { transform-origin: 50% 100%; }
.part[data-pivot="top"] { transform-origin: 50% 0%; }
.part[data-pivot="left"] { transform-origin: 0% 50%; }
.part[data-pivot="right"] { transform-origin: 100% 50%; }
.part[data-pivot="bottom-left"] { transform-origin: 0% 100%; }
.part[data-pivot="bottom-right"] { transform-origin: 100% 100%; }
.part[data-pivot="top-left"] { transform-origin: 0% 0%; }
.part[data-pivot="top-right"] { transform-origin: 100% 0%; }