/* ==========================================================================
   Motion & interaction layer (pairs with js/motion.js and js/discovery.js)
   Principles: short, eased, interruptible; hover effects only on devices that
   can hover; everything collapses to static under prefers-reduced-motion.
   ========================================================================== */
:root {
  --motion-fast: 160ms;
  --motion-base: 280ms;
  --motion-slow: 520ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --hover-intent: 180ms;
}

/* --------------------------------------------------------------------------
   1. Spotlight: auto-rotation progress, slow backdrop drift, crossfades
   -------------------------------------------------------------------------- */
.discovery-backdrop {
  animation: motion-drift 14s ease-in-out infinite alternate;
}
.discovery-pagination button { position: relative; overflow: hidden; }
.discovery-pagination button::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  height: 2px;
  width: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}
.discovery-pagination button[aria-current="true"] { border-top-color: #ffffff30; }
.discovery-pagination button[aria-current="true"]::after {
  animation: discovery-progress 8s linear forwards;
}
/* Pause rotation while the user is reading or interacting */
.discovery-spotlight:hover .discovery-pagination button::after,
.discovery-spotlight:has(:focus-visible) .discovery-pagination button::after,
.discovery-spotlight.is-paused .discovery-pagination button::after,
.discovery-spotlight:hover .discovery-backdrop,
.discovery-spotlight.is-paused .discovery-backdrop {
  animation-play-state: paused;
}

.discovery-actions button {
  transition: transform var(--motion-fast) var(--ease-out-expo),
              background-color var(--motion-fast) ease,
              box-shadow var(--motion-base) ease;
}
.discovery-actions button:active { transform: scale(0.96); }
.discovery-primary:hover { box-shadow: 0 10px 30px -10px rgba(255, 255, 255, 0.45); }
.discovery-poster {
  transition: transform var(--motion-slow) var(--ease-out-expo), box-shadow var(--motion-slow) ease;
}
.discovery-spotlight:hover .discovery-poster {
  transform: perspective(900px) rotateY(-6deg) translateY(-4px);
  box-shadow: 30px 30px 60px -20px #000c;
}

@keyframes motion-drift {
  from { transform: scale(1.08) translate3d(0, 0, 0); }
  to   { transform: scale(1.18) translate3d(-2%, -1.5%, 0); }
}
@keyframes discovery-progress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   2. Cards: hover intent, focus dimming, revealed actions
   -------------------------------------------------------------------------- */
.card-play-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.15) 55%, transparent 100%);
  align-items: center;
  transition: opacity var(--motion-base) ease;
}
.card-play-btn {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.95);
  color: #111;
  box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.6);
  transform: scale(0.7);
  opacity: 0;
  transition: transform var(--motion-base) var(--ease-spring), opacity var(--motion-fast) ease;
}
.card-play-btn svg { fill: currentColor; }
.media-card:hover .card-play-btn,
.media-card:focus-within .card-play-btn { transform: scale(1); opacity: 1; }
.card-play-btn:hover { background: #fff; transform: scale(1.08) !important; }

/* Secondary card actions stay quiet until the card is engaged */
.card-meta-right > button {
  transition: opacity var(--motion-fast) ease, transform var(--motion-fast) var(--ease-out-expo), color var(--motion-fast) ease;
}

@media (hover: hover) and (pointer: fine) {
  .card-meta-right > button { opacity: 0; transform: translateY(3px); }
  .card-meta-right > .btn-card-fav.active { opacity: 1; transform: none; }
  .media-card:hover .card-meta-right > button,
  .media-card:focus-within .card-meta-right > button { opacity: 1; transform: none; }
  .media-card:hover .card-meta-right > button:nth-child(2) { transition-delay: 30ms; }
  .media-card:hover .card-meta-right > button:nth-child(3) { transition-delay: 60ms; }

  /* Hover intent: the expansion starts after a short pause, so sweeping the
     mouse across a row does not make every card jump. Leaving is immediate. */
  .home-carousel-grid > .media-card,
  .media-grid > .media-card {
    transition: transform var(--motion-base) var(--ease-out-expo),
                box-shadow var(--motion-base) ease,
                opacity var(--motion-base) ease;
  }
  .home-carousel-grid > .media-card:hover,
  .media-grid > .media-card:hover {
    transform: translateY(-6px) scale(1.04);
    box-shadow: 0 22px 40px -18px rgba(0, 0, 0, 0.85);
    z-index: 6;
    transition-delay: var(--hover-intent);
  }
  #home-view-container .home-carousel-grid > :is(.media-card, .yt-home-card, .podcast-home-card):hover {
    transform: translateY(-6px) scale(1.04);
    transition-delay: var(--hover-intent);
  }

  /* Neighbours recede so the hovered title is the clear focus */
  .home-carousel-grid:hover > :is(.media-card, .yt-home-card, .yt-card, .podcast-home-card):not(:hover),
  .media-grid:hover > .media-card:not(:hover) {
    opacity: 0.55;
    transition-delay: var(--hover-intent);
  }
}

/* Poster loading: skeleton shimmer behind, image fades in once decoded */
.card-poster:has(> img:not(.is-loaded)) {
  background: linear-gradient(100deg, #1c1c1c 30%, #262626 50%, #1c1c1c 70%) 0 0 / 300% 100%;
  animation: motion-shimmer 1.4s ease-in-out 8;
}
.card-poster > img { transition: opacity var(--motion-slow) ease, transform 0.5s var(--ease-out); }
.motion-ready .card-poster > img:not(.is-loaded) {
  opacity: 0;
  /* Safety net: never leave a poster invisible if the load event was missed */
  animation: motion-force-visible 0s 2.5s forwards;
}
@keyframes motion-shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }
@keyframes motion-force-visible { to { opacity: 1; } }

/* Rails: fade the edges that have more content behind them */
#home-view-container .home-carousel-grid[data-edge="start"] {
  -webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
          mask-image: linear-gradient(to right, #000 88%, transparent);
}
#home-view-container .home-carousel-grid[data-edge="middle"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 6%, #000 90%, transparent);
}
#home-view-container .home-carousel-grid[data-edge="end"] {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%);
          mask-image: linear-gradient(to right, transparent, #000 6%);
}
.discovery-rail-controls button {
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease,
              transform var(--motion-fast) var(--ease-spring), opacity var(--motion-base) ease;
}

/* Section headers: "see all" link reveals an arrow nudge */
.btn-home-see-all { transition: color var(--motion-fast) ease, transform var(--motion-base) var(--ease-out-expo); }
.btn-home-see-all:hover { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   3. Page-level motion: header elevation, scroll reveal, view transitions
   -------------------------------------------------------------------------- */
.top-header {
  transition: box-shadow var(--motion-base) ease, background-color var(--motion-base) ease;
}
body.is-content-scrolled .top-header {
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.9);
}

.motion-ready body:not(.is-tv-mode) .home-section:not(.is-revealed) {
  opacity: 0;
  transform: translateY(24px);
  animation: motion-force-visible-section 0s 3s forwards;
}
.motion-ready body:not(.is-tv-mode) .home-section {
  transition: opacity var(--motion-slow) ease, transform var(--motion-slow) var(--ease-out-expo);
}
@keyframes motion-force-visible-section { to { opacity: 1; transform: none; } }

.content-view.view-enter > :not(.hero-player-banner) {
  animation: motion-view-enter 260ms ease-out both;
}
@keyframes motion-view-enter { from { opacity: 0; } to { opacity: 1; } }

/* Sidebar items: active bar slides in */
.type-menu li.active::before,
.cat-pill.active::before {
  animation: motion-bar-in var(--motion-base) var(--ease-out-expo) both;
  transform-origin: center;
}
@keyframes motion-bar-in { from { transform: scaleY(0); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }

/* --------------------------------------------------------------------------
   4. Reduced motion: keep the layout, drop the movement
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .discovery-backdrop,
  .discovery-pagination button::after,
  .card-poster,
  .content-view.view-enter > * { animation: none !important; }
  .card-play-btn { transform: none; }
  .home-carousel-grid > .media-card:hover,
  .media-grid > .media-card:hover { transform: none; }
}