@import url("https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap");

/* "Analyst's diary" is 15 characters — the typewriter stops exactly there. */
@keyframes type    { from { width: 0; } to { width: 15ch; } }
@keyframes caret   { 50% { border-color: transparent; } }
@keyframes fade-in { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .hero .wordmark { width: 15ch; animation: none; border-right: none; }
  .hero .tagline,
  .hero img.mark { opacity: 1; animation: none; }
}

/* ── Section scenes: each plays once, then rests ─────────────── */
@keyframes takeoff {
  0%   { left: -22%; bottom: 12px; transform: rotate(0deg); opacity: 0; }
  10%  { opacity: 0.92; }
  38%  { left: 22%;  bottom: 12px; transform: rotate(0deg); }
  50%  { left: 40%;  bottom: 26px; transform: rotate(-9deg); }
  85%  { opacity: 0.92; }
  100% { left: 122%; bottom: 96px; transform: rotate(-11deg); opacity: 0; }
}

/* Landing gear retracts just after rotation. */
@keyframes retract {
  0%, 44%  { opacity: 1; }
  52%, 100%{ opacity: 0; }
}
@keyframes runway {
  0%   { width: 0;   opacity: 0.30; }
  38%  { width: 46%; opacity: 0.30; }
  100% { width: 46%; opacity: 0; }
}
@keyframes flap {
  0%   { transform: rotateX(-72deg); }
  100% { transform: rotateX(0deg); }
}

@keyframes slapshot {
  0%   { transform: rotate(-26deg); opacity: 0; }
  15%  { opacity: 0.24; }
  40%  { transform: rotate(-46deg); }
  55%  { transform: rotate(14deg); }
  70%  { transform: rotate(2deg); }
  100% { transform: rotate(4deg); opacity: 0.20; }
}
@keyframes shot {
  0%   { left: 12%;  transform: rotate(0deg);   opacity: 0; }
  6%   { opacity: 0.26; }
  85%  { opacity: 0.26; }
  100% { left: 106%; transform: rotate(720deg); opacity: 0; }
}
@keyframes kick {
  0%   { left: 2%;   bottom: 10px; transform: rotate(0deg);   opacity: 0; }
  8%   { opacity: 0.26; }
  55%  { bottom: 86px; }
  88%  { opacity: 0.26; }
  100% { left: 104%; bottom: 44px; transform: rotate(900deg); opacity: 0; }
}
@keyframes appear { to { opacity: 0.16; } }

@keyframes settle {
  0%   { top: 118px; opacity: 0; }
  30%  { opacity: 0.40; }
  100% { top: 84px;  opacity: 0.38; }
}
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes drift {
  0%   { transform: translateY(0);     opacity: 0; }
  25%  { opacity: 0.40; }
  70%  { opacity: 0.32; }
  100% { transform: translateY(-46px); opacity: 0; }
}
@keyframes toss {
  0%   { transform: translateY(0) rotate(0deg);                       opacity: 0; }
  12%  { opacity: 0.46; }
  45%  { transform: translateY(-88px) rotate(var(--r));               opacity: 0.46; }
  100% { transform: translateY(-14px) rotate(calc(var(--r) * 1.7));   opacity: 0; }
}
@keyframes rule {
  0%   { width: 0;   opacity: 0; }
  100% { width: 34%; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .craft   { animation: none; left: 8%; bottom: 34px; transform: rotate(-9deg); opacity: 0.92; }
  .go .craft { animation: none; }
  .craft-svg .gear { animation: none; opacity: 0; }
  .runway  { animation: none; width: 46%; opacity: 0.30; }
  .stick   { animation: none; transform: rotate(4deg); opacity: 0.20; }
  .puck    { animation: none; left: 60%; opacity: 0.24; }
  .ball    { animation: none; left: 46%; bottom: 70px; opacity: 0.24; }
  .uprights{ animation: none; opacity: 0.16; }
  .scene-education .cap  { animation: none; opacity: 0.30; transform: none; }
  .scene-education .bell { animation: none; stroke-dashoffset: 0; }
  .scene-education .sd   { animation: none; opacity: 1; }
  .scene-education .sym  { animation: none; opacity: 0.32; }
  .scene-education .rule { animation: none; width: 34%; opacity: 1; }
}