/* ─────────────── Arrival (2026-09-28) ───────────────
   Hearth used to assemble itself in front of you: the bar painted instantly,
   and then the chip, the pills, the badges and the tab counts each appeared on
   their own the moment their answer came back from the server. Nothing was
   wrong with any single one of them, but together they read as a page still
   loading long after it had loaded.

   Two rules, both owned here and driven by renderer/arrive.js:

     1. THE BOOT STAGGER. `html.hearth-boot` is set before first paint, so the
        chrome starts folded away and arrives in reading order — mark, name,
        search, the action capsules, the tab row, the view. It is one gesture
        of about 900ms and then it is over: the class is dropped so nothing the
        app does later is caught by it.

     2. EVERYTHING THAT ARRIVES LATER pops in instead of blinking into
        existence. arrive.js stamps `.hearth-arrived` on a control that has
        just lost `.hidden`, and `.hearth-bumped` on a badge or tab count whose
        number has just changed.

   The warmth of the sign-in welcome is carried across the page load by
   html.hearth-handoff — the flare the front door ends on, fading off the top of the
   app rather than cutting to a cold bar. See web/src/h-frontdoor.js.

   Every animation here is decorative: under prefers-reduced-motion the whole
   file collapses to "everything is simply there", which is what it was before. */

/* ── the handoff veil ──
   Drawn as a pseudo-element of <html> rather than as a node, because it has to
   cover the very first frame: arrive.js runs in <head>, where there is no body
   to append anything to yet. */
html.hearth-handoff::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: radial-gradient(70% 70% at 50% 42%,
    rgba(255, 206, 150, .97), rgba(255, 150, 90, .95) 55%, rgba(255, 120, 80, .93));
  animation: hearth-veil-out .8s cubic-bezier(.4, 0, .2, 1) both;
}
@keyframes hearth-veil-out {
  0%   { opacity: 1; }
  45%  { opacity: .42; }
  100% { opacity: 0; visibility: hidden; }
}

/* ── 1. the boot stagger ── */
@keyframes hearth-arrive {
  from { opacity: 0; transform: translateY(-7px) scale(.96); }
  to   { opacity: 1; transform: none; }
}
@keyframes hearth-arrive-up {
  from { opacity: 0; transform: translateY(7px); }
  to   { opacity: 1; transform: none; }
}
@keyframes hearth-arrive-soft {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

html.hearth-boot .topbar .logo-mark,
html.hearth-boot .topbar .logo-text,
html.hearth-boot .topbar .tb-me,
html.hearth-boot .topbar .tb-search,
html.hearth-boot .topbar-actions > * {
  animation: hearth-arrive .46s cubic-bezier(.22, 1, .36, 1) both;
}
html.hearth-boot .topbar .logo-mark { animation-delay: .02s; }
html.hearth-boot .topbar .logo-text { animation-delay: .07s; }
html.hearth-boot .topbar .tb-me     { animation-delay: .12s; }
html.hearth-boot .topbar .tb-search { animation-delay: .1s; }
/* The capsules in the order they sit in the bar. Nine steps of 45ms is the
   whole row in under half a second — a sweep, not a queue. */
html.hearth-boot .topbar-actions > *:nth-child(1) { animation-delay: .16s; }
html.hearth-boot .topbar-actions > *:nth-child(2) { animation-delay: .2s; }
html.hearth-boot .topbar-actions > *:nth-child(3) { animation-delay: .245s; }
html.hearth-boot .topbar-actions > *:nth-child(4) { animation-delay: .29s; }
html.hearth-boot .topbar-actions > *:nth-child(5) { animation-delay: .335s; }
html.hearth-boot .topbar-actions > *:nth-child(6) { animation-delay: .38s; }
html.hearth-boot .topbar-actions > *:nth-child(7) { animation-delay: .425s; }
html.hearth-boot .topbar-actions > *:nth-child(8) { animation-delay: .47s; }
html.hearth-boot .topbar-actions > *:nth-child(n+9) { animation-delay: .515s; }

/* The bar itself comes down as one surface, under everything in it. */
html.hearth-boot .topbar {
  animation: hearth-bar-in .5s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes hearth-bar-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

html.hearth-boot .view-tabs > .view-tab {
  animation: hearth-arrive-up .42s cubic-bezier(.22, 1, .36, 1) both;
}
html.hearth-boot .view-tabs > .view-tab:nth-child(1) { animation-delay: .26s; }
html.hearth-boot .view-tabs > .view-tab:nth-child(2) { animation-delay: .3s; }
html.hearth-boot .view-tabs > .view-tab:nth-child(3) { animation-delay: .34s; }
html.hearth-boot .view-tabs > .view-tab:nth-child(4) { animation-delay: .38s; }
html.hearth-boot .view-tabs > .view-tab:nth-child(5) { animation-delay: .42s; }
html.hearth-boot .view-tabs > .view-tab:nth-child(6) { animation-delay: .46s; }
html.hearth-boot .view-tabs > .view-tab:nth-child(n+7) { animation-delay: .5s; }

/* The room behind the tabs, last and gentlest — no scale, so a grid of covers
   does not shimmer as it settles. */
html.hearth-boot .view-tabs ~ main,
html.hearth-boot .view-tabs ~ section.view {
  animation: hearth-arrive-soft .5s cubic-bezier(.22, 1, .36, 1) .3s both;
}

/* ── 2. arriving late ── */
.hearth-arrived {
  animation: hearth-pop .44s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes hearth-pop {
  0%   { opacity: 0; transform: scale(.62) translateY(-3px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}

/* A number that has just changed: a short ember flare rather than a silent
   swap, so a new count is something you saw happen. */
.hearth-bumped {
  animation: hearth-bump .5s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes hearth-bump {
  0%   { transform: scale(.7); filter: brightness(1.6); }
  55%  { transform: scale(1.14); filter: brightness(1.25); }
  100% { transform: none; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  html.hearth-handoff::before { display: none; }
  html.hearth-boot .topbar,
  html.hearth-boot .topbar .logo-mark,
  html.hearth-boot .topbar .logo-text,
  html.hearth-boot .topbar .tb-me,
  html.hearth-boot .topbar .tb-search,
  html.hearth-boot .topbar-actions > *,
  html.hearth-boot .view-tabs > .view-tab,
  html.hearth-boot .view-tabs ~ main,
  html.hearth-boot .view-tabs ~ section.view,
  .hearth-arrived,
  .hearth-bumped { animation: none; }
}