/* ============================================================
   motion.css — the "alive" layer for the public site.
   Loaded LAST (after app-feel.css) together with public/js/motion.js.

   Everything that hides or moves content is scoped under `html.ht-motion`,
   which motion.js only adds when motion is allowed. Without JS, or with the
   OS "reduce motion" flag, the page is exactly the old static page.
   ============================================================ */

:root {
  --ht-m-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ht-m-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ------------------------------------------------------------
   1. SCROLL REVEAL
   ------------------------------------------------------------ */
/* Hidden state has NO transition (so nothing fades out at page load);
   the transition lives on .ht-in, so it plays only when the element enters. */
html.ht-motion .ht-rv {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}
html.ht-motion .ht-rv.ht-in {
  opacity: 1; transform: none;
  transition: opacity 0.55s var(--ht-m-ease), transform 0.55s var(--ht-m-ease);
  transition-delay: var(--ht-d, 0ms);
}

/* article headings slide from the left, images scale up */
html.ht-motion .ht-rv.ht-rv-soft { transform: translate3d(-18px, 14px, 0); }
html.ht-motion img.ht-rv.ht-rv-soft,
html.ht-motion figure.ht-rv.ht-rv-soft,
html.ht-motion table.ht-rv.ht-rv-soft { transform: translate3d(0, 20px, 0) scale(0.97); }
html.ht-motion .ht-rv.ht-rv-soft.ht-in { transform: none; }

/* cards in a horizontal strip pop in one after another (strip itself fades up) */
@keyframes htPop {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(0.94); }
  to   { opacity: 1; transform: none; }
}
html.ht-motion .ht-track.ht-in > * { animation: htPop 0.6s var(--ht-m-spring) backwards; }
html.ht-motion .ht-track.ht-in > *:nth-child(1) { animation-delay: 0.05s; }
html.ht-motion .ht-track.ht-in > *:nth-child(2) { animation-delay: 0.11s; }
html.ht-motion .ht-track.ht-in > *:nth-child(3) { animation-delay: 0.17s; }
html.ht-motion .ht-track.ht-in > *:nth-child(4) { animation-delay: 0.23s; }
html.ht-motion .ht-track.ht-in > *:nth-child(5) { animation-delay: 0.29s; }
html.ht-motion .ht-track.ht-in > *:nth-child(6) { animation-delay: 0.35s; }
html.ht-motion .ht-track.ht-in > *:nth-child(n+7) { animation-delay: 0.41s; }

/* ------------------------------------------------------------
   2. COUNT-UP numbers keep a steady width while they run
   ------------------------------------------------------------ */
.ht-count { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   3. IMAGES — soft zoom on hover (transform only, cheap)
   ------------------------------------------------------------ */
html.ht-motion .article-thumb-cover,
html.ht-motion .w-card-thumb-wrap,
html.ht-motion .article-item-thumb { overflow: hidden; }

html.ht-motion .article-thumb-cover img,
html.ht-motion .w-card-thumb-wrap img,
html.ht-motion .book-box-card img,
html.ht-motion .article-item-thumb img { transition: transform 0.5s var(--ht-m-ease); }

html.ht-motion .article-box-card:hover .article-thumb-cover img,
html.ht-motion .workshop-app-card:hover .w-card-thumb-wrap img,
html.ht-motion .book-box-card:hover img,
html.ht-motion .article-item-row:hover .article-item-thumb img { transform: scale(1.05); }

/* ------------------------------------------------------------
   4. FLOATING hero pills / badges (uses `translate`, so it never fights
      a transform the element already has)
   ------------------------------------------------------------ */
@keyframes htBob {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -7px; }
}
html.ht-motion .hero-floating-pills-list > *,
html.ht-motion .hero-prop-pill { animation: htBob 5s ease-in-out infinite; }
html.ht-motion .hero-floating-pills-list > *:nth-child(2n) { animation-duration: 6s; animation-delay: -1.5s; }
html.ht-motion .hero-floating-pills-list > *:nth-child(3n) { animation-duration: 5.5s; animation-delay: -3s; }

/* ------------------------------------------------------------
   5. ARTICLE READING PROGRESS
   ------------------------------------------------------------ */
.ht-read-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 2500;
  background: linear-gradient(90deg, #38bdf8, #2563eb 45%, #ec4899);
  transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}

/* ------------------------------------------------------------
   OS "reduce motion" + ?motion=on testing override.
   public-shell.css flattens every animation/transition under the OS flag;
   when somebody explicitly forced motion on, give the reveal its time back.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html[data-motion="force"] .ht-rv.ht-in {
    transition-duration: 0.55s !important;
    transition-delay: var(--ht-d, 0ms) !important;
  }
}