/* Shared NextUp motion tokens live in tokens.css. Geometry and focus rings stay immediate. */
/* Only explicit focus-scroll requests animate. Restoration/cancellation stays immediate. */
html.tv,
.tv body,
.tv .game-row,
.tv .hf-row,
.tv .sheet-panel,
.tv .hf-detail-scroll,
.tv #game-page,
.tv #game-stats-pane,
.tv .gd-table-wrap {
  scroll-behavior: auto;
  overflow-anchor: none;
}
/* Keep the first-card inset, but clip earlier cards before the sidebar gutter.
   The small padding preserves the complete blue focus ring without a mask layer. */
.tv .game-row,
.tv .hf-row {
  margin-left: -0.75rem;
  padding-left: 0.75rem;
  scroll-padding-left: 0.75rem;
}
button {
  transition: opacity var(--motion-press) var(--motion-ease);
  -webkit-tap-highlight-color: transparent;
}
button:active:not(:disabled) {
  opacity: 0.82;
}
input {
  transition: border-color var(--motion-focus) var(--motion-ease);
}
input:focus {
  border-color: var(--volt-400);
}
.motion-outgoing,
.motion-closing {
  pointer-events: none !important;
}
.feature-art.motion-outgoing {
  z-index: 0;
}
.feature-art.motion-outgoing .matchup-art {
  pointer-events: none;
}
/* The thumb lands with a slight overshoot. cubic-bezier overshoot is Chromium 85 safe. */
.switch:after {
  transition: transform var(--motion-enter) var(--motion-ease-pop);
}
.switch {
  transition: background-color var(--motion-press) var(--motion-ease);
}
.team-choice > span {
  display: inline-block;
  transition: color var(--motion-press) var(--motion-ease);
}
.league-tabs button {
  position: relative;
}
.league-tabs .league-ink {
  position: absolute;
  height: 2px;
  bottom: 0;
  left: 22%;
  right: 22%;
  border-radius: 2px;
  background: var(--volt-300);
  opacity: 0;
  pointer-events: none;
}
.league-tabs button.selected {
  box-shadow: none;
}
.tv .league-tabs button:focus {
  box-shadow: 0 0 0 0.28rem var(--volt-400);
}
.league-tabs button.selected .league-ink {
  opacity: 1;
}
.feature-dot {
  transition:
    transform var(--motion-focus) var(--motion-ease),
    opacity var(--motion-focus) var(--motion-ease),
    background-color var(--motion-focus) var(--motion-ease);
}
/* Animate artwork inside a fixed control, never the remote's focus target. */
.game-card .crest,
.station-mark img,
.team-choice img,
.option-logo img,
.league-tabs button > img {
  transform: scale(1);
  transition: transform var(--motion-focus) var(--motion-ease);
  transform-origin: 50% 55%;
}
.game-card:focus .crest {
  transform: scale(1.065);
}
.station:focus .station-mark img,
.team-choice:focus img,
.option:focus .option-logo img,
.league-tabs button:focus > img {
  transform: scale(1.08);
}
#player-ui {
  transition: opacity var(--motion-exit) var(--motion-ease);
}
.game-stats-open #player-ui {
  opacity: 0;
  pointer-events: none;
}
.game-stats-open #player-ui > * {
  pointer-events: none;
}
.ls-switch .lp-thumb {
  transition: transform var(--motion-statsSwitch) cubic-bezier(0.3, 1.16, 0.52, 1);
}
@media (prefers-reduced-motion: reduce) {
  .ls-switch .lp-thumb {
    transition: none;
  }
}
/* NextUp loader. One two-chevron sequence for startup, dialogs and inline
   waits: the first chevron arrives, the second follows, both hold as the
   mark, then both leave forward. Transform and opacity only, on small boxes.
   The whole loader stays invisible for --motion-loader-delay, so a quick
   response swaps it out before anything is seen. */
.nu-loader {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  color: var(--text-2);
  animation: nu-appear var(--motion-loader-appear) var(--motion-ease) var(--motion-loader-delay)
    both;
}
.nu-loader-mark {
  position: relative;
  flex: none;
  width: 1.5em;
  height: 1.5em;
  margin: -0.25em -0.1em;
  color: var(--loader-ink);
}
.nu-loader-mark .nu-chev {
  transform: translate3d(-18%, 0, 0);
  opacity: 0;
}
.nu-loader-mark .nu-chev-a {
  animation: nu-chev-a var(--motion-loader) linear infinite both;
}
.nu-loader-mark .nu-chev-b {
  animation: nu-chev-b var(--motion-loader) linear infinite both;
}
.nu-loader-label {
  font-weight: var(--fw-meta);
}
/* Dialog and section waits: centred chevrons over a short label. */
.nu-loader-dialog {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.1rem;
  min-height: 9rem;
  text-align: center;
}
.nu-loader-dialog .nu-loader-mark {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0;
}
.nu-loader-dialog .nu-loader-label {
  font-size: 0.9rem;
}
/* Startup: the brand tile with white chevrons. */
.nu-loader-full .nu-loader-mark {
  width: var(--mark, 5.5rem);
  height: var(--mark, 5.5rem);
  margin: 0;
  color: #fff;
}
.nu-loader-full .nu-tile {
  animation: nu-tile var(--motion-loader) linear infinite both;
}
@keyframes nu-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes nu-appear {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* One cycle: A springs in (0-22%), B follows (10-32%), both hold as the mark,
   A exits forward (56-76%), B exits (66-94%). The turnover blank is about 8%. */
@keyframes nu-chev-a {
  0% {
    opacity: 0;
    transform: translate3d(-18%, 0, 0);
    animation-timing-function: var(--motion-ease-pop);
  }
  22% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation-timing-function: linear;
  }
  56% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45);
  }
  76%,
  100% {
    opacity: 0;
    transform: translate3d(18%, 0, 0);
  }
}
@keyframes nu-chev-b {
  0%,
  10% {
    opacity: 0;
    transform: translate3d(-18%, 0, 0);
    animation-timing-function: var(--motion-ease-pop);
  }
  32% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation-timing-function: linear;
  }
  66% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    animation-timing-function: cubic-bezier(0.55, 0, 0.8, 0.45);
  }
  94%,
  100% {
    opacity: 0;
    transform: translate3d(18%, 0, 0);
  }
}
/* The tile gives a small recoil as the second chevron lands. */
@keyframes nu-tile {
  0%,
  31% {
    transform: scale(1);
    animation-timing-function: cubic-bezier(0.3, 0, 0.6, 1);
  }
  36% {
    transform: scale(0.965);
    animation-timing-function: var(--motion-ease-pop);
  }
  50%,
  100% {
    transform: scale(1);
  }
}
.tv button,
.tv input {
  transition: opacity var(--motion-press) var(--motion-ease);
}
@media (min-width: 960px) {
  #nav,
  #nav button {
    transition: none;
  }
  #nav .nav-label {
    transform: translateX(-5px);
    transition:
      transform var(--motion-enter) var(--motion-ease),
      opacity var(--motion-enter) var(--motion-ease);
  }
  #nav:focus-within .nav-label {
    transform: translateX(0);
  }
  .tv #nav .nav-label {
    transform: translateX(-8px);
    transition:
      transform var(--motion-enter) var(--motion-ease),
      opacity var(--motion-enter) var(--motion-ease);
  }
  .tv #nav:focus-within .nav-label {
    transform: translateX(0);
  }
  .rail-brand .nu-wordmark {
    opacity: 0;
    transform: translateX(-8px);
    transition:
      transform var(--motion-enter) var(--motion-ease),
      opacity var(--motion-enter) var(--motion-ease);
  }
  #nav:focus-within .rail-brand .nu-wordmark {
    opacity: 1;
    transform: translateX(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .game-card .crest,
  .station-mark img,
  .team-choice img,
  .option-logo img,
  .league-tabs button > img {
    transform: none !important;
  }
  /* Reduced motion: the loader still waits out the delay, then appears in one
     step. Nothing moves; the second chevron only breathes in opacity so a wait
     still reads as activity. */
  .nu-loader,
  .boot-screen > .nu-wordmark {
    animation: nu-reveal 1ms linear var(--motion-loader-delay) both !important;
  }
  .nu-loader-mark .nu-chev {
    opacity: 1;
    transform: none;
  }
  .nu-loader-mark .nu-chev-b {
    animation: nu-breathe var(--motion-loader) ease-in-out infinite both !important;
  }
}
@keyframes nu-breathe {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

/* Pause even the reduced-motion opacity signal while the page is hidden. */
.motion-paused .nu-loader,
.motion-paused .nu-loader * {
  animation-play-state: paused !important;
}