/*
 * App bar and league strip.
 *
 * The bar itself is the same card the date strip further down wears — white
 * fill, hairline border, floating shadow — so the two read as one family of
 * chrome bracketing the league bubbles between them. The bubbles stay on the
 * bare page: they scroll flush to the true screen edge, which a card would cut
 * short.
 */
.header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) 0 0;
}

/*
 * The bar itself — the white card, the wordmark, the stripped chips — is
 * `.app-bar` (app-bar.css), shared with the player page. This file keeps only
 * what is the home screen's alone: the filter button and its badge. The bar
 * still carries `.header__bar` as a hook for those rules.
 */

/* --- Filter button --------------------------------------------------------
 *
 * The bar's leading icon, carrying the state of the sheet it opens. Both
 * signals are the app's existing ones: the soft accent tint the date strip and
 * the bottom nav already use for "this is active", and the accent badge the nav
 * already wears for "there is something here".
 */

.header__bar .filter-button {
  position: relative;
  /*
   * The tint eases in and out rather than switching. `transform` has to be
   * restated alongside it: this shorthand replaces the one [data-pressable]
   * sets in interactions.css, and dropping it would take the press scale with
   * it.
   */
  transition:
    transform var(--spring-duration) var(--spring),
    background-color var(--duration) var(--easing),
    color var(--duration) var(--easing);
}

/*
 * interactions.css's pressed rule sets only duration and timing, and this file
 * loads after it at equal specificity — so the quick linear press-down has to
 * be restated here, or the shorthand above would hand it the spring's 320ms.
 */
.header__bar .filter-button[data-pressed="true"] {
  transition-duration: var(--duration-press);
  transition-timing-function: var(--easing);
}

/*
 * Beats `.header__bar .icon-btn`'s blanket `background: none` on specificity,
 * which is the point — the chip's fill is stripped inside the white bar, and
 * this is the one state that earns it back.
 */
.header__bar .filter-button[data-active="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.filter-button__badge {
  position: absolute;
  top: -2px;
  right: -2px;
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding-inline: 4px;
  /* Cut out of the bar behind it, so the badge reads as sitting on the icon
     rather than as a mark floating over both. */
  border: 2px solid var(--surface);
  border-radius: var(--radius-full);
  background: var(--tg-accent);
  color: var(--tg-accent-text);
  font-size: 9px;
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}

.filter-button__badge[hidden] {
  display: none;
}

/*
 * The badge's three moments — see FilterButton in Header.js for why they are
 * three. Each is driven by a data attribute the component replays, never by the
 * element simply existing: the badge is created once and reused, so an
 * animation on the base rule would play while it was still hidden and never
 * again after that. That was the bug this replaced.
 *
 * Arriving reuses the bottom nav's own keyframe rather than declaring a second
 * spring pop. Both stylesheets always load together, and one animation named
 * once is the only way two badges in one app keep arriving the same way.
 */
.filter-button__badge[data-state="entering"] {
  animation: nav-badge-in var(--spring-duration) var(--spring);
}

/* A number changing under a badge that is already there. It does not arrive
   again, so it does not come back from zero — it just acknowledges the change. */
.filter-button__badge[data-state="bumped"] {
  animation: filter-badge-bump var(--spring-duration) var(--easing);
}

.filter-button__badge[data-state="leaving"] {
  animation: filter-badge-out var(--duration) var(--easing) forwards;
}

@keyframes filter-badge-bump {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.28);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes filter-badge-out {
  to {
    opacity: 0;
    transform: scale(0.4);
  }
}

/*
 * One ring, once, on the 0 -> filtered edge. `forwards` so it ends invisible
 * and stays there: this is a thing that happened, not a state, and a pulse that
 * looped would be the app asking for attention about the user's own last tap.
 */
.filter-button[data-state="pulsed"]::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--accent);
  border-radius: var(--radius-full);
  animation: filter-button-pulse var(--duration-slow) var(--easing) forwards;
  pointer-events: none;
}

@keyframes filter-button-pulse {
  from {
    opacity: 0.7;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.7);
  }
}

@media (prefers-reduced-motion: reduce) {
  .filter-button__badge[data-state] {
    animation: none;
  }

  .filter-button[data-state="pulsed"]::after {
    display: none;
  }
}