/* ==========================================================
   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 candle on the desk (classes in base.css) ----
   A real flame is mostly steady and occasionally guts. So this is NOT a
   loop of constant wobble: 0-24% and 38-64% are near-still, and the motion
   lives in two brief flurries. The stillness is what sells the flicker —
   a flame that never rests reads as a GIF.
   All three of flame/halo/cast share the 9s clock and the same beats, so
   the light on the book dips at the instant the flame does. The core runs
   on its own 5.5s (base.css) and drifts against them forever. */
@keyframes flame-dance{
  0%       { transform:translateX(-50%) scale(1,1)        rotate(0deg); }
  12%      { transform:translateX(-50%) scale(1.01,1.02)  rotate(.6deg); }
  24%      { transform:translateX(-50%) scale(1,1)        rotate(0deg); }
  28%      { transform:translateX(-50%) scale(.93,1.09)   rotate(-2.2deg); }
  31%      { transform:translateX(-50%) scale(1.05,.94)   rotate(1.6deg); }
  34%      { transform:translateX(-50%) scale(.98,1.03)   rotate(-.6deg); }
  38%      { transform:translateX(-50%) scale(1,1)        rotate(0deg); }
  55%      { transform:translateX(-50%) scale(1.01,1.02)  rotate(-.5deg); }
  64%      { transform:translateX(-50%) scale(1,1)        rotate(0deg); }
  67%      { transform:translateX(-50%) scale(1.06,1.05)  rotate(2.4deg); }
  70%      { transform:translateX(-50%) scale(.92,.95)    rotate(-1.4deg); }
  73%      { transform:translateX(-50%) scale(1.03,1.02)  rotate(.8deg); }
  77%,100% { transform:translateX(-50%) scale(1,1)        rotate(0deg); }
}
@keyframes flame-core{
  0%,100% { opacity:.9;  transform:translateX(-50%) scaleY(1); }
  30%     { opacity:1;   transform:translateX(-50%) scaleY(1.06); }
  55%     { opacity:.82; transform:translateX(-50%) scaleY(.95); }
  78%     { opacity:.97; transform:translateX(-50%) scaleY(1.03); }
}
@keyframes flame-halo{
  0%, 24%  { opacity:.85; transform:translate(-50%,38%) scale(1); }
  29%      { opacity:.6;  transform:translate(-50%,38%) scale(.9); }
  33%      { opacity:.95; transform:translate(-50%,38%) scale(1.05); }
  38%, 64% { opacity:.85; transform:translate(-50%,38%) scale(1); }
  68%      { opacity:1;   transform:translate(-50%,38%) scale(1.08); }
  71%      { opacity:.62; transform:translate(-50%,38%) scale(.92); }
  76%,100% { opacity:.85; transform:translate(-50%,38%) scale(1); }
}
@keyframes candle-cast{
  0%, 24%  { opacity:.9; }
  29%      { opacity:.62; }
  33%      { opacity:1; }
  38%, 64% { opacity:.9; }
  68%      { opacity:1; }
  71%      { opacity:.66; }
  76%,100% { opacity:.9; }
}

/* ---- 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)}
}