/* ==========================================================================
   Split-flap tiles — shared styling for assets/js/splitflap.js.
   Tokens only (--color-*, --font-mono) so it inherits the site's palette
   rather than carrying its own.
   ========================================================================== */

.sf { display: inline-flex; align-items: center; line-height: 1; }
.sf-row {
  display: inline-flex;
  gap: var(--sf-gap, 0.28em);
}

.sf-tile {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--sf-tile-w, 0.82em);
  padding: var(--sf-tile-pad, 0.16em 0.06em);
  background: var(--sf-tile-bg, #16161b);
  color: var(--sf-tile-color, var(--color-paper));
  border-radius: var(--sf-radius, 3px);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  perspective: 220px;
}

/* The hinge — the horizontal seam a real split-flap unit has. Pure decoration,
   but it's the detail that makes the effect read as mechanical rather than as
   generic letters changing. */
.sf-tile::after {
  content: "";
  position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: rgba(0, 0, 0, 0.55);
  transform: translateY(-50%);
  pointer-events: none;
}

.sf-tile.is-blank {
  background: transparent;
  min-width: var(--sf-space-w, 0.34em);
}
.sf-tile.is-blank::after { display: none; }
/* Belt and braces: a blank tile must never show a glyph even if a stray
   timer writes one into it. The race that used to cause that is fixed in
   splitflap.js, but a word gap silently filling with a random letter is a
   bad enough failure to be worth making impossible in CSS too. */
.sf-tile.is-blank .sf-char { visibility: hidden; }

.sf-char { display: block; transform-origin: center; }
/* will-change is scoped to the flipping state on purpose. Applied to every
   .sf-char it promoted ~55 permanent compositor layers on the homepage for
   glyphs that animate for a fraction of a second and then sit static for the
   rest of the visit — will-change is a targeted hint, not a default. */
.sf-tile.is-flipping .sf-char { animation: sf-flip var(--sf-flip-dur, 0.12s) ease-out; will-change: transform; }

@keyframes sf-flip {
  0%   { transform: rotateX(-88deg); opacity: 0.45; }
  100% { transform: rotateX(0deg);   opacity: 1; }
}

/* A settled tile deliberately keeps the same color as the rest of its word.
   The brief secondary-accent flash used here made single letters look like
   rendering artifacts, especially in the About-page stat words. */

@media (prefers-reduced-motion: reduce) {
  .sf-tile.is-flipping .sf-char { animation: none; }
}