/* fx-text.css — styles for fx-text.js (scramble headline / flip counter / gooey pill) */

/* ---- 1. SCRAMBLE-DECRYPT ---- */
.fx-scramble-char {
  display: inline-block;
  min-width: .55em;            /* keeps layout steady while glyphs churn */
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.fx-scramble-char:not(.is-locked) { opacity: .55; }
.fx-scramble-char.is-locked {
  opacity: 1;
  transition: opacity .12s ease;
}

/* ---- 2. FLIP-BOARD COUNTER ---- */
#result-count { perspective: 220px; }
.fx-flip-digit {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transform-origin: 50% 55%;
  backface-visibility: hidden;
}
.fx-flip-digit.is-flipping {
  animation: fx-half-flip linear infinite;   /* duration set inline by JS */
}
@keyframes fx-half-flip {
  0%   { transform: rotateX(0deg); filter: brightness(1); }
  49%  { transform: rotateX(-88deg); filter: brightness(.6); }
  51%  { transform: rotateX(88deg); filter: brightness(.6); }
  100% { transform: rotateX(0deg); filter: brightness(1); }
}

/* ---- 3. GOOEY ACTIVE PILL ---- */
#tier-filter.has-gooey {
  position: relative;
  isolation: isolate;
  filter: url(#fx-goo);        /* melts blob edges while it stretches */
}
#tier-filter.has-gooey .gooey-blob {
  position: absolute;
  z-index: 0;
  border-radius: 999px;
  background: #ff5b3d;         /* vermilion pill visual */
  box-shadow: 0 8px 24px rgba(255, 91, 61, .22);
  pointer-events: none;
  transition:
    left .45s cubic-bezier(.3, 1.4, .4, 1),
    width .45s cubic-bezier(.3, 1.4, .4, 1),
    top .2s ease, height .2s ease,
    transform .45s cubic-bezier(.3, 1.4, .4, 1);
}
#tier-filter.has-gooey .gooey-blob.no-anim { transition: none; }
#tier-filter.has-gooey .gooey-blob.is-traveling {
  transform: scaleX(1.18) scaleY(.85);  /* stretch while sliding — goo does the rest */
}
/* buttons ride above the blob; native active bg off so they don't double-paint */
#tier-filter.has-gooey button {
  position: relative;
  z-index: 1;
}
#tier-filter.has-gooey button.is-active {
  background: transparent;
  box-shadow: none;
  color: #fff;
}
/* works unchanged in the stuck dark capsule — blob color is self-contained */
.control-dock.is-stuck .tier-filter.has-gooey button.is-active { color: #fff; }

/* ---- reduced motion: no churn, no flips, no slide ---- */
@media (prefers-reduced-motion: reduce) {
  .fx-scramble-char:not(.is-locked) { opacity: 1; }
  .fx-flip-digit.is-flipping { animation: none; }
  #tier-filter.has-gooey { filter: none; }
  #tier-filter.has-gooey .gooey-blob { transition: none; transform: none; }
}