/* Frontier article motion: warm metallic sweep, quiet entries, and a direct
   tile-to-player response. Layout and content remain usable without motion.js. */
:root {
  --cb-motion-ease: cubic-bezier(.2, .8, .2, 1);
  --cb-gold-low: #c9994a;
  --cb-gold-mid: #e0b45e;
  --cb-gold-light: #f2cf7a;
  --cb-gold-peak: #fff4d2;
  /* Scroll-linked motion read by motion.js. Plain numbers: % for the sheen,
     px for the parallax cap and hero lift, ms for the stagger and launch. */
  --cb-sheen-start: 145;
  --cb-sheen-travel: 210;
  --cb-sheen-trigger: .92;
  --cb-sheen-span: .78;
  --cb-parallax-rate: .065;
  --cb-parallax-cap: 32;
  --cb-parallax-cap-share: .035;
  --cb-parallax-scale: 1.08;
  --cb-hero-fade-span: .78;
  --cb-hero-fade-rate: 1.12;
  --cb-hero-lift: 20;
  --cb-reveal-duration: 620ms;
  --cb-reveal-distance: 14px;
  --cb-reveal-stagger: 45;
  --cb-reveal-stagger-max: 180;
  --cb-launch-hold: 620;
}

.cb-motion-ready [data-reveal].cb-reveal-armed {
  transition: opacity var(--cb-reveal-duration) var(--cb-motion-ease), translate var(--cb-reveal-duration) var(--cb-motion-ease);
  transition-delay: var(--cb-reveal-delay, 0ms);
}
.cb-motion-ready [data-reveal].cb-reveal-pending { opacity: 0; translate: 0 var(--cb-reveal-distance); }
.cb-motion-ready [data-reveal].cb-reveal-instant { transition: none; }

.sheen-text, .sheen-num { color: var(--cb-gold-light); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .sheen-text, .sheen-num {
    background-image: linear-gradient(100deg, var(--cb-gold-mid) 0%, var(--cb-gold-mid) 35%, var(--cb-gold-light) 44%, var(--cb-gold-peak) 50%, var(--cb-gold-light) 56%, var(--cb-gold-mid) 65%, var(--cb-gold-mid) 100%);
    background-size: 240% 100%;
    background-position: var(--cb-sheen-position, 145%) 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.overview-rule, [data-gold-rule] { position: relative; }
.overview-rule::before, [data-gold-rule]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  pointer-events: none;
  background-image: linear-gradient(100deg, rgba(201,153,74,.24) 0%, rgba(201,153,74,.24) 35%, rgba(235,186,92,.55) 44%, var(--cb-gold-peak) 50%, rgba(235,186,92,.55) 56%, rgba(201,153,74,.24) 65%, rgba(201,153,74,.24) 100%);
  background-size: 240% 100%;
  background-position: var(--cb-sheen-position, 145%) 0;
}
.hero-scroll-line {
  background-image: linear-gradient(180deg, rgba(201,153,74,.3), var(--cb-gold-light), var(--cb-gold-peak), rgba(201,153,74,.3));
  background-size: 100% 240%;
  background-position: 0 var(--cb-sheen-position, 145%);
}

.cb-motion-ready:not(.cb-motion-reduced) [data-parallax] {
  translate: 0 var(--cb-parallax-y, 0px);
  scale: var(--cb-parallax-scale);
  transform-origin: center;
}
.cb-motion-ready:not(.cb-motion-reduced) [data-hero-copy] {
  opacity: var(--cb-hero-opacity, 1);
  translate: 0 var(--cb-copy-y, 0px);
}
.cb-motion-ready [data-hero-copy]:focus-within { opacity: 1; translate: none; }

.ep-card, .featured-play, .featured-actions .btn {
  transition: transform 260ms var(--cb-motion-ease), border-color 260ms ease, box-shadow 260ms ease, background-color 260ms ease;
  -webkit-tap-highlight-color: rgba(242,207,122,.16);
}
.ep-thumb { overflow: hidden; }
.ep-thumb img, .link-card-art img {
  transition: transform 680ms var(--cb-motion-ease), filter 420ms ease;
  transform-origin: center;
}
.ep-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border: 1px solid rgba(242,207,122,.7);
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 25%, rgba(255,244,210,.13) 49%, transparent 68%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}
.ep-card:focus-visible, .featured-play:focus-visible, .player-close:focus-visible {
  outline: 2px solid var(--cb-gold-light);
  outline-offset: 5px;
}
.ep-card:focus-visible .ep-thumb::after { opacity: 1; }
.ep-card:focus-visible .ep-hover { opacity: 1; translate: none; }
@media (hover: hover) and (pointer: fine) {
  .ep-card:hover { transform: translateY(-4px); }
  .ep-card:hover .ep-thumb img { transform: scale(1.045); }
  .ep-card:hover .ep-thumb::after { opacity: 1; }
  .ep-card:hover .ep-hover { opacity: 1; translate: none; }
  .featured-play:hover { transform: scale(1.06); }
  .link-card[href]:hover .link-card-art img { transform: scale(1.035); }
}
.ep-card:active, .ep-card.cb-launching { transform: translateY(-1px) scale(.985); }
.featured-play:active, .featured-play.cb-launching, .featured-actions .btn:active { transform: scale(.96); }
.ep-card.cb-launching .ep-thumb::after { opacity: 1; }
.player-panel.is-entering { animation: cb-panel-enter 360ms var(--cb-motion-ease) both; }
@keyframes cb-panel-enter {
  from { opacity: .35; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}

/* The snapshot is decoration: real controls must receive input mid-morph.
   episodes.js owns assignment and cleanup of the episode-art name. */
::view-transition,
::view-transition-group(*),
::view-transition-image-pair(*),
::view-transition-old(*),
::view-transition-new(*) { pointer-events: none; }
::view-transition-group(episode-art) {
  animation-duration: 520ms;
  animation-timing-function: var(--cb-motion-ease);
}
::view-transition-image-pair(episode-art) { isolation: auto; overflow: hidden; }
::view-transition-old(episode-art), ::view-transition-new(episode-art) {
  height: 100%;
  object-fit: cover;
  mix-blend-mode: normal;
  animation-duration: 220ms;
  animation-timing-function: ease;
}
::view-transition-old(root), ::view-transition-new(root) { animation: none; }

.cb-motion-reduced [data-reveal], .cb-motion-reduced [data-parallax], .cb-motion-reduced [data-hero-copy] {
  opacity: 1 !important;
  translate: none !important;
  scale: none !important;
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  [data-reveal], [data-parallax], [data-hero-copy] {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
  }
  .sheen-text, .sheen-num {
    background-image: none;
    color: var(--cb-gold-light);
    -webkit-text-fill-color: currentColor;
  }
  .overview-rule::before, [data-gold-rule]::before { background: rgba(242,207,122,.5); }
  .hero-scroll-line { background: var(--cb-gold-light); }
  [data-reveal], .ep-card, .ep-thumb img, .ep-thumb::after, .ep-hover, .featured-play,
  .featured-actions .btn, .link-card-art img, .player-panel.is-entering {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    translate: none !important;
  }
  ::view-transition-group(episode-art), ::view-transition-old(episode-art), ::view-transition-new(episode-art) {
    animation-duration: 1ms !important;
  }
}
@media (forced-colors: active) {
  .sheen-text, .sheen-num { background: none; color: CanvasText; -webkit-text-fill-color: CanvasText; }
  .ep-card:focus-visible, .featured-play:focus-visible, .player-close:focus-visible { outline-color: Highlight; }
}