/* Shared media loading / CLS / micro-transitions (home, player, team, heave, about). */

:root {
  --ml-ease: ease;
  --ml-dur: 180ms;
  --ml-skeleton-a: #e8eef4;
  --ml-skeleton-b: #f1f5f9;
  --ml-navy: #0f172a;
}

@keyframes media-skeleton-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Soft slate shimmer — apply to reserved boxes while media loads */
.media-skeleton,
.is-loading.media-fade,
.media-slot.is-loading,
.hn-heave-hero__video-wrap:not(.has-frame):not(.is-playing),
.heave-clip__wrap:not(.heave-clip-loaded):not(.heave-reel-loaded):not(.player-heave-mix-loaded),
.player-heave-mix-video-wrap:not(.player-heave-mix-loaded):not(.heave-reel-loaded) {
  background-color: var(--ml-skeleton-a);
  background-image: linear-gradient(
    110deg,
    var(--ml-skeleton-a) 0%,
    var(--ml-skeleton-b) 40%,
    var(--ml-skeleton-a) 80%
  );
  background-size: 200% 100%;
  animation: media-skeleton-shimmer 1.35s linear infinite;
}

.hn-heave-hero__video-wrap:not(.has-frame):not(.is-playing) {
  background-color: var(--ml-navy);
  background-image: linear-gradient(
    110deg,
    #0f172a 0%,
    #1e293b 45%,
    #0f172a 90%
  );
}

/* Progressive fade for headshots / logos.
   Default visible (no JS = still readable). Only .is-loading starts dimmed. */
.media-fade {
  opacity: 1;
  transition: opacity var(--ml-dur) var(--ml-ease);
  background: var(--ml-skeleton-a);
}

.media-fade.is-loading:not(.is-ready):not(.is-broken) {
  opacity: 0;
  /* If media-loading.js never runs, reveal after 2.5s so images are not stuck. */
  animation: media-reveal-fallback 0s 2.5s forwards;
}

@keyframes media-reveal-fallback {
  to { opacity: 1; }
}

.media-fade.is-ready,
.media-fade.is-broken {
  opacity: 1;
  animation: none;
  background: transparent;
}

@media (scripting: none) {
  .media-fade,
  .media-fade.is-loading {
    opacity: 1 !important;
    animation: none !important;
  }
}

.media-fade.is-broken {
  background: var(--ml-skeleton-a);
  object-fit: contain;
}

/* Circular headshot slots keep size even when src fails */
.media-avatar,
.identity-avatar.media-fade,
.hn-heave-hero__avatar.media-fade,
.hn-heave-hero__title-avatar.media-fade,
.heave-hero__avatar.media-fade {
  display: block;
  flex-shrink: 0;
  border-radius: 999px;
  object-fit: cover;
  background: var(--ml-skeleton-a);
}

.media-fade.is-broken.media-avatar,
.identity-avatar.media-fade.is-broken,
.hn-heave-hero__avatar.media-fade.is-broken,
.hn-heave-hero__title-avatar.media-fade.is-broken,
.heave-hero__avatar.media-fade.is-broken {
  /* Keep soft placeholder circle — do not collapse */
  visibility: visible !important;
  display: block !important;
  background: linear-gradient(145deg, #e2e8f0, #f8fafc);
  border: 1px solid #cbd5e1;
}

/* Reserved aspect boxes (CLS) */
.media-slot--video,
.hn-heave-hero__video-wrap,
.hn-feat__media,
.heave-clip__wrap,
.streamable-deferred {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.media-slot--court,
.hn-heave-hero__heat,
.heave-court-sub .heave-court,
.heave-court-wrap {
  min-height: 120px;
  width: 100%;
}

.hn-heave-hero__heat {
  aspect-ratio: 2.4 / 1;
  min-height: 0;
  contain: layout style;
}

.hn-heave-hero__heat .heave-court,
.heave-court {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
}

/* Season chart reserved plot area */
.hn-chart {
  min-height: 160px;
  contain: layout style;
}

.hn-chart__svg {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 900px) {
  .hn-chart { min-height: 190px; }
}

/* Video: fade in once first frame is painted */
.hn-heave-hero__video-wrap video,
.heave-clip__wrap video,
.player-heave-mix-video-wrap video {
  opacity: 0;
  transition: opacity var(--ml-dur) var(--ml-ease);
}

.hn-heave-hero__video-wrap.has-frame video,
.hn-heave-hero__video-wrap.is-playing video,
.heave-clip__wrap.heave-clip-loaded video,
.heave-clip__wrap.heave-reel-loaded video,
.player-heave-mix-video-wrap.player-heave-mix-loaded video,
.player-heave-mix-video-wrap.heave-reel-loaded video {
  opacity: 1;
  animation: none;
}

/* Micro-transitions: cards, rows, explore, CTAs */
.hn-night,
.hn-board,
.hn-feat,
.hn-heave-hero,
.nh-card,
.home-latest-card {
  transition: box-shadow var(--ml-dur) var(--ml-ease), border-color var(--ml-dur) var(--ml-ease);
}

.hn-board__row {
  transition: background-color var(--ml-dur) var(--ml-ease);
}

.hn-board__row:hover,
.hn-board__row:focus-within {
  background-color: #f8fafc;
}

.hn-explore__link {
  transition: background-color var(--ml-dur) var(--ml-ease), color var(--ml-dur) var(--ml-ease);
}

.hn-explore__link:hover {
  background-color: #f8fafc;
}

.hn-explore__link:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.hn-heave-hero__btn,
.hn-heave-hero__link,
a.hn-heave-hero__btn {
  transition: background-color var(--ml-dur) var(--ml-ease),
    border-color var(--ml-dur) var(--ml-ease),
    color var(--ml-dur) var(--ml-ease),
    opacity var(--ml-dur) var(--ml-ease),
    filter var(--ml-dur) var(--ml-ease);
}

.hn-heave-hero__btn:hover,
.hn-heave-hero__btn:focus-visible {
  filter: brightness(1.04);
}

.hn-heave-hero__btn:focus-visible,
.hn-board__full:focus-visible,
.hn-heave-hero__play:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Identity / about / profile soft hovers */
.identity-chip {
  transition: background-color var(--ml-dur) var(--ml-ease), border-color var(--ml-dur) var(--ml-ease);
}

.recent-heaves-table tbody tr {
  transition: background-color var(--ml-dur) var(--ml-ease);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .media-fade {
    opacity: 1;
  }

  .hn-heave-hero__video-wrap video,
  .heave-clip__wrap video,
  .player-heave-mix-video-wrap video {
    opacity: 1;
  }

  .media-skeleton,
  .is-loading.media-fade,
  .media-slot.is-loading,
  .hn-heave-hero__video-wrap:not(.has-frame):not(.is-playing),
  .heave-clip__wrap:not(.heave-clip-loaded):not(.heave-reel-loaded):not(.player-heave-mix-loaded),
  .player-heave-mix-video-wrap:not(.player-heave-mix-loaded):not(.heave-reel-loaded) {
    animation: none !important;
    background-image: none !important;
    background-color: var(--ml-skeleton-a);
  }
}