/* Light motion layer. Only transform/opacity are animated (no layout work),
   and everything is switched off for users who ask for reduced motion. */
:root { --ease-out: cubic-bezier(.22, 1, .36, 1); }

/* State markup is shared by every sport and summary, independent of scores. */
:root { --live-halo: color-mix(in srgb, var(--win) 35%, transparent); --live-tint: color-mix(in srgb, var(--win) 8%, transparent); }
.live-status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.live-dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--win); opacity: 1; animation: hs-live-breathe 1.8s ease-in-out infinite; }
.card.is-live, .match.is-live { border-color: var(--win); }
@keyframes hs-live-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: .45; }
}

/* Hover / press feedback on cards (pointer devices only, so touch never sticks). */
@media (hover: hover) and (pointer: fine) {
  .match, .focus-card, .card, .series { transition: transform .2s var(--ease-out), border-color .2s, box-shadow .2s; }
  .match:hover, .focus-card:hover, .card:hover, .series:hover {
    transform: translateY(-2px); border-color: rgba(246, 185, 40, .45);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  }
}
.match:active, .focus-card:active, .card:active { transform: scale(.99); }

/* Stationary hit areas prevent hover enter/leave loops at the card's lower edge.
   Home cards are immediately visible, including when changing sport tabs. */
.home-matches .match, .home-focus .focus-card { transform: none; transition: opacity 160ms var(--ease-out); }
.home-matches .match:hover, .home-matches .match:active,
.home-focus .focus-card:hover, .home-focus .focus-card:active { transform: none; box-shadow: none; }
.home-focus .focus-card.is-live, .home-focus .focus-card.is-live:hover,
.home-matches .match.is-live, .home-matches .match.is-live:hover { border-color: var(--win); }

/* Scroll reveal: motion.js only tags items that start BELOW the first screen,
   so above-the-fold content (and LCP) is never hidden or delayed. */
.hs-reveal { opacity: 0; transform: translateY(14px); }
.hs-reveal.hs-in { opacity: 1; transform: none; transition: opacity .45s var(--ease-out), transform .45s var(--ease-out); }

/* Freshly switched tab panels fade in. */
.hs-fade { animation: hs-fade-in .25s var(--ease-out); }
@keyframes hs-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none; opacity: 1; box-shadow: none; }
  .match, .focus-card, .card, .series { transition: none !important; }
  .match:hover, .focus-card:hover, .card:hover, .series:hover, .match:active, .focus-card:active, .card:active { transform: none; }
  .hs-reveal, .hs-reveal.hs-in { opacity: 1; transform: none; transition: none; }
  .hs-fade { animation: none; }
}