/* ==========================================================================
   FirasMovies — cinematic hero, row system, skeletons, guest gate.
   Loaded after styles.css, which owns the design tokens this file uses.

   The old landing led with a paragraph about the product. A streaming site
   should lead with something you can press play on, so the hero is now real
   artwork from a real title and the copy sits on top of it.
   ========================================================================== */

/* ---- Hero -------------------------------------------------------------- */
.hero-cinema {
  position: relative;
  min-height: min(88vh, 760px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
@media (max-width: 720px) {
  .hero-cinema { min-height: 76vh; }
}

/* Each featured title's backdrop, cross-faded behind the copy. */
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 18%;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s var(--ease), transform 7s linear;
  z-index: -2;
}
.hero-slide.on { opacity: 1; transform: scale(1); }

/* Two gradients: one seats the text, one blends into the page below. */
.hero-cinema::before,
.hero-cinema::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
.hero-cinema::before {
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(10, 10, 15, 0.55) 45%, rgba(10, 10, 15, 0.25) 100%),
    linear-gradient(to right, rgba(10, 10, 15, 0.92) 0%, rgba(10, 10, 15, 0.55) 45%, rgba(10, 10, 15, 0.1) 100%);
}
html[data-theme="light"] .hero-cinema::before {
  background:
    linear-gradient(to top, var(--bg) 2%, rgba(10, 10, 15, 0.5) 50%, rgba(10, 10, 15, 0.3) 100%),
    linear-gradient(to right, rgba(10, 10, 15, 0.85) 0%, rgba(10, 10, 15, 0.5) 45%, rgba(10, 10, 15, 0.15) 100%);
}
.hero-cinema::after {
  background: radial-gradient(120% 80% at 70% 40%, transparent 40%, rgba(0, 0, 0, 0.35) 100%);
}

.hero-body {
  position: relative;
  width: 100%;
  padding: 0 0 clamp(38px, 7vw, 76px);
}
.hero-inner { max-width: 620px; }

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(229, 9, 20, 0.92);
  padding: 6px 12px;
  border-radius: 99px;
  margin-bottom: 18px;
}
.hero-title {
  font-size: clamp(2.1rem, 6.2vw, 4.1rem);
  line-height: 1.02;
  font-weight: 800;
  letter-spacing: -0.035em;
  color: #fff;
  margin-bottom: 14px;
  text-shadow: 0 2px 30px rgba(0, 0, 0, 0.5);
}
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.82);
  margin-bottom: 14px;
}
.hero-meta .pill {
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 6px;
  padding: 1px 7px;
  font-size: 0.74rem;
  letter-spacing: 0.04em;
}
.hero-meta .score { color: #ffd15c; font-weight: 700; }
.hero-desc {
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(0.94rem, 1.5vw, 1.05rem);
  line-height: 1.6;
  margin-bottom: 26px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-actions .btn { padding: 13px 26px; font-size: 0.97rem; }
.btn-glass {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.btn-glass:hover { background: rgba(255, 255, 255, 0.24); }

.hero-dots {
  position: absolute;
  right: 20px;
  bottom: clamp(38px, 7vw, 76px);
  display: flex;
  gap: 8px;
  z-index: 2;
}
.hero-dots button {
  width: 26px;
  height: 3px;
  border: none;
  padding: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.32);
  cursor: pointer;
  transition: background 0.3s var(--ease), width 0.3s var(--ease);
}
.hero-dots button.on { background: var(--accent); width: 40px; }
@media (max-width: 720px) { .hero-dots { display: none; } }

/* ---- Row system -------------------------------------------------------- */
.row { margin: 0 0 clamp(26px, 4vw, 40px); position: relative; }
.row-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.row-head h2 {
  font-size: clamp(1.05rem, 2vw, 1.32rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.row-sub {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0;
  margin-top: 2px;
}
.row-link {
  font-size: 0.84rem;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.2s var(--ease);
}
.row-link:hover { color: var(--accent-hover); }

.row-viewport { position: relative; }
.row-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: clamp(132px, 30vw, 178px);
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-left: 20px;
  padding: 4px 20px 12px;
  margin: -4px -20px 0;
  scrollbar-width: none;
}
.row-track::-webkit-scrollbar { display: none; }
.row-track > * { scroll-snap-align: start; }

/* Edge fades signal there is more to scroll without needing a scrollbar. */
.row-viewport::before,
.row-viewport::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 12px;
  width: 44px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  z-index: 1;
}
.row-viewport::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.row-viewport::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.row-viewport.can-left::before { opacity: 1; }
.row-viewport.can-right::after { opacity: 1; }

.row-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-60%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(10, 10, 15, 0.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--text);
  font-size: 1.1rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.2s var(--ease), background 0.2s var(--ease);
  z-index: 2;
}
html[data-theme="light"] .row-nav { background: rgba(255, 255, 255, 0.9); }
.row-nav.prev { left: -6px; }
.row-nav.next { right: -6px; }
.row-viewport:hover .row-nav.show { opacity: 1; }
.row-nav:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.row-nav:focus-visible { opacity: 1; }
/* Touch devices scroll with a finger; arrows would only cover posters. */
@media (hover: none) { .row-nav { display: none; } }

/* ---- Poster card ------------------------------------------------------- */
.pcard { display: block; position: relative; }
.pcard-art {
  position: relative;
  aspect-ratio: 2 / 3;
  border-radius: 10px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--border);
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease), border-color 0.28s var(--ease);
}
.pcard-art img { width: 100%; height: 100%; object-fit: cover; }
.pcard-art .ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: 1.8rem;
  color: var(--muted);
}
@media (hover: hover) {
  .pcard:hover .pcard-art {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45);
    border-color: rgba(229, 9, 20, 0.5);
  }
}
.pcard:focus-visible .pcard-art { border-color: var(--accent); }

.pcard-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin-top: 9px;
  line-height: 1.32;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pcard-meta { font-size: 0.74rem; color: var(--muted); margin-top: 2px; }

.pcard-badge {
  position: absolute;
  top: 7px;
  left: 7px;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  backdrop-filter: blur(4px);
}
.pcard-badge.new { background: var(--accent); }
.pcard-score {
  position: absolute;
  top: 7px;
  right: 7px;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 3px 6px;
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.72);
  color: #ffd15c;
  backdrop-filter: blur(4px);
}
/* Continue Watching progress sits on the artwork itself. */
.pcard-prog {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.22);
}
.pcard-prog span { display: block; height: 100%; background: var(--accent); }

/* ---- Skeletons --------------------------------------------------------- */
/* Skeletons mirror the shape of what is loading, so the layout never jumps
   and the wait reads shorter than a spinner would. */
@keyframes tk-shimmer {
  0% { background-position: -420px 0; }
  100% { background-position: 420px 0; }
}
.sk {
  background: linear-gradient(90deg, var(--card) 25%, var(--border) 50%, var(--card) 75%);
  background-size: 420px 100%;
  animation: tk-shimmer 1.3s linear infinite;
  border-radius: 8px;
}
.sk-art { aspect-ratio: 2 / 3; border-radius: 10px; }
.sk-line { height: 10px; margin-top: 9px; }
.sk-line.short { width: 55%; }

@media (prefers-reduced-motion: reduce) {
  .sk { animation: none; }
  .hero-slide { transition: opacity 0.3s linear; transform: none; }
  .pcard-art { transition: none; }
}

/* ---- Stat strip -------------------------------------------------------- */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.stat-cell { background: var(--bg-soft); padding: 18px 16px; text-align: center; }
.stat-cell b {
  display: block;
  font-size: clamp(1.3rem, 3vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
}
.stat-cell span { font-size: 0.76rem; color: var(--muted); }

/* ---- Guest playback limit --------------------------------------------- */
.gate-bg {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: rgba(6, 6, 12, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: grid;
  place-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.28s var(--ease);
}
.gate-bg.open { opacity: 1; }
.gate-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: clamp(26px, 5vw, 40px);
  max-width: 430px;
  width: 100%;
  text-align: center;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.6);
  transform: translateY(14px) scale(0.98);
  transition: transform 0.28s var(--ease);
}
.gate-bg.open .gate-card { transform: none; }
.gate-card h2 {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}
.gate-card p {
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.6;
  margin-bottom: 20px;
}
.gate-benefits {
  text-align: left;
  display: grid;
  gap: 9px;
  margin: 0 0 22px;
  font-size: 0.88rem;
}
.gate-benefits li { list-style: none; display: flex; gap: 9px; align-items: flex-start; }
.gate-benefits li::before { content: '✓'; color: #4ade80; font-weight: 800; flex-shrink: 0; }
.gate-note { font-size: 0.78rem; color: var(--muted); margin-top: 14px; }

/* Countdown shown inside the player before a guest hits the limit. */
.gate-toast {
  position: absolute;
  right: 14px;
  bottom: 14px;
  background: rgba(6, 6, 12, 0.88);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 13px;
  font-size: 0.8rem;
  z-index: 5;
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  gap: 9px;
}
.gate-toast a { color: var(--accent-hover); font-weight: 700; }

/* ---- Empty states ------------------------------------------------------ */
/* An empty state should sell the feature that fills it, not just report
   that nothing is there. */
.empty-state {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: clamp(28px, 5vw, 44px) 22px;
  text-align: center;
}
.empty-state .ico { font-size: 2rem; margin-bottom: 10px; }
.empty-state h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
.empty-state p {
  color: var(--muted);
  font-size: 0.88rem;
  max-width: 380px;
  margin: 0 auto 16px;
  line-height: 1.6;
}

/* ---- Inline spinner (indeterminate actions only) ----------------------- */
@keyframes tk-spin { to { transform: rotate(360deg); } }
.spin {
  display: inline-block;
  width: 15px;
  height: 15px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: tk-spin 0.7s linear infinite;
  vertical-align: -3px;
}

/* ==========================================================================
   Motion polish layer (2026 redesign).
   Extends the existing keyframes in styles.css. Everything here is opt-in via
   class or scoped to interactive elements, so it never fights existing rules.
   All of it collapses under prefers-reduced-motion at the bottom.
   ========================================================================== */

/* ---- Buttons: lift, shine sweep, and a real press ---- */
.btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.18s var(--ease), box-shadow 0.25s var(--ease), background 0.2s var(--ease), filter 0.2s var(--ease);
}
.btn::after {
  /* a light sweep that crosses on hover */
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: skewX(-18deg);
  transition: left 0.55s var(--ease);
  pointer-events: none;
}
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(229, 9, 20, 0.28); }
  .btn:hover::after { left: 130%; }
  .btn-ghost:hover, .btn-glass:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25); }
}
.btn:active { transform: translateY(0) scale(0.97); }

/* ---- Nav links: an underline that grows from the centre ---- */
.nav-primary, .nav-links a {
  position: relative;
}
.nav-primary::after, .nav-links a::after {
  content: '';
  position: absolute;
  left: 50%; right: 50%; bottom: -4px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transition: left 0.22s var(--ease), right 0.22s var(--ease);
}
@media (hover: hover) {
  .nav-primary:hover::after, .nav-links a:hover::after { left: 0; right: 0; }
}
.nav-primary.active::after, .nav-links a.active::after { left: 0; right: 0; }

/* ---- Scroll reveal: driven by app.js adding .in ---- */
.reveal-up { opacity: 0; transform: translateY(22px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); will-change: opacity, transform; }
.reveal-up.in { opacity: 1; transform: none; }

/* Rows stagger their own entrance a touch after the header. */
.row.reveal-up { transition-delay: 0.04s; }

/* ---- Poster cards: staggered pop-in within a freshly filled row ---- */
@keyframes tk-card-rise {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.row-track.animate > * {
  animation: tk-card-rise 0.5s var(--ease) both;
}
.row-track.animate > *:nth-child(1) { animation-delay: 0.02s; }
.row-track.animate > *:nth-child(2) { animation-delay: 0.06s; }
.row-track.animate > *:nth-child(3) { animation-delay: 0.10s; }
.row-track.animate > *:nth-child(4) { animation-delay: 0.14s; }
.row-track.animate > *:nth-child(5) { animation-delay: 0.18s; }
.row-track.animate > *:nth-child(6) { animation-delay: 0.22s; }
.row-track.animate > *:nth-child(7) { animation-delay: 0.26s; }
.row-track.animate > *:nth-child(n+8) { animation-delay: 0.30s; }

/* ---- Poster shine on hover (over the existing lift) ---- */
.pcard-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.14) 50%, transparent 60%);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease);
  pointer-events: none;
}
@media (hover: hover) {
  .pcard:hover .pcard-art::after { transform: translateX(100%); }
}

/* ---- Stat cells: gentle rise and count-up feel ---- */
.stat-cell { transition: background 0.25s var(--ease); }
.stat-cell b { display: block; animation: tk-fade-up 0.5s var(--ease) both; }
@media (hover: hover) {
  .stat-cell:hover { background: var(--card); }
}

/* ---- Hero copy: each line rises in sequence ---- */
.hero-eyebrow { animation: tk-fade-up 0.5s var(--ease) 0.05s both; }
.hero-title { animation: tk-fade-up 0.6s var(--ease) 0.12s both; }
.hero-meta { animation: tk-fade-up 0.6s var(--ease) 0.20s both; }
.hero-desc { animation: tk-fade-up 0.6s var(--ease) 0.28s both; }
.hero-actions { animation: tk-fade-up 0.6s var(--ease) 0.36s both; }

/* ---- Chips / badges: springy hover ---- */
@media (hover: hover) {
  .chip:hover { transform: translateY(-1px); border-color: var(--accent); }
}
.chip { transition: transform 0.16s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); }

/* ---- Row arrows: scale in on hover ---- */
.row-nav { transition: opacity 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease); }
.row-nav:active { transform: translateY(-60%) scale(0.9); }

/* ---- Empty-state icon: a slow float ---- */
.empty-state .ico { display: inline-block; animation: tk-float 3.5s ease-in-out infinite; }
@keyframes tk-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* ---- Toast: slide up + fade (if the app's toast uses .tk-toast) ---- */
@keyframes tk-toast-in { from { opacity: 0; transform: translateY(16px) scale(0.96); } to { opacity: 1; transform: none; } }

/* ---- Gate card benefits: stagger the ticks ---- */
.gate-benefits li { animation: tk-fade-up 0.4s var(--ease) both; }
.gate-benefits li:nth-child(1) { animation-delay: 0.06s; }
.gate-benefits li:nth-child(2) { animation-delay: 0.12s; }
.gate-benefits li:nth-child(3) { animation-delay: 0.18s; }
.gate-benefits li:nth-child(4) { animation-delay: 0.24s; }

/* ---- Focus: a soft expanding ring instead of a hard outline ---- */
.btn:focus-visible, .pcard:focus-visible, .chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 0 1px var(--accent);
}

/* ---- Respect the user's motion preference ---- */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn::after, .pcard-art::after, .row-nav,
  .reveal-up, .row-track.animate > *,
  .hero-eyebrow, .hero-title, .hero-meta, .hero-desc, .hero-actions,
  .empty-state .ico, .stat-cell b, .gate-benefits li {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ---- Binge autoplay: next-episode countdown card ---------------------- */
.binge-card {
  position: absolute;
  right: 16px; bottom: 16px;
  width: min(340px, 78vw);
  background: rgba(8, 8, 14, 0.94);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  z-index: 6;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: tk-fade-up 0.35s var(--ease) both;
}
.binge-card img { width: 58px; height: 84px; object-fit: cover; border-radius: 7px; flex-shrink: 0; }
.binge-card .bc-body { min-width: 0; flex: 1; }
.binge-card .bc-label { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.binge-card .bc-title { font-size: 0.92rem; font-weight: 700; margin: 2px 0 8px; line-height: 1.25; }
.binge-card .bc-actions { display: flex; gap: 8px; }
.binge-card .bc-actions .btn { padding: 7px 14px; font-size: 0.82rem; }
/* the countdown ring around the Play button */
.binge-ring {
  --p: 0;
  width: 40px; height: 40px; border-radius: 50%;
  flex-shrink: 0;
  background: conic-gradient(var(--accent) calc(var(--p) * 1%), var(--border) 0);
  display: grid; place-items: center;
  transition: none;
}
.binge-ring span { width: 32px; height: 32px; border-radius: 50%; background: var(--card); display: grid; place-items: center; font-weight: 800; font-size: 0.85rem; }
@media (prefers-reduced-motion: reduce) { .binge-card { animation: none; } }

/* ==========================================================================
   Hero enhancements — cinematic two-column layout with a floating trending
   list on the right (the signature element from the reference designs).
   ========================================================================== */
.hero-body .container {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 64px);
  /* Wider than the site's default 1200px so the featured copy and the
     trending list each sit close to their side of the screen, the way the
     reference designs do, instead of floating in from a narrow column. */
  max-width: min(1560px, 94vw);
}
.hero-inner { flex: 1 1 auto; }

.hero-list {
  /* Anchored to the far right of the viewport (hero-body is full width and
     position:relative), not tucked inside the centred content column, so it
     hugs the screen edge the way the reference designs do. */
  position: absolute;
  right: clamp(24px, 3.2vw, 64px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  flex: 0 0 auto;
  width: 356px;
  max-height: 72vh;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: linear-gradient(180deg, rgba(16, 16, 24, 0.86), rgba(8, 8, 14, 0.92));
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  padding: 10px;
  animation: tk-fade-up 0.6s var(--ease) 0.3s both;
}
.hero-list-head {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  padding: 8px 10px 10px;
}
.hero-li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 11px;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
  position: relative;
}
.hero-li:hover, .hero-li.active { background: rgba(255, 255, 255, 0.09); }
.hero-li.active::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 3px;
  border-radius: 3px;
  background: var(--brand-grad, var(--accent));
}
.hero-li img {
  width: 52px; height: 74px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: var(--card);
}
.hero-li .hl-body { min-width: 0; flex: 1; }
.hero-li .hl-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hero-li .hl-meta {
  font-size: 0.74rem;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-li .hl-score {
  color: #ffd15c;
  font-weight: 700;
}
/* Below 1080px the floating list would crowd the copy: hide it, the rows
   below already surface trending. */
@media (max-width: 1080px) { .hero-list { display: none; } }

/* ==========================================================================
   Poster hover — a play button and a bottom scrim, so a card feels like a
   thing you press, not just an image.
   ========================================================================== */
.pcard-art .pcard-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity 0.25s var(--ease);
  z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 55%);
}
.pcard-art .pcard-play span {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(229, 9, 20, 0.92);
  color: #fff;
  font-size: 1rem;
  padding-left: 3px;
  box-shadow: 0 6px 20px rgba(229, 9, 20, 0.5);
  transform: scale(0.7);
  transition: transform 0.28s var(--ease);
}
@media (hover: hover) {
  .pcard:hover .pcard-art .pcard-play { opacity: 1; }
  .pcard:hover .pcard-art .pcard-play span { transform: scale(1); }
}

/* Slightly larger, softer poster radius to match the reference designs. */
.pcard-art { border-radius: 14px; }
.pcard-title { font-weight: 700; }