/*
 * Entrance motion, modeled on the CertiCode site: headings rise out of a mask, content fades
 * up in a stagger, accent lines draw across, numbers count up, step numbers pop in.
 * Purely additive: every element ends exactly where the design already puts it.
 *
 * Only active when <html> has .motion (set in partials/theme-init before paint, skipped when the
 * device asks for reduced motion). public/js/actions.js adds .in as each element scrolls into view.
 *
 *   data-reveal           fade up             style="--i:N" staggers siblings by 90ms each
 *   .rise                 heading lifts out of a mask (wrap its text in <span>)
 *   data-count="123"      number counts up (the markup keeps the real value for no-JS)
 *   data-grow             chart bars grow from their baseline   style="--n:N" staggers them
 */
:root {
  --glide: cubic-bezier(.16, 1, .3, 1);      /* CertiCode "glide" */
  --curtain: cubic-bezier(.76, 0, .24, 1);   /* CertiCode "curtain" */
  --pop: cubic-bezier(.22, 1, .36, 1);       /* ease-out-quint: a quick pop that settles, no overshoot */
}

html.motion [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s var(--glide), transform .8s var(--glide);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.motion [data-reveal].in { opacity: 1; transform: none; }

html.motion .rise { overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
html.motion .rise > span {
  display: block;
  transform: translateY(115%) rotate(2deg);
  transform-origin: 0 100%;
  transition: transform 1.05s cubic-bezier(.23, 1, .32, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
html.motion .rise.in > span { transform: none; }

/* Opening an FAQ answer (or a sidebar group) slides its content in instead of snapping.
   Transform and opacity only, so it never reflows the page. */
@media (prefers-reduced-motion: no-preference) {
  details[open] > :not(summary) { animation: details-in .35s var(--glide); }
  /* Sidebar groups slide open only when clicked, not on every page load (it looked like the sidebar reloading). */
  .sidebar-group[open]:not(.user-toggled) > :not(summary) { animation: none; }
}
@keyframes details-in {
  from { opacity: 0; transform: translateY(-6px); }
}

/* Right after login the "Welcome back" card covers the page for about 1 s; start the entrance as it fades. */
html.motion .welcome-toast ~ * [data-reveal], html.motion .welcome-toast ~ [data-reveal] {
  transition-delay: calc(1.1s + var(--i, 0) * 90ms);
}

/* Charts: columns rise from the baseline, horizontal bars grow from the left, one after another. */
html.motion svg[data-grow] path {
  transform: scaleY(0);
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform .9s var(--glide) calc(var(--wait, 0s) + var(--n, 0) * 30ms);
}
/* A chart inside a panel that fades up waits for the panel (and for the welcome card after login),
   so the bars grow where you can see them, the same as on Analytics. */
html.motion [data-reveal] { --wait: calc(var(--i, 0) * 90ms + .3s); }
html.motion .welcome-toast ~ * [data-reveal], html.motion .welcome-toast ~ [data-reveal] { --wait: calc(1.1s + var(--i, 0) * 90ms + .3s); }
html.motion div[data-grow] {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .9s var(--glide) calc(var(--n, 0) * 70ms);
}
html.motion [data-grow].in, html.motion svg[data-grow].in path { transform: none; }

/* Buttons press in slightly while held. */
@media (prefers-reduced-motion: no-preference) {
  :is(.btn, .btn-export, .topbar-logout-btn):not(:disabled):active { transform: scale(.98); }
}