/* PublicDROP smoothness + performance layer: motion polish only, no colour or layout changes. */
html { -webkit-tap-highlight-color: transparent; }
a, button, [role="button"], .media-card, .filter-chip { touch-action: manipulation; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }

/* skip rendering work for the footer until it is near the screen */
.home-footer { content-visibility: auto; contain-intrinsic-size: auto 560px; }

/* hardware-accelerated, springy page + card entrances */
.page { animation: pd-page-in .42s cubic-bezier(.22,.8,.24,1) both; }
@keyframes pd-page-in { from { opacity: 0; transform: translate3d(0,10px,0); } to { opacity: 1; transform: none; } }
.media-rail .media-card, .catalog-grid .media-card { animation: pd-card-in .5s cubic-bezier(.22,.8,.24,1) both; }
.media-rail .media-card:nth-child(2), .catalog-grid .media-card:nth-child(2) { animation-delay: .04s; }
.media-rail .media-card:nth-child(3), .catalog-grid .media-card:nth-child(3) { animation-delay: .08s; }
.media-rail .media-card:nth-child(4), .catalog-grid .media-card:nth-child(4) { animation-delay: .12s; }
.media-rail .media-card:nth-child(5), .catalog-grid .media-card:nth-child(5) { animation-delay: .16s; }
.media-rail .media-card:nth-child(n+6), .catalog-grid .media-card:nth-child(n+6) { animation-delay: .2s; }
@keyframes pd-card-in { from { opacity: 0; transform: translate3d(0,14px,0) scale(.985); } to { opacity: 1; transform: none; } }

/* tactile press feedback */
button:not(:disabled):active, .pd-row:active, .pd-pop-item:active, .desktop-nav a:active, .mobile-nav a:active { transition-duration: .08s; }
.detail-play-button:active, .pd-primary:active, .pd-secondary:active, .filter-chip:active, .icon-button:active, .mobile-nav a:active { transform: scale(.96); }
.media-card:active { transform: scale(.985); }

/* gentler, consistent easing on interactive surfaces */
.filter-chip, .icon-button, .desktop-nav a, .mobile-nav a, .pd-row, .pd-pop-item, .pd-tab, .pd-primary, .pd-secondary, .home-footer-social {
  transition-timing-function: cubic-bezier(.22,.8,.24,1);
}

/* smooth theme switching (class added by perf.js for ~0.4s) */
html.pd-theme-anim *, html.pd-theme-anim *::before, html.pd-theme-anim *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, fill .35s ease, stroke .35s ease !important;
}

/* no wasted work in a background tab */
html.pd-hidden *, html.pd-hidden *::before, html.pd-hidden *::after { animation-play-state: paused !important; }

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

/* ===== high-refresh-rate pass: keep scrolling and animation on the GPU, cut the costly paints ===== */
/* dozens of tiny blurred badges (one per poster) were the biggest scroll cost; a solid tint looks the same */
.media-card .quality-badge, .media-card .favorite-button, .continue-remove, .hero-mobile-badge {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
}
.media-card .quality-badge, .media-card .favorite-button, .continue-remove { background-color: rgba(10,11,14,.72); }
/* promote the fixed bars to their own compositor layers */
.topbar, .mobile-nav { will-change: transform; backface-visibility: hidden; }
/* rails scroll independently of the rest of the page */
.media-rail, .cast-grid, .favorites-rail { contain: layout style; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
/* touch phones: drop the full-screen film-grain layer and use lighter blur on the two fixed bars */
@media (hover: none), (max-width: 840px) {
  body::before { display: none; }
  .topbar, .mobile-nav { -webkit-backdrop-filter: blur(10px) saturate(1.2) !important; backdrop-filter: blur(10px) saturate(1.2) !important; }
}
html[data-theme="light"] .media-card .quality-badge, html[data-theme="light"] .media-card .favorite-button { background-color: rgba(10,11,14,.7); }
/* animate only compositor-friendly properties on cards */
.media-card, .media-card .poster-shell { backface-visibility: hidden; }

/* ===== mobile + player-page performance ===== */
.watch-episode-number { content-visibility: auto; contain-intrinsic-size: auto 33px; }
.watch-episode-grid { contain: layout style; overscroll-behavior: contain; }
body:has(.watch-page) .page, body:has(.watch-page) .media-card { animation: none; }
body:has(.watch-page) .watch-shell { contain: layout style; }
@media (max-width: 840px) {
  .watch-navigator, .watch-server-switch { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none; }
  .watch-episode-number { transition: none; }
  .watch-episode-number:hover { transform: none; }
  .pd-player { contain: strict; }
  .pd-frame { will-change: auto; transition: none; }
}

/* ===== player notice ("Not playing yet?"): tidy, centred, evenly spaced buttons ===== */
.pd-player .pd-banner {
  left: 50%; right: auto; top: calc(62px + env(safe-area-inset-top, 0px)); transform: translateX(-50%);
  width: min(460px, calc(100% - 20px)); max-width: none; box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border-radius: 16px; line-height: 1.35; text-align: center;
  background: rgba(12,13,17,.92); border: 1px solid rgba(255,255,255,.12); box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.pd-player .pd-banner[hidden] { display: none; }
.pd-player .pd-banner > span { flex: 1 1 100%; font-size: 13.5px; font-weight: 600; color: #fff; }
.pd-player .pd-banner button { flex: 1 1 0; min-width: 0; min-height: 40px; padding: 0 10px; border-radius: 11px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.pd-player .pd-banner button:only-of-type { flex-basis: 50%; }

/* ===== detail page (phones): keep the Back button below the PublicDROP bar, never underneath it ===== */
@media (max-width: 520px) and (orientation: portrait) {
  .detail-page .detail-copy > .back-link {
    position: fixed; top: calc(76px + env(safe-area-inset-top, 0px)); left: 14px; right: auto; z-index: 900;
    min-height: 38px; margin: 0; transition: opacity .25s ease, transform .25s ease;
  }
  html.pd-scrolled .detail-page .detail-copy > .back-link { opacity: 0; pointer-events: none; transform: translateY(-6px); }
}
.pd-player .pd-banner button, .pd-player .pd-banner button.pd-primary { margin: 0 !important; height: 40px; box-shadow: none !important; align-self: stretch; display: inline-flex; align-items: center; justify-content: center; width: auto; }
.pd-player .pd-banner button.pd-primary { background: var(--pd-accent); color: #fff; }