/* ==========================================================================
   Terminal Light — page-load choreography (every page, after shell.css).

   One sequence per page load, all on --tl-ease:
     0ms    top bar groups drop in (brand, nav, search + actions), 40ms apart
     60ms   sidebar blocks slide in from the left, 30ms apart
     120ms  main-column blocks fade up, 70ms apart for the ones already in
            view; anything below the fold fades up when it scrolls into view

   html.tl-motion is set before first paint by base.html's head script, only
   when IntersectionObserver exists and the visitor has not asked for reduced
   motion. The top bar and sidebar are pure CSS (keyframes with backwards
   fill, so nothing stays "animated" after the entrance). Main blocks are
   marked .tl-rv by the inline script after </main> (base.html), revealed
   with .is-in, and un-marked once the transition ends so their own hover
   transitions (.tl-card.is-lift and friends) are untouched afterwards.
   The /pricing page runs its own feature-card entrance (.pr-rv) and is
   skipped by the marker. Failsafes: if the script never sets
   html.tl-motion-ready, every .tl-rv shows after 2.5s; the script also
   sweeps anything still hidden after 6s.
   ========================================================================== */

@keyframes tl-rv-down { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: none; } }
@keyframes tl-rv-left { from { opacity: 0; translate: -10px 0; } to { opacity: 1; translate: none; } }
@keyframes tl-rv-show { to { opacity: 1; translate: none; } }

/* ---- top bar: each direct child (menu button, brand, nav, right group) ---- */
html.tl-motion .tl-topbar > * { animation: tl-rv-down 0.45s var(--tl-ease) backwards; animation-delay: calc(var(--tl-rv-i, 0) * 40ms); }
html.tl-motion .tl-topbar > :nth-child(2) { --tl-rv-i: 1; }
html.tl-motion .tl-topbar > :nth-child(3) { --tl-rv-i: 2; }
html.tl-motion .tl-topbar > :nth-child(4) { --tl-rv-i: 3; }
html.tl-motion .tl-topbar > :nth-child(n+5) { --tl-rv-i: 4; }

/* ---- sidebar: each block (nav, labels, lists, plan card, footer) ---- */
html.tl-motion .tl-sidebar > * { animation: tl-rv-left 0.45s var(--tl-ease) backwards; animation-delay: calc(60ms + var(--tl-rv-i, 0) * 30ms); }
html.tl-motion .tl-sidebar > :nth-child(2) { --tl-rv-i: 1; }
html.tl-motion .tl-sidebar > :nth-child(3) { --tl-rv-i: 2; }
html.tl-motion .tl-sidebar > :nth-child(4) { --tl-rv-i: 3; }
html.tl-motion .tl-sidebar > :nth-child(5) { --tl-rv-i: 4; }
html.tl-motion .tl-sidebar > :nth-child(6) { --tl-rv-i: 5; }
html.tl-motion .tl-sidebar > :nth-child(7) { --tl-rv-i: 6; }
html.tl-motion .tl-sidebar > :nth-child(8) { --tl-rv-i: 7; }
html.tl-motion .tl-sidebar > :nth-child(9) { --tl-rv-i: 8; }
html.tl-motion .tl-sidebar > :nth-child(n+10) { --tl-rv-i: 9; }

/* ---- main column blocks (marked by the inline script) ---- */
html.tl-motion .tl-rv {
  opacity: 0; translate: 0 14px;
  transition: opacity 0.6s var(--tl-ease) var(--rv-d, 0ms), translate 0.6s var(--tl-ease) var(--rv-d, 0ms);
}
html.tl-motion .tl-rv.is-in { opacity: 1; translate: none; }
html.tl-motion:not(.tl-motion-ready) .tl-rv { animation: tl-rv-show 0s linear 2.5s forwards; }

@media (prefers-reduced-motion: reduce) {
  html.tl-motion .tl-topbar > *, html.tl-motion .tl-sidebar > * { animation: none; }
  html.tl-motion .tl-rv { opacity: 1; translate: none; transition: none; }
}