/* StatsNexus Motion System — presentation only */

:root {
  --snx-motion-hover: 150ms;
  --snx-motion-fade: 200ms;
  --snx-motion-tab: 220ms;
  --snx-motion-score: 250ms;
  --snx-motion-standings: 300ms;
  --snx-motion-skeleton: 250ms;
  --snx-motion-highlight: 1000ms;
  --snx-motion-expand: 260ms;
  --snx-motion-flyout: 160ms;
  --snx-motion-progress: 480ms;
  --snx-motion-timeline: 260ms;
  --snx-motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --snx-motion-spring: cubic-bezier(0.22, 1, 0.36, 1);
}
/* ── Live score pop ─────────────────────────────────────────────── */
.snx-score-pop,
.live-score-text.snx-score-pop,
.match-score.snx-score-pop,
.h2h-score-box.snx-score-pop,
.player-match-score.snx-score-pop,
.coach-score-pill.snx-score-pop,
.market-live-score.snx-score-pop,
.rndfx-live-score.snx-score-pop {
  animation: snx-score-pop var(--snx-motion-score) var(--snx-motion-ease);
  transform-origin: center center;
  display: inline-block;
}

@keyframes snx-score-pop {
  0% { transform: scale(1); }
  40% {
    transform: scale(1.08);
  }
  100% { transform: scale(1); }
}

[data-theme="light"] .snx-score-pop {
  animation-name: snx-score-pop-light;
}

@keyframes snx-score-pop-light {
  0% { transform: scale(1); }
  40% {
    transform: scale(1.08);
  }
  100% { transform: scale(1); }
}

/* ── Minute pulse ───────────────────────────────────────────────── */
.snx-minute-pulse,
.live-minute-badge.snx-minute-pulse,
.rndfx-live-min.snx-minute-pulse {
  animation: snx-minute-pulse var(--snx-motion-score) var(--snx-motion-ease);
  display: inline-block;
}

@keyframes snx-minute-pulse {
  0% { transform: scale(1); opacity: 1; }
  45% { transform: scale(1.08); opacity: 0.92; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── Standings FLIP + highlight ─────────────────────────────────── */
.standings-table tbody tr.snx-standings-moved,
[data-standings-tbody] tr.snx-standings-moved {
  animation: snx-standings-row-glow var(--snx-motion-highlight) ease;
  will-change: transform;
}

@keyframes snx-standings-row-glow {
  0% { background-color: rgba(34, 197, 94, 0.16); }
  70% { background-color: rgba(34, 197, 94, 0.06); }
  100% { background-color: transparent; }
}

[data-theme="light"] .standings-table tbody tr.snx-standings-moved,
[data-theme="light"] [data-standings-tbody] tr.snx-standings-moved {
  animation-name: snx-standings-row-glow-light;
}

@keyframes snx-standings-row-glow-light {
  0% { background-color: rgba(22, 163, 74, 0.12); }
  70% { background-color: rgba(22, 163, 74, 0.05); }
  100% { background-color: transparent; }
}

.standings-pos-delta.snx-delta-enter {
  animation: snx-delta-enter 280ms var(--snx-motion-ease);
  display: inline-block;
}

.standings-pos-delta.is-up.snx-delta-enter {
  animation-name: snx-delta-enter-up;
}

.standings-pos-delta.is-down.snx-delta-enter {
  animation-name: snx-delta-enter-down;
}

@keyframes snx-delta-enter-up {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes snx-delta-enter-down {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes snx-delta-enter {
  from { opacity: 0; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Skeleton → content ─────────────────────────────────────────── */
.snx-skel-host {
  transition: opacity var(--snx-motion-skeleton) ease;
}

.snx-skel-host.snx-skel-fading {
  opacity: 0;
}

.snx-skel-host.snx-skel-reveal {
  animation: snx-skel-reveal var(--snx-motion-skeleton) ease;
}

@keyframes snx-skel-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Soft shimmer for Top Insights placeholders */
.ti-trending-skeleton,
.ti-loading-card {
  position: relative;
  overflow: hidden;
}

.ti-trending-skeleton::after,
.ti-loading-card::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.06),
    transparent
  );
  animation: snx-skel-shimmer 1.4s ease infinite;
  pointer-events: none;
}

[data-theme="light"] .ti-trending-skeleton::after,
[data-theme="light"] .ti-loading-card::after {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(15, 23, 42, 0.06),
    transparent
  );
}

@keyframes snx-skel-shimmer {
  100% { transform: translateX(100%); }
}

/* ── Shared tabs ────────────────────────────────────────────────── */
.snx-tabs-enhanced {
  position: relative;
}

.snx-tab-ink {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 24px;
  border-radius: 2px;
  background: var(--match-green, var(--primary-green, #629670));
  transform: translateX(0);
  opacity: 0;
  transition:
    transform var(--snx-motion-tab) var(--snx-motion-ease),
    opacity var(--snx-motion-fade) ease;
  pointer-events: none;
  z-index: 2;
}

.snx-tab-ink.is-ready {
  opacity: 1;
}

/* Hide per-button underlines when ink is active to avoid double indicators */
.snx-tabs-enhanced.tab-nav--equal .tab-btn::after,
.snx-tabs-enhanced .tab-btn.active::after,
.snx-tab-root .tab-nav.snx-tabs-enhanced .tab-btn::after,
.nexus-tabs.snx-tabs-enhanced .nexus-tab[aria-selected="true"]::after {
  opacity: 0 !important;
}

.snx-tab-fade-out {
  opacity: 0 !important;
  transform: translateY(4px);
  transition: opacity 110ms ease, transform 110ms ease;
}

.snx-tab-fade-in {
  animation: snx-tab-panel-in var(--snx-motion-tab) var(--snx-motion-ease);
}

@keyframes snx-tab-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Reduced motion ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .snx-score-pop,
  .snx-minute-pulse,
  .snx-standings-moved,
  .snx-delta-enter,
  .snx-skel-reveal,
  .snx-tab-fade-in,
  .snx-tab-fade-out,
  .snx-timeline-enter,
  .snx-node-enter,
  .snx-progress-fill,
  .snx-progress-play,
  .ti-trending-skeleton::after,
  .ti-loading-card::after {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .snx-skel-host.snx-skel-fading {
    opacity: 1 !important;
  }

  .snx-tab-ink,
  .snx-hoverable,
  .competition-card,
  .match-row,
  .ti-fixture-card,
  .ti-trending-card,
  .player-match-card,
  .nexus-match-card,
  .mobile-card {
    transition: none !important;
  }

  .snx-progress-fill {
    transform: none !important;
  }

  .standings-mode-btn .standings-live-dot,
  .live-pill-dot,
  .rndfx-live-dot {
    animation: none !important;
  }

  .accordion-content,
  .mobile-card-details,
  .match-card .enhanced-table,
  .sidebar-all-leagues .accordion-body,
  .ti-support-row {
    transition: none !important;
  }

  .primary-nav__panel,
  #header-settings-panel {
    animation: none !important;
    transition: none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════
   Phase 2 — Interaction & micro-animations
   ══════════════════════════════════════════════════════════════════ */

/* ── Expand / collapse ──────────────────────────────────────────── */
.accordion-content {
  display: block !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height var(--snx-motion-expand) var(--snx-motion-ease),
    opacity var(--snx-motion-fade) ease,
    padding var(--snx-motion-expand) ease;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.accordion-item.active .accordion-content {
  max-height: 2400px;
  opacity: 1;
  padding-top: 4px !important;
  padding-bottom: 8px !important;
}

.mobile-card-details {
  display: block !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  visibility: hidden;
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top-color: transparent !important;
  transition:
    max-height var(--snx-motion-expand) var(--snx-motion-ease),
    opacity var(--snx-motion-fade) ease,
    margin var(--snx-motion-expand) ease,
    padding var(--snx-motion-expand) ease,
    visibility 0s linear var(--snx-motion-expand);
}

.mobile-card.open .mobile-card-details {
  max-height: 2000px;
  opacity: 1;
  visibility: visible;
  margin-top: 8px !important;
  padding-top: 8px !important;
  transition:
    max-height var(--snx-motion-expand) var(--snx-motion-ease),
    opacity var(--snx-motion-fade) ease,
    margin var(--snx-motion-expand) ease,
    padding var(--snx-motion-expand) ease,
    visibility 0s linear 0s;
}

.match-card .enhanced-table {
  display: grid;
  grid-template-rows: 1fr;
  opacity: 1;
  overflow: hidden;
  transition:
    grid-template-rows var(--snx-motion-expand) var(--snx-motion-ease),
    opacity var(--snx-motion-fade) ease;
}

.match-card .enhanced-table > * {
  min-height: 0;
  overflow: hidden;
}

.match-card.collapsed .enhanced-table {
  display: grid !important;
  grid-template-rows: 0fr;
  opacity: 0;
}

.ti-support-row {
  display: grid !important;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 8px;
  opacity: 1;
  max-height: 96px;
  overflow: hidden;
  transition:
    opacity var(--snx-motion-fade) ease,
    max-height var(--snx-motion-expand) var(--snx-motion-ease),
    margin var(--snx-motion-expand) ease,
    padding var(--snx-motion-expand) ease;
}

.ti-support-row.is-collapsed {
  opacity: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none;
}

/* Transfers: soft fade when section expands */
tbody.transfers-window:not(.is-collapsed) .transfers-data-row {
  animation: snx-node-in var(--snx-motion-timeline) var(--snx-motion-ease) both;
}

tbody.transfers-window.is-collapsed .transfers-data-row {
  animation: none;
}

.sidebar-all-leagues__panel {
  display: block !important;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition:
    max-height var(--snx-motion-expand) var(--snx-motion-ease),
    opacity var(--snx-motion-fade) ease,
    padding var(--snx-motion-expand) ease;
  padding-top: 0 !important;
}

.sidebar-all-leagues.is-open > .sidebar-all-leagues__panel {
  max-height: 3200px;
  opacity: 1;
  padding-top: 8px !important;
}

/* ── Interactive hover (desktop fine pointer only) ──────────────── */
@media (hover: hover) and (pointer: fine) {
  .competition-card,
  a.competition-card,
  .match-row,
  .ti-fixture-card,
  .ti-trending-card,
  .player-match-card,
  a.player-match-card,
  .nexus-match-card,
  a.nexus-match-card,
  .mobile-card,
  .coach-match-card,
  a[data-nexus-comp-card],
  .snx-hoverable {
    transition:
      transform var(--snx-motion-hover) var(--snx-motion-ease),
      box-shadow var(--snx-motion-hover) ease,
      border-color var(--snx-motion-hover) ease,
      background-color var(--snx-motion-hover) ease;
  }

  .competition-card:hover,
  a.competition-card:hover,
  .ti-fixture-card:hover,
  .ti-trending-card:hover,
  .player-match-card:hover,
  a.player-match-card:hover,
  .nexus-match-card:hover,
  a.nexus-match-card:hover,
  a[data-nexus-comp-card]:hover,
  .snx-hoverable:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.22);
  }

  .match-row:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
  }

  [data-theme="light"] .competition-card:hover,
  [data-theme="light"] .ti-fixture-card:hover,
  [data-theme="light"] .ti-trending-card:hover,
  [data-theme="light"] .player-match-card:hover,
  [data-theme="light"] .nexus-match-card:hover,
  [data-theme="light"] .snx-hoverable:hover {
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1);
  }
}

/* ── Live timeline enter ────────────────────────────────────────── */
.timeline-event.snx-timeline-enter {
  animation: snx-timeline-in var(--snx-motion-timeline) var(--snx-motion-ease) both;
}

@keyframes snx-timeline-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.snx-node-enter {
  animation: snx-node-in var(--snx-motion-timeline) var(--snx-motion-ease) both;
}

@keyframes snx-node-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Progress fills (one-shot scaleX) ────────────────────────────── */
.snx-progress-fill {
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

.stats-compare-away.snx-progress-fill,
.stat-comparison-bar-fill.away.snx-progress-fill,
.stats-compare-seg--away.snx-progress-fill {
  transform-origin: right center;
}

.snx-progress-fill.snx-progress-play {
  transform: scaleX(1);
  transition: transform var(--snx-motion-progress) var(--snx-motion-ease);
}

/* ── Modal & bottom sheet polish ────────────────────────────────── */
.predictions-sheet__backdrop,
.markets-sheet__backdrop,
.stats-sheet__backdrop {
  transition:
    opacity var(--snx-motion-fade) ease,
    backdrop-filter 280ms ease,
    -webkit-backdrop-filter 280ms ease;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
}

.predictions-sheet.is-open .predictions-sheet__backdrop,
.markets-sheet.is-open .markets-sheet__backdrop,
.stats-sheet.is-open .stats-sheet__backdrop {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.predictions-sheet__panel,
.markets-sheet__panel,
.stats-sheet__panel {
  transition: transform 300ms var(--snx-motion-spring) !important;
}

.tooltip-overlay-backdrop {
  transition: opacity var(--snx-motion-fade) ease;
}

#header-settings-panel {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity var(--snx-motion-flyout) ease,
    transform var(--snx-motion-flyout) var(--snx-motion-ease);
  pointer-events: none;
}

#header-settings-panel.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Interactive buttons (press) ────────────────────────────────── */
@media (hover: hover) and (pointer: fine) {
  .favourite-toggle,
  .follow-match-toggle,
  .follow-match-btn,
  .market-filters__day-btn,
  .ti-filter-chip,
  .predictions-sheet__link,
  .markets-sheet__row,
  .stats-sheet__row,
  .standings-mode-btn,
  .nexus-tab,
  button.snx-pressable {
    transition:
      transform 120ms var(--snx-motion-ease),
      color var(--snx-motion-hover) ease,
      background-color var(--snx-motion-hover) ease,
      border-color var(--snx-motion-hover) ease,
      box-shadow var(--snx-motion-hover) ease;
  }

  .favourite-toggle:active,
  .follow-match-toggle:active,
  .follow-match-btn:active,
  .market-filters__day-btn:active,
  .ti-filter-chip:active,
  .predictions-sheet__link:active,
  .markets-sheet__row:active,
  .stats-sheet__row:active,
  .standings-mode-btn:active,
  .nexus-tab:active,
  button.snx-pressable:active {
    transform: scale(0.96);
  }
}

/* ── Navigation flyouts ─────────────────────────────────────────── */
@media (min-width: 1134px) {
  .primary-nav__panel {
    opacity: 0;
    transform: translateX(-50%) translateY(6px);
    transition:
      opacity var(--snx-motion-flyout) ease,
      transform var(--snx-motion-flyout) var(--snx-motion-ease),
      box-shadow var(--snx-motion-flyout) ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  }

  .primary-nav__panel.snx-flyout-enter,
  .primary-nav__panel:not([hidden]):not(.snx-flyout-leave) {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.38);
  }

  .primary-nav__panel.snx-flyout-leave {
    opacity: 0;
    transform: translateX(-50%) translateY(4px);
  }

  /* Allow leave animation while still painted */
  .primary-nav__panel[hidden].snx-flyout-leave {
    display: block !important;
  }
}