/**
 * Homepage widgets.
 *
 * One file for every small, homepage-only piece the plugin renders - the
 * pledged-Mishnayos counter, the rotating hero headline - rather than a
 * dedicated stylesheet per widget. Each is a handful of rules; a file of its
 * own per widget would mean more enqueue bookkeeping than CSS.
 *
 * Registered once as 'mishnah-homepage' and enqueued by whichever render
 * function actually runs, so a page that calls neither loads neither half.
 *
 * Deliberately NOT under .mishnah-ui, and using var(--primary) /
 * var(--action) (Automatic.css), not the plugin's own --m-* tokens: both
 * widgets sit inside whatever Bricks heading/paragraph context the homepage
 * gives them, at whatever size and font that context sets. Wrapping them in
 * the design system would silently swap the homepage's display typography
 * for the plugin's small UI face - see "1. Tokens" in mishnah-ui.css.
 */


/* --------------------------------------------------------------------------
   1. Stats counter
   Rendered by render_mishnah_stats_counter() in inc/mishnah-stats.php.
   -------------------------------------------------------------------------- */
.mishnah-stats-counter__num {
  color: var(--action);
  font-weight: 700;

  /* A rapidly-changing digit string that keeps its width steady, instead of
     jittering left and right as each tick swaps in narrower or wider glyphs. */
  font-variant-numeric: tabular-nums;
}


/* --------------------------------------------------------------------------
   2. Hero text
   Rendered by render_mishnah_hero_text() in inc/mishnah-homepage.php.
   js/mishnah-hero-text.js does the letter-flip; see that file for how the
   rotation itself works, including why rotateX(90deg) hides a letter with no
   `perspective` declared anywhere here.
   -------------------------------------------------------------------------- */
.mishnah-hero-text__outer {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: clamp(5rem, 7vw, 5em);
}

.mishnah-hero-text__outer h1 {
  color: var(--primary);
  font-size: clamp(3.125rem, 3.464vw + 3em, 5em);
}

.mishnah-hero-text__word {
  position: absolute;
  opacity: 0;
  color: var(--primary-medium);
}

/*
 * A no-JS / before-JS-runs fallback.
 *
 * Every word starts at opacity: 0 above, and nothing but the script ever sets
 * one to 1 - so without this, a visitor whose JavaScript is blocked, still
 * loading, or has thrown an error sees a blank first heading where "Study"
 * should be. This makes the first word the default reading, and costs the
 * animated case nothing: js/mishnah-hero-text.js sets the same property on
 * the same element the instant it runs.
 */
.mishnah-hero-text__word:first-child {
  opacity: 1;
}

.mishnah-hero-text__letter {
  display: inline-block;
  position: relative;
  /* Unconditional, deliberately - the same float: left for every language.
     RTL correctness lives in js/mishnah-hero-text.js instead: it reverses
     which character each span gets for a right-to-left word, so this rule
     never has to change. See the comment on splitLetters() there. */
  float: left;
  transform: translateZ(25px);
  transform-origin: 50% 50% 25px;
}

.mishnah-hero-text__letter.out {
  transform: rotateX(90deg);
  transition: transform 0.32s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.mishnah-hero-text__letter.behind {
  transform: rotateX(-90deg);
}

.mishnah-hero-text__letter.in {
  transform: rotateX(0deg);
  transition: transform 0.38s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}