/* SF6 LIVE shared motion system. Keep interaction feedback consistent across views. */
:root {
  --motion-fast: 120ms;
  --motion-ui: 160ms;
  --motion-page: 300ms;
  --motion-ease: cubic-bezier(.2, .8, .2, 1);
  --motion-card-outline: rgba(235, 0, 101, .72);
}

@keyframes sf-page-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes sf-favorite-pop {
  0% { transform: scale(1); }
  42% { transform: scale(1.28) rotate(-7deg); }
  70% { transform: scale(.93); }
  100% { transform: scale(1); }
}

@keyframes sf-refresh-spin {
  to { transform: rotate(360deg); }
}

@keyframes sf-menu-enter {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.motion-page-enter {
  animation: sf-page-enter var(--motion-page) var(--motion-ease) both;
}

/* Shared press feedback for controls. */
:where(
  .action-button,
  .hero-primary,
  .hero-secondary,
  .chip,
  .load-more,
  .text-button,
  .favorite,
  .refresh-button,
  .discovery-tab,
  .utility-menu button,
  .featured-live-next,
  #policy-consent-accept
) {
  transition:
    transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-ui) ease,
    background-color var(--motion-ui) ease,
    border-color var(--motion-ui) ease,
    color var(--motion-ui) ease,
    opacity var(--motion-ui) ease;
}

@media (hover: hover) and (pointer: fine) {
  :where(
    .action-button,
    .hero-primary,
    .hero-secondary,
    .chip,
    .load-more,
    .text-button,
    .favorite,
    .refresh-button,
    .discovery-tab,
    .utility-menu button,
    .featured-live-next,
    #policy-consent-accept
  ):not(:disabled):hover {
    transform: translateY(-2px);
  }
}

:where(
  .action-button,
  .hero-primary,
  .hero-secondary,
  .chip,
  .load-more,
  .text-button,
  .favorite,
  .refresh-button,
  .discovery-tab,
  .utility-menu button,
  .featured-live-next,
  #policy-consent-accept
):not(:disabled):active {
  transform: translateY(1px) scale(.97);
  transition-duration: 70ms;
}

/* Active navigation underline grows from the center. */
.sidebar .nav-item {
  position: relative;
  border-bottom-color: transparent;
}

.sidebar .nav-item.active {
  border-bottom-color: transparent;
}

.sidebar .nav-item::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 0;
  height: 3px;
  border-radius: 999px;
  background: var(--live);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 180ms var(--motion-ease);
  pointer-events: none;
}

.sidebar .nav-item.active::after {
  transform: scaleX(1);
}

/*
 * Shared content-card behavior.
 * Every card uses the same lift, pink outline and media zoom regardless of page.
 * Outline is used instead of changing border width, so layout never shifts.
 */
.stream-card,
.upcoming-card,
.streamer-card,
.normal-video-card,
.character-card,
.featured-live-card,
.explore-card {
  position: relative;
  outline: 2px solid transparent;
  outline-offset: 1px;
  transition:
    transform var(--motion-ui) var(--motion-ease),
    outline-color var(--motion-ui) ease,
    border-color var(--motion-ui) ease,
    box-shadow var(--motion-ui) ease;
}

/* Home LIVE cards were intentionally square before; round them to match the common hover outline. */
.home-live-rail .stream-card,
.normal-video-card {
  border-radius: 10px;
}

:where(.thumb, .upcoming-thumb, .channel-avatar-wrap, .normal-video-media, .featured-live-media, .schedule-thumb) {
  overflow: hidden;
}

.stream-card .video-image,
.upcoming-card .video-image,
.streamer-card .channel-icon,
.normal-video-card .normal-video-media img,
.featured-live-card .featured-live-thumb,
.character-card .character-art,
.schedule-item .schedule-thumb img {
  transition: transform 240ms var(--motion-ease);
  transform-origin: center;
}

@media (hover: hover) and (pointer: fine) {
  .stream-card:hover,
  .upcoming-card:hover,
  .streamer-card:hover,
  .normal-video-card:hover,
  .character-card:hover,
  .featured-live-card:hover,
  .explore-card:hover {
    transform: translateY(-3px);
    outline-color: var(--motion-card-outline);
    border-color: var(--live);
  }

  .stream-card:hover .video-image,
  .upcoming-card:hover .video-image,
  .streamer-card:hover .channel-icon,
  .normal-video-card:hover .normal-video-media img,
  .featured-live-card:hover .featured-live-thumb,
  .character-card:hover .character-art,
  .schedule-item:hover .schedule-thumb img {
    transform: scale(1.025);
  }
}

/* Schedule entries are grouped rows, not free-standing cards. Keep the same media response without lifting the row out of its group. */
.schedule-item {
  transition: background-color var(--motion-ui) ease;
}

@media (hover: hover) and (pointer: fine) {
  .schedule-item:hover {
    background: #fff5f9;
  }
}

/* Home character shortcuts are image choices rather than cards, but retain the same quick response. */
.home-character-art {
  transition:
    transform var(--motion-ui) var(--motion-ease),
    outline-color var(--motion-ui) ease;
}

@media (hover: hover) and (pointer: fine) {
  .home-character:hover .home-character-art {
    transform: translateY(-4px) scale(1.035);
  }
}

.home-character:active .home-character-art,
.character-card:active .character-art {
  transform: scale(.95);
}

.favorite.motion-favorite-pop {
  animation: sf-favorite-pop 260ms cubic-bezier(.2, .9, .3, 1.35);
}

.refresh-button.is-loading {
  animation: sf-refresh-spin .72s linear infinite;
  transform-origin: center;
}

.utility-menu[open] > div {
  animation: sf-menu-enter 140ms var(--motion-ease) both;
  transform-origin: top right;
}

/* Respect the user's OS accessibility preference. */
@media (prefers-reduced-motion: reduce) {
  .motion-page-enter,
  .favorite.motion-favorite-pop,
  .refresh-button.is-loading,
  .utility-menu[open] > div {
    animation: none !important;
  }

  :where(
    .action-button,
    .hero-primary,
    .hero-secondary,
    .chip,
    .load-more,
    .text-button,
    .favorite,
    .refresh-button,
    .discovery-tab,
    .utility-menu button,
    .featured-live-next,
    #policy-consent-accept,
    .sidebar .nav-item::after,
    .stream-card,
    .upcoming-card,
    .streamer-card,
    .normal-video-card,
    .character-card,
    .featured-live-card,
    .explore-card,
    .home-character-art,
    .video-image,
    .channel-icon,
    .normal-video-media img,
    .featured-live-thumb,
    .character-art,
    .schedule-item,
    .schedule-thumb img
  ) {
    transition-duration: .01ms !important;
  }
}