/* ==========================================================
   ANIMATIONS — every @keyframes in the book, plus the classes that ride them
   Single home for motion. prefers-reduced-motion overrides are in responsive.css.
   ========================================================== */

@keyframes flicker{
  0%,100%{opacity:.85} 40%{opacity:1} 60%{opacity:.75} 80%{opacity:.95}
}

/* ---- the sigil ---- */
.sigil-rotate{ transform-origin:50% 50%; animation:sigilspin 60s linear infinite; }
.sigil-rotate.rev{ animation-direction:reverse; animation-duration:90s; }
.sigil-pulse{ animation:sigilpulse 5s ease-in-out infinite; transform-origin:50% 50%; }
@keyframes sigilspin{ to{ transform:rotate(360deg);} }
@keyframes sigilpulse{ 0%,100%{opacity:.55} 50%{opacity:1} }

/* ============ PLATE ANIMATIONS (CSS-driven) ============ */
.orbit-slow{ animation:sigilspin 44s linear infinite; transform-origin:50% 50%; }
.orbit-mid{ animation:sigilspin 23s linear infinite reverse; transform-origin:50% 50%; }
.orbit-fast{ animation:sigilspin 11s linear infinite; transform-origin:50% 50%; }
.twinkle{ animation:twinkle 3.4s ease-in-out infinite; }
.twinkle.t2{ animation-duration:4.8s; animation-delay:1.2s; }
.twinkle.t3{ animation-duration:6.1s; animation-delay:2.5s; }
@keyframes twinkle{ 0%,100%{opacity:.2} 50%{opacity:1} }
.inscribe{ stroke-dasharray:1; animation:inscribe 10s ease-in-out infinite; animation-fill-mode:both; }
.inscribe.d2{ animation-delay:1.3s; }
.inscribe.d3{ animation-delay:2.6s; }
.inscribe.d4{ animation-delay:3.9s; }
.inscribe.d5{ animation-delay:5s; }
@keyframes inscribe{
  0%{stroke-dashoffset:1; opacity:1}
  42%{stroke-dashoffset:0; opacity:1}
  80%{stroke-dashoffset:0; opacity:1}
  94%{stroke-dashoffset:0; opacity:0}
  100%{stroke-dashoffset:1; opacity:0}
}
/* chalk lettering that writes itself left to right, holds, wipes, rewrites */
.chalk-write{
  animation:chalkwrite 10s ease-in-out infinite;
  animation-fill-mode:both;
}
.chalk-write.c1{ animation-delay:.6s; }
.chalk-write.c2{ animation-delay:2.2s; }
.chalk-write.c4{ animation-delay:4.6s; }
@keyframes chalkwrite{
  0%{ clip-path:inset(0 100% 0 0); opacity:1 }
  22%{ clip-path:inset(0 0 0 0); opacity:1 }
  80%{ clip-path:inset(0 0 0 0); opacity:1 }
  94%{ opacity:0 }
  100%{ clip-path:inset(0 0 0 0); opacity:0 }
}
.breathe{ animation:breathe 6s ease-in-out infinite; transform-origin:50% 50%; }
@keyframes breathe{ 0%,100%{ transform:scale(.95); opacity:.7 } 50%{ transform:scale(1.05); opacity:1 } }
.moon-shadow{ animation:moondrift 16s ease-in-out infinite alternate; }
@keyframes moondrift{ from{ transform:translateX(-24px) } to{ transform:translateX(24px) } }

/* the living chart: the curve draws itself across the years in 3s, rests
   complete for ~4.5s, then begins again; a bead on the y-axis rides the
   line's present height (sampled from the curve along the sweep) */
.ewb-reveal{ transform-origin:75px 0; animation:ewbsweep 7.5s linear infinite; }
@keyframes ewbsweep{
  0%{ transform:scaleX(0) }
  40%{ transform:scaleX(1) }
  100%{ transform:scaleX(1) }
}
.ewb-dial{ animation:ewbdial 7.5s linear infinite; }
@keyframes ewbdial{
  0%{transform:translateY(150px)} 2%{transform:translateY(145px)}
  4%{transform:translateY(132px)} 6%{transform:translateY(114px)}
  8%{transform:translateY(95px)} 10%{transform:translateY(121px)}
  12%{transform:translateY(164px)} 14%{transform:translateY(207px)}
  16%{transform:translateY(228px)} 18%{transform:translateY(204px)}
  20%{transform:translateY(204px)} 22%{transform:translateY(192px)}
  24%{transform:translateY(119px)} 26%{transform:translateY(121px)}
  28%{transform:translateY(111px)} 30%{transform:translateY(75px)}
  32%{transform:translateY(57px)} 34%{transform:translateY(61px)}
  36%{transform:translateY(79px)} 38%{transform:translateY(106px)}
  40%{transform:translateY(140px)} 100%{transform:translateY(140px)}
}