/* Built from the branding repo (idle/idle.css) by publish.py; edit it there. */
/* ==========================================================================
   The marks of the Concordia, alive — idle loops and intros.
   For the SVGs in branding/idle/marks/ (built by branding/idle/build.py).

   Idle: always on, quiet enough to sit in a header for hours.
   Intro: add .is-intro to the <svg> to play it once (remove it to return to
   idle; the overview does this after .mk-intro-length).
   .is-paused stops everything; prefers-reduced-motion stops everything.

   Lengths inside an SVG are in its own units: the seals and AIZAKU are drawn
   on ~1000, inter-astra on 1024, RYOKKA on 120 — blur radii follow that.
   ========================================================================== */

.mk { display: block; overflow: visible; }
.mk *:not([transform]) { transform-box: fill-box; transform-origin: center; }   /* parts that carry their own transform keep its origin */
.mk.is-paused, .mk.is-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .mk, .mk * { animation: none !important; }
}

/* shared ------------------------------------------------------------------ */

/* The sheen (inter-astra, the emblem, the Twin Crown): a broad band of light,
   bright at its core, leaning 22°, passes over the mark and catches its edges.
   Its two layers (.mk-sheen over the shapes, .mk-rim glowing behind them)
   share one band animation; the path is set per mark in --from / --to. */
.mk-sheen, .mk-rim { mix-blend-mode: screen; pointer-events: none; }
.mk .mk-band {
  opacity: 0; transform-box: view-box; transform-origin: 0 0;
  animation: mk-sheen 8s cubic-bezier(.45, 0, .25, 1) var(--sheen-delay, 1.5s) infinite;
}
.mk--ia { --sheen-delay: 2.2s; }
.mk--tc { --sheen-delay: 3.4s; }
@keyframes mk-sheen {
  0% { opacity: 0; transform: skewX(-22deg) translateX(var(--from)); }
  4% { opacity: 1; }
  26% { opacity: 1; transform: skewX(-22deg) translateX(var(--to)); }
  30%, 100% { opacity: 0; transform: skewX(-22deg) translateX(var(--to)); }
}
.mk.is-intro .mk-band { animation: none; opacity: 0; }
@keyframes mk-draw { to { stroke-dashoffset: 0; } }
@keyframes mk-fillin { to { fill-opacity: 1; stroke-opacity: 0; } }
@keyframes mk-appear { to { opacity: 1; transform: none; } }

/* ── inter-astra ──────────────────────────────────────────────────────────
   idle: the sheen passes, the stars twinkle in turn, the arcs breathe */
.mk--ia .ia-star { animation: ia-twinkle 6s ease-in-out infinite; }
.mk--ia .ia-star--2 { animation-delay: .45s; }
.mk--ia .ia-star--3 { animation-delay: .9s; }
.mk--ia .ia-star--4 { animation-delay: 1.35s; }
@keyframes ia-twinkle {
  0%, 26%, 100% { transform: scale(1); filter: none; }
  7% { transform: scale(1.3); filter: drop-shadow(0 0 22px #fff); }
}
.mk--ia .ia-arc { animation: ia-breathe 8s ease-in-out infinite; }
.mk--ia .ia-arc--indigo { animation-delay: -4s; }
@keyframes ia-breathe { 50% { filter: brightness(1.2) drop-shadow(0 0 26px rgba(126, 89, 212, .55)); } }

/* intro: as the site's splash — the outlines are drawn, then filled, then the stars */
.mk--ia.is-intro .ia-arc, .mk--ia.is-intro .ia-swoosh {
  stroke: #fff; stroke-width: 2px; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0;
}
.mk--ia.is-intro .ia-arc--violet { animation: mk-draw 1.3s ease-in-out .15s forwards, mk-fillin .4s ease-in 1.55s forwards; }
.mk--ia.is-intro .ia-arc--indigo { animation: mk-draw 1.3s ease-in-out .3s forwards, mk-fillin .4s ease-in 1.7s forwards; }
.mk--ia.is-intro .ia-swoosh { animation: mk-draw 1.4s ease-in-out .75s forwards, mk-fillin .3s ease-in 2s forwards; }
.mk--ia.is-intro .ia-star { opacity: 0; transform: scale(.85); animation: mk-appear .5s ease-out forwards; }
.mk--ia.is-intro .ia-star--1 { animation-delay: 1.85s; }
.mk--ia.is-intro .ia-star--2 { animation-delay: 2s; }
.mk--ia.is-intro .ia-star--3 { animation-delay: 2.15s; }
.mk--ia.is-intro .ia-star--4 { animation-delay: 2.3s; }

/* ── the emblem of the Concordia ──────────────────────────────────────────
   idle: the sheen catches the edges, the laurel glows from the stems up, the stars twinkle */
.mk--em path { fill: #fff; }
.mk--em .emblem__leaf { animation: em-leaf 7s ease-in-out infinite; }
.mk--em .emblem__leaf--2 { animation-delay: .16s; }
.mk--em .emblem__leaf--3 { animation-delay: .32s; }
.mk--em .emblem__leaf--4 { animation-delay: .48s; }
.mk--em .emblem__leaf--5 { animation-delay: .64s; }
.mk--em .emblem__leaf--6 { animation-delay: .8s; }
.mk--em .emblem__leaf--7 { animation-delay: .96s; }
@keyframes em-leaf { 0%, 24%, 100% { filter: none; } 9% { filter: drop-shadow(0 0 9px rgba(255, 255, 255, .85)); } }
.mk--em .emblem__star { animation: ia-twinkle 7s ease-in-out 3.2s infinite; }
.mk--em .emblem__star--2 { animation-delay: 3.6s; }
.mk--em .emblem__star--3 { animation-delay: 4s; }
.mk--em .emblem__star--4 { animation-delay: 4.4s; }

/* intro: as the portal's hero — ribbon, laurel pair by pair, arcs drawn, stars, a flare */
.mk--em.is-intro .emblem__ribbon, .mk--em.is-intro .emblem__leaf, .mk--em.is-intro .emblem__star { opacity: 0; }
.mk--em.is-intro .emblem__line {
  fill: rgba(255, 255, 255, 0); stroke: #fff; stroke-width: 1.6px; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.mk--em.is-intro .emblem__leaf--l { transform-origin: 100% 100%; transform: rotate(-24deg) scale(.5); }
.mk--em.is-intro .emblem__leaf--r { transform-origin: 0 100%; transform: rotate(24deg) scale(.5); }
.mk--em.is-intro .emblem__ribbon { transform-origin: 50% 0; transform: translateY(40px); }
.mk--em.is-intro .emblem__star { transform: scale(.85); }
.mk--em.is-intro .emblem__ribbon { animation: mk-appear .7s cubic-bezier(.2, .8, .2, 1) .1s forwards; }
.mk--em.is-intro .emblem__leaf { animation: mk-appear .75s cubic-bezier(.2, .9, .25, 1.15) forwards; }
.mk--em.is-intro .emblem__leaf--1 { animation-delay: .3s; }
.mk--em.is-intro .emblem__leaf--2 { animation-delay: .42s; }
.mk--em.is-intro .emblem__leaf--3 { animation-delay: .54s; }
.mk--em.is-intro .emblem__leaf--4 { animation-delay: .66s; }
.mk--em.is-intro .emblem__leaf--5 { animation-delay: .78s; }
.mk--em.is-intro .emblem__leaf--6 { animation-delay: .9s; }
.mk--em.is-intro .emblem__leaf--7 { animation-delay: 1.02s; }
.mk--em.is-intro .emblem__line { animation: mk-draw 1.2s cubic-bezier(.6, 0, .3, 1) forwards, em-fill .5s ease-in forwards; }
.mk--em.is-intro .emblem__arc--top { animation-delay: .35s, 1.55s; }
.mk--em.is-intro .emblem__arc--bottom { animation-delay: .5s, 1.7s; }
.mk--em.is-intro .emblem__stroke { animation-delay: .8s, 1.95s; animation-duration: 1.3s, .4s; }
.mk--em.is-intro .emblem__star { animation: mk-appear .5s ease-out forwards; }
.mk--em.is-intro .emblem__star--1 { animation-delay: 1.9s; }
.mk--em.is-intro .emblem__star--2 { animation-delay: 2.05s; }
.mk--em.is-intro .emblem__star--3 { animation-delay: 2.2s; }
.mk--em.is-intro .emblem__star--4 { animation-delay: 2.35s; }
.mk--em.is-intro { animation: em-flare 1.4s ease-out 2.6s; }
@keyframes em-fill { to { fill: #fff; stroke: rgba(255, 255, 255, 0); } }
@keyframes em-flare { 30% { filter: drop-shadow(0 0 22px rgba(255, 255, 255, .75)) drop-shadow(0 0 60px rgba(255, 255, 255, .3)); } }

/* ── the seals of state (shared) ──────────────────────────────────────────
   intro: the frame is struck like a stamp, the fine line drawn, the sign rises, the legend last */
.mk--seal.is-intro .mk-frame { opacity: 0; transform: scale(1.12); animation: mk-stamp .45s cubic-bezier(.2, 1.4, .4, 1) .1s forwards; }
.mk--seal.is-intro .mk-frame-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mk-draw .9s cubic-bezier(.6, 0, .3, 1) .45s forwards; }
.mk--seal.is-intro .mk-legend { opacity: 0; transform: translateY(24px); animation: mk-appear .6s ease-out 1.7s forwards; }
.mk--seal.is-intro .mk-rank { opacity: 0; transform: scale(.4); animation: mk-appear .5s cubic-bezier(.2, 1.4, .4, 1) 1.45s forwards; }
@keyframes mk-stamp {
  60% { opacity: 1; transform: scale(.97); }
  100% { opacity: 1; transform: none; }
}

/* ── Twin Crown ───────────────────────────────────────────────────────────
   idle: the sheen passes, the mortal star breathes, the crown twinkles */
.mk--tc .tc-mortal { animation: tc-breath 5s ease-in-out infinite; }
@keyframes tc-breath { 50% { filter: drop-shadow(0 0 26px currentColor) brightness(1.12); } }
.mk--tc .tc-star { animation: tc-twinkle 5s ease-in-out infinite; }
.mk--tc .tc-star--1, .mk--tc .tc-star--5 { animation-delay: 1.2s; }
.mk--tc .tc-star--2, .mk--tc .tc-star--4 { animation-delay: 1.5s; }
.mk--tc .tc-star--3 { animation-delay: 1.85s; animation-name: tc-twinkle-big; }
@keyframes tc-twinkle { 0%, 22%, 100% { transform: scale(1); filter: none; } 8% { transform: scale(1.35); filter: drop-shadow(0 0 20px #fff); } }
@keyframes tc-twinkle-big { 0%, 26%, 100% { transform: scale(1); filter: none; } 10% { transform: scale(1.4); filter: drop-shadow(0 0 34px #fff) drop-shadow(0 0 70px currentColor); } }
/* intro: the machine is drawn, the mortal star arrives, the crown is set */
.mk--tc.is-intro .tc-machine { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mk-draw 1.1s cubic-bezier(.6, 0, .3, 1) .7s forwards; }
.mk--tc.is-intro .tc-mortal { opacity: 0; transform: translateX(60px); animation: mk-appear .8s cubic-bezier(.2, .8, .2, 1) 1.3s forwards; }
.mk--tc.is-intro .tc-star { opacity: 0; transform: translateY(-30px) scale(.6); animation: mk-appear .5s cubic-bezier(.2, 1.4, .4, 1) forwards; }
.mk--tc.is-intro .tc-star--1 { animation-delay: 1.9s; }
.mk--tc.is-intro .tc-star--2 { animation-delay: 2s; }
.mk--tc.is-intro .tc-star--3 { animation-delay: 2.15s; }
.mk--tc.is-intro .tc-star--4 { animation-delay: 2s; }
.mk--tc.is-intro .tc-star--5 { animation-delay: 1.9s; }

/* ── Imperial Senate ──────────────────────────────────────────────────────
   idle: the eight seats are called in turn; the Codex glows */
.mk--se .se-seat { animation: se-call 8s ease-in-out infinite; }
.mk--se .se-seat--2 { animation-delay: .3s; }
.mk--se .se-seat--3 { animation-delay: .6s; }
.mk--se .se-seat--4 { animation-delay: .9s; }
.mk--se .se-seat--5 { animation-delay: 1.2s; }
.mk--se .se-seat--6 { animation-delay: 1.5s; }
.mk--se .se-seat--7 { animation-delay: 1.8s; }
.mk--se .se-seat--8 { animation-delay: 2.1s; }
@keyframes se-call { 0%, 20%, 100% { opacity: .78; filter: none; } 7% { opacity: 1; filter: drop-shadow(0 0 18px currentColor); } }
.mk--se .se-codex { animation: glow-soft 4s ease-in-out infinite; }
@keyframes glow-soft { 50% { filter: drop-shadow(0 0 20px currentColor) brightness(1.15); } }
/* intro: the seats fill from the left */
.mk--se.is-intro .se-seat, .mk--se.is-intro .se-bench { opacity: 0; transform: translateY(30px); animation: mk-appear .45s ease-out forwards; }
.mk--se.is-intro .se-seat--1, .mk--se.is-intro .se-bench--1 { animation-delay: .7s; }
.mk--se.is-intro .se-seat--2, .mk--se.is-intro .se-bench--2 { animation-delay: .78s; }
.mk--se.is-intro .se-seat--3, .mk--se.is-intro .se-bench--3 { animation-delay: .86s; }
.mk--se.is-intro .se-seat--4, .mk--se.is-intro .se-bench--4 { animation-delay: .94s; }
.mk--se.is-intro .se-seat--5, .mk--se.is-intro .se-bench--5 { animation-delay: 1.02s; }
.mk--se.is-intro .se-seat--6, .mk--se.is-intro .se-bench--6 { animation-delay: 1.1s; }
.mk--se.is-intro .se-seat--7, .mk--se.is-intro .se-bench--7 { animation-delay: 1.18s; }
.mk--se.is-intro .se-seat--8, .mk--se.is-intro .se-bench--8 { animation-delay: 1.26s; }
.mk--se.is-intro .se-codex { opacity: 0; transform: scale(.3); animation: mk-appear .6s cubic-bezier(.2, 1.4, .4, 1) 1.4s forwards; }
.mk--se.is-intro .se-dais { opacity: 0; transform: scaleX(0); animation: mk-appear .6s cubic-bezier(.6, 0, .3, 1) .55s forwards; }

/* ── Admiralty Council ────────────────────────────────────────────────────
   idle: the anchor's star sends a beacon, the anchor rides at its mooring */
.mk--ad .ad-ring { opacity: 0; animation: ad-ring 3.6s ease-out infinite; }
@keyframes ad-ring { 0% { opacity: .9; transform: scale(.7); } 70%, 100% { opacity: 0; transform: scale(2.6); } }
.mk--ad .ad-star { animation: ad-beacon 3.6s ease-out infinite; }
@keyframes ad-beacon { 0%, 60%, 100% { filter: none; } 6% { filter: drop-shadow(0 0 26px currentColor) brightness(1.25); } }
.mk--ad .ad-anchor { transform-box: view-box; transform-origin: 500px 236px; animation: ad-sway 7s ease-in-out infinite; }
@keyframes ad-sway { 0%, 100% { transform: rotate(-1.3deg); } 50% { transform: rotate(1.3deg); } }
.mk--ad .ad-side { animation: tc-twinkle 3.6s ease-in-out .5s infinite; }
.mk--ad .ad-side--r { animation-delay: .7s; }
/* intro: the anchor drops on its line, the star is lit */
.mk--ad.is-intro .ad-anchor { opacity: 0; transform: translateY(-120px); animation: ad-drop .9s cubic-bezier(.3, 1.3, .5, 1) .6s forwards; }
@keyframes ad-drop { to { opacity: 1; transform: none; } }
.mk--ad.is-intro .ad-star { opacity: 0; transform: scale(.3); animation: mk-appear .5s cubic-bezier(.2, 1.4, .4, 1) 1.35s forwards; }
.mk--ad.is-intro .ad-side { opacity: 0; animation: mk-appear .4s ease-out 1.6s forwards; }
.mk--ad.is-intro .ad-ring { animation: none; }

/* ── Security Council ─────────────────────────────────────────────────────
   idle: a blue sheen runs down the blade; the Crown's two stars pulse in turn */
.mk--sc .sc-glint { opacity: 0; transform-box: view-box; transform-origin: 0 0; animation: sc-sweep 5.5s cubic-bezier(.5, 0, .3, 1) 1s infinite; }
@keyframes sc-sweep { 0% { opacity: 0; transform: translateY(0); } 6% { opacity: 1; } 34% { opacity: 1; transform: translateY(640px); } 40%, 100% { opacity: 0; transform: translateY(640px); } }
.mk--sc .sc-flank { animation: sc-pulse 4s ease-in-out infinite; }
.mk--sc .sc-flank--r { animation-delay: 2s; }
@keyframes sc-pulse { 0%, 40%, 100% { filter: none; transform: scale(1); } 15% { filter: drop-shadow(0 0 18px currentColor); transform: scale(1.12); } }
/* intro: the blade is drawn out, the stars close in */
.mk--sc.is-intro .sc-blade { opacity: 0; transform: scaleY(.05); animation: mk-appear .7s cubic-bezier(.6, 0, .2, 1) .6s forwards; }
.mk--sc.is-intro .sc-flank--l { opacity: 0; transform: translateX(-80px); animation: mk-appear .6s ease-out 1.25s forwards; }
.mk--sc.is-intro .sc-flank--r { opacity: 0; transform: translateX(80px); animation: mk-appear .6s ease-out 1.25s forwards; }
.mk--sc.is-intro .sc-glint { animation: none; }

/* ── Imperial Courts ──────────────────────────────────────────────────────
   idle: the balance weighs — tips, swings back, comes to rest */
.mk--co .co-beam { transform-box: view-box; transform-origin: 500px 342px; animation: co-tilt 9s ease-in-out infinite; }
.mk--co .co-pan--l { animation: co-pan-l 9s ease-in-out infinite; }
.mk--co .co-pan--r { animation: co-pan-r 9s ease-in-out infinite; }
@keyframes co-tilt { 0%, 60%, 100% { transform: none; } 18% { transform: rotate(2.6deg); } 36% { transform: rotate(-1.4deg); } 48% { transform: rotate(.5deg); } }
@keyframes co-pan-l { 0%, 60%, 100% { transform: none; } 18% { transform: translateY(-10.4px); } 36% { transform: translateY(5.6px); } 48% { transform: translateY(-2px); } }
@keyframes co-pan-r { 0%, 60%, 100% { transform: none; } 18% { transform: translateY(10.4px); } 36% { transform: translateY(-5.6px); } 48% { transform: translateY(2px); } }
.mk--co .co-fulcrum { animation: glow-soft 9s ease-in-out infinite; }
/* intro: post, beam, then the pans are hung */
.mk--co.is-intro .co-post { opacity: 0; transform: scaleY(0); transform-origin: 50% 100%; animation: mk-appear .6s cubic-bezier(.6, 0, .3, 1) .55s forwards; }
.mk--co.is-intro .co-beam { opacity: 0; transform: scaleX(0); transform-box: fill-box; transform-origin: center; animation: mk-appear .6s cubic-bezier(.6, 0, .3, 1) .95s forwards; }
.mk--co.is-intro .co-pan { opacity: 0; transform: translateY(-60px); animation: mk-appear .7s cubic-bezier(.3, 1.4, .5, 1) 1.35s forwards; }

/* ── AIZAKU ───────────────────────────────────────────────────────────────
   idle: the core beats — twice — and a line of heat crosses the steel */
.mk--az .az-core { animation: az-beat 2.6s ease-out infinite; }
@keyframes az-beat {
  0%, 100% { filter: drop-shadow(0 0 6px #ff3241); }
  7% { filter: drop-shadow(0 0 38px #ff3241) brightness(1.25); }
  16% { filter: drop-shadow(0 0 10px #ff3241); }
  24% { filter: drop-shadow(0 0 30px #ff3241) brightness(1.15); }
  45% { filter: drop-shadow(0 0 6px #ff3241); }
}
.mk--az .az-scan { opacity: 0; transform-box: view-box; transform-origin: 0 0; animation: az-scan 7s linear 1s infinite; }
@keyframes az-scan { 0% { opacity: 0; transform: skewX(-30deg) translateX(200px); } 4% { opacity: .9; } 36% { opacity: .9; transform: skewX(-30deg) translateX(1750px); } 40%, 100% { opacity: 0; transform: skewX(-30deg) translateX(1750px); } }
/* (the intro is the forge ident: branding/aizaku/out/ident.js — the overview plays it on a canvas) */

/* ── RYOKKA ───────────────────────────────────────────────────────────────
   idle: the Mirror Array turns round the ring, the strata green one by one, the sprout sways */
.mk--ry .ry-tick { opacity: .5; animation: ry-tick 6s linear infinite; animation-delay: calc(var(--i) * .25s); }
@keyframes ry-tick { 0%, 14%, 100% { opacity: .5; filter: none; } 3% { opacity: 1; filter: drop-shadow(0 0 2px #8fe0b8); } }
.mk--ry .ry-sprout { transform-box: view-box; transform-origin: 60px 63.5px; animation: ry-sway 5.5s ease-in-out infinite; }
@keyframes ry-sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.mk--ry .ry-stratum { animation: ry-green 12s ease-in-out infinite; }
.mk--ry .ry-stratum--2 { animation-delay: 1s; }
.mk--ry .ry-stratum--3 { animation-delay: 2s; }
.mk--ry .ry-stratum--4 { animation-delay: 3s; }
.mk--ry .ry-stratum--5 { animation-delay: 4s; }
@keyframes ry-green { 0%, 34%, 100% { stroke: #d0532e; } 10%, 22% { stroke: #3fbf7f; } }
/* intro: the ring is drawn, the horizon laid, the strata settle, the sprout grows */
.mk--ry.is-intro .ry-ring { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mk-draw 1s cubic-bezier(.6, 0, .3, 1) .2s forwards; }
.mk--ry.is-intro .ry-horizon { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mk-draw .6s ease-out 1s forwards; }
.mk--ry.is-intro .ry-strata { opacity: 0; transform: translateY(6px); animation: mk-appear .7s ease-out 1.3s forwards; }
.mk--ry.is-intro .ry-sprout { opacity: 0; transform: scaleY(.1); transform-box: fill-box; transform-origin: 50% 100%; animation: mk-appear .8s cubic-bezier(.3, 1.4, .5, 1) 1.8s forwards; }
.mk--ry.is-intro .ry-tick { opacity: 0; animation: ry-in .2s ease-out forwards; animation-delay: calc(.3s + var(--i) * .035s); }
@keyframes ry-in { to { opacity: 1; } }   /* opacity only: each tick keeps its own rotation */

/* ==========================================================================
   Lore motion — .mk--lore on the <svg> (the marks carry it by default).
   In place of the sheen, motion only that mark could have; remove the class
   to fall back to the sheen. Never during an intro.
   ========================================================================== */
.mk--lore .mk-band, .mk--lore .mk-sheen, .mk--lore .mk-rim { display: none; animation: none; }

/* ── the emblem: the canopy and the signatories ───────────────────────────
   The laurel glows in the Kodama's light (their speech is part light; the
   Concordia's light symbolism is theirs), each leaf on its own rhythm. The
   stars light in the order the peoples signed the Codex, each in its
   people's color: the colonists, the Kodama, Astralia — IY 0 — and after
   fourteen centuries the Ilhar (the Second Accord). Then all four hold. */
.mk--em.mk--lore:not(.is-intro) .emblem__leaf { animation: em-canopy var(--t, 7s) ease-in-out var(--d, 0s) infinite; }
@keyframes em-canopy {
  0%, 100% { filter: none; }
  14% { filter: drop-shadow(0 0 7px rgba(127, 232, 216, .85)); }
  26% { filter: drop-shadow(0 0 2px rgba(127, 232, 216, .35)); }
  38% { filter: drop-shadow(0 0 10px rgba(127, 232, 216, .7)); }
  54% { filter: none; }
}
.mk--em.mk--lore:not(.is-intro) .emblem__star { animation: 10s ease-out 1s infinite; }
.mk--em.mk--lore:not(.is-intro) .emblem__star--2 { animation-name: em-sign-colonists; }
.mk--em.mk--lore:not(.is-intro) .emblem__star--1 { animation-name: em-sign-kodama; }
.mk--em.mk--lore:not(.is-intro) .emblem__star--3 { animation-name: em-sign-astralia; }
.mk--em.mk--lore:not(.is-intro) .emblem__star--4 { animation-name: em-sign-ilhar; }
@keyframes em-sign-colonists {
  0%, 100% { transform: none; filter: none; }
  3% { transform: scale(1.3); filter: drop-shadow(0 0 22px #ffd9a0) drop-shadow(0 0 50px #ffb45e); }
  9%, 56% { transform: none; filter: drop-shadow(0 0 9px #ffd9a0); }
  62% { transform: scale(1.12); filter: drop-shadow(0 0 26px #fff); }
  76% { transform: none; filter: none; }
}
@keyframes em-sign-kodama {
  0%, 8%, 100% { transform: none; filter: none; }
  11% { transform: scale(1.3); filter: drop-shadow(0 0 22px #7fe8d8) drop-shadow(0 0 50px #35c9b6); }
  17%, 56% { transform: none; filter: drop-shadow(0 0 9px #7fe8d8); }
  62% { transform: scale(1.12); filter: drop-shadow(0 0 26px #fff); }
  76% { transform: none; filter: none; }
}
@keyframes em-sign-astralia {
  0%, 16%, 100% { transform: none; filter: none; }
  19% { transform: scale(1.3); filter: drop-shadow(0 0 22px #c9b6ff) drop-shadow(0 0 50px #a98cf6); }
  25%, 56% { transform: none; filter: drop-shadow(0 0 9px #c9b6ff); }
  62% { transform: scale(1.12); filter: drop-shadow(0 0 26px #fff); }
  76% { transform: none; filter: none; }
}
@keyframes em-sign-ilhar {
  0%, 42%, 100% { transform: none; filter: none; }
  45% { transform: scale(1.3); filter: drop-shadow(0 0 22px #a9cfff) drop-shadow(0 0 50px #5b9fff); }
  51%, 56% { transform: none; filter: drop-shadow(0 0 9px #a9cfff); }
  62% { transform: scale(1.12); filter: drop-shadow(0 0 26px #fff); }
  76% { transform: none; filter: none; }
}

/* ── the Twin Crown: the dialogue ─────────────────────────────────────────
   The mortal star speaks a pattern of short and long lights; Astralia's
   outline answers with the same pattern, a breath later, in white. */
.mk--tc.mk--lore:not(.is-intro) .tc-mortal { animation: tc-speak 9s linear 1s infinite; }
.mk--tc.mk--lore:not(.is-intro) .tc-machine { animation: tc-answer 9s linear 2.1s infinite; }
@keyframes tc-speak {
  0%, 3%, 7%, 17%, 22%, 27%, 36%, 100% { filter: none; }
  1.4%, 6%, 10%, 16%, 21%, 26%, 31%, 35% { filter: drop-shadow(0 0 24px currentColor) brightness(1.3); }
}
@keyframes tc-answer {
  0%, 3%, 7%, 17%, 22%, 27%, 36%, 100% { filter: none; }
  1.4%, 6%, 10%, 16%, 21%, 26%, 31%, 35% { filter: drop-shadow(0 0 10px #fff) drop-shadow(0 0 26px #fff) brightness(1.5); }
}

/* ── inter-astra: the relay pair ──────────────────────────────────────────
   A fold relay flashes in both apertures at once and nothing crosses
   between them: two stars light in the same instant, each in its ring,
   then the next pair. Hard on, quick decay. */
.mk--ia .ia-aperture { opacity: 0; }
.mk--ia.mk--lore:not(.is-intro) .ia-star { animation: ia-relay 6s linear infinite; }
.mk--ia.mk--lore:not(.is-intro) .ia-aperture { animation: ia-aperture 6s ease-out infinite; }
.mk--ia.mk--lore:not(.is-intro) .ia-star--1, .mk--ia.mk--lore:not(.is-intro) .ia-aperture--1,
.mk--ia.mk--lore:not(.is-intro) .ia-star--4, .mk--ia.mk--lore:not(.is-intro) .ia-aperture--4 { animation-delay: 1s; }
.mk--ia.mk--lore:not(.is-intro) .ia-star--2, .mk--ia.mk--lore:not(.is-intro) .ia-aperture--2,
.mk--ia.mk--lore:not(.is-intro) .ia-star--3, .mk--ia.mk--lore:not(.is-intro) .ia-aperture--3 { animation-delay: 2.6s; }
@keyframes ia-relay {
  0%, 100% { transform: none; filter: none; }
  .6% { transform: scale(1.22); filter: drop-shadow(0 0 26px #fff) drop-shadow(0 0 60px #58aafe); }
  9% { transform: none; filter: drop-shadow(0 0 6px #bfe4ff); }
  20% { filter: none; }
}
@keyframes ia-aperture {
  0% { opacity: 0; transform: scale(.55); }
  .6% { opacity: 1; transform: scale(.7); }
  14% { opacity: 0; transform: scale(1.9); }
  100% { opacity: 0; transform: scale(1.9); }
}