/* Atlas v2 · the first load (ticket 012, campaign-atlas-cgm; replaces the wake-up of V2.md §2.1d). One calm sequence:
   the ground (the page's midnight) and the headline are there at the first paint; the header and the rest of the
   hero's words ease up around it, one after another; then, once the 3D has been built and its shaders compiled out
   of sight, the scene fades in under them and its timeline draws down from the oldest date. No ring, no flicker (Yusef, 2026-10-31: "remove the ring that
   emits from center screen ... make the screen load extremely polishedly").

   Why it is built this way (measured, ticket 012):
   - The old wake animated registered custom properties (--wk-*), which run on the main thread, while the 3D was
     being built in long tasks on that same thread: the flickers froze at 0, so the header and the buttons sat
     invisible for up to two seconds and then popped in all at once. Now only opacity and transform are animated,
     and the 3D's heavy build waits until the words have landed (v2.js), so nothing competes with them.
   - The hero's words are moved onto the 3D stage when it mounts (v2.js), and a moved element restarts its CSS
     animations; the entrances are switched off first (html.ld-done), so nothing replays.
   - The 3D is revealed by record.js adding .ready once it is built and its first frame drawn out of sight.
   Once per page load; reduced motion shows everything at once. */
@media (prefers-reduced-motion: no-preference) {
  /* the header, then the words, one after another (each rises 10px as it fades in) */
  html.js .top { animation: ld-fade .9s cubic-bezier(.2, .7, .2, 1) .05s both; }
  html.js .hero .hero-eb { animation: ld-rise .9s cubic-bezier(.2, .7, .2, 1) .12s both; }
  /* (the headline itself is there from the first paint, on the ground: it is the page's largest text, and the browser
     only counts text as painted once it is visible, so a headline that fades in reads as a page that painted late) */
  html.js .hero .exec { animation: ld-rise .9s cubic-bezier(.2, .7, .2, 1) .3s both; }
  html.js .hero .hero-words .acts { animation: ld-rise .9s cubic-bezier(.2, .7, .2, 1) .44s both; }
  html.js .hero .hero-note { animation: ld-fade .9s cubic-bezier(.2, .7, .2, 1) .58s both; }
  html.js .hero .evo-skip { animation: ld-fade .9s cubic-bezier(.2, .7, .2, 1) .8s both; }
  /* (once the words have landed, v2.js switches the entrances off: their end state is the elements' own, and the
     words can then be moved onto the 3D stage without replaying) */
  html.ld-done .top, html.ld-done .hero .hero-eb, html.ld-done .hero .exec, html.ld-done .hero .hero-words .acts,
  html.ld-done .hero .hero-note, html.ld-done .hero .evo-skip { animation: none; }
  /* the bottom bar's "Scroll to see more" (chrome.js) last (backwards fill only, so its own fade-out at the Book
     section still works) */
  html.js .scroll-bar .cue { animation: ld-fade 1s ease 1.6s backwards; }

  /* the 3D: its canvases and its words (the era's caption, the timeline) come in together, slowly, once record.js
     marks it ready; the timeline's line then draws down from the oldest date and the dates come on one by one */
  html.js .rec .rec-cv, html.js .rec .rec-fx { transition: opacity 1.6s cubic-bezier(.25, .6, .2, 1); }
  html.js .rec .rec-hud { animation: none; opacity: 0; transition: opacity 1.2s ease .5s; }
  html.js .rec.ready .rec-hud { opacity: 1; }
  html.js .rec .rec-tl::before { transform: scaleY(0); transform-origin: 50% 0; transition: transform 1.4s cubic-bezier(.3, .6, .2, 1) .7s; }
  html.js .rec.tl-h .rec-tl::before { transform: scaleX(0); transform-origin: 0 50%; }
  html.js .rec.ready .rec-tl::before { transform: none; }
  html.js .rec .rec-tl-stop { opacity: 0; transition: color .4s, text-shadow .4s, opacity .8s ease; }
  html.js .rec.ready .rec-tl-stop { opacity: 1; }
  html.js .rec.ready .rec-tl-stop:nth-of-type(1) { transition-delay: 0s, 0s, .8s; }
  html.js .rec.ready .rec-tl-stop:nth-of-type(2) { transition-delay: 0s, 0s, 1s; }
  html.js .rec.ready .rec-tl-stop:nth-of-type(3) { transition-delay: 0s, 0s, 1.2s; }
  html.js .rec.ready .rec-tl-stop:nth-of-type(4) { transition-delay: 0s, 0s, 1.4s; }
  html.js .rec.ready .rec-tl-stop:nth-of-type(5) { transition-delay: 0s, 0s, 1.6s; }
  html.js .rec.ready .rec-tl-stop:nth-of-type(6) { transition-delay: 0s, 0s, 1.8s; }
}

@keyframes ld-fade { from { opacity: 0; } }
@keyframes ld-rise { from { opacity: 0; transform: translateY(10px); } }