/* =========================================================
   ANIME NEURIX · player-extras.css
   Styles for the premium OTT features added on top of the
   existing Watch Page (skip intro/outro, auto-next, resume
   prompt, theater mode, playback speed, PiP, cinematic
   backdrop). Loaded only by watch.html — additive only, does
   not modify style.css or watch.css.
   ========================================================= */

/* ---------- Feature 8: dynamic cinematic backdrop ---------- */
/* Fixed to the viewport, first child of <body>, z-index -1 — this sits
   behind the navbar, hero, player, meta, episode list, related rail, and
   footer, all of which have no opaque background of their own so the
   backdrop reads through everywhere except solid UI surfaces (video,
   glass cards, buttons). */
#pe-cinematic-backdrop {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  transition: opacity .4s ease;
}
#pe-cinematic-backdrop.pe-backdrop-paused { opacity: 0; } /* Req 7/8: hidden during real browser fullscreen */

.pe-backdrop-img {
  position: absolute;
  inset: -5%;
  width: 110%;
  height: 110%;
  background-size: cover;
  background-position: center;
  filter: blur(60px) brightness(.5) saturate(1.2);
  transform: scale(1.15);
  opacity: 0;
  transition: opacity 1.6s ease;
  animation: pe-cinematic-drift 50s ease-in-out infinite alternate;
  will-change: transform, filter, opacity;
}
/* Slow zoom + a slight brightness pulse together, like a Netflix/Crunchyroll
   title-hero background — never a static blurred image. */
@keyframes pe-cinematic-drift {
  0%   { transform: scale(1.15); filter: blur(60px) brightness(.46) saturate(1.2); }
  50%  { transform: scale(1.26); filter: blur(64px) brightness(.56) saturate(1.25); }
  100% { transform: scale(1.34); filter: blur(60px) brightness(.5) saturate(1.2); }
}

/* Vignette — darkens the corners/edges so the frame feels cinematic rather
   than just "a blurred photo behind the page". */
.pe-backdrop-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 65% at 50% 40%, transparent 40%, rgba(2,1,5,.55) 78%, rgba(2,1,5,.92) 100%);
}
/* Directional gradient so the top (nav) and bottom (page content edges)
   stay readable and the page background it blends into never shows a hard
   seam. */
.pe-backdrop-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5,3,9,.55) 0%, rgba(5,3,9,.25) 22%, rgba(5,3,9,.35) 60%, var(--black, #050309) 100%),
    linear-gradient(90deg, rgba(5,3,9,.4) 0%, transparent 20%, transparent 80%, rgba(5,3,9,.4) 100%);
}

@media (prefers-reduced-motion: reduce) {
  .pe-backdrop-img { animation: none; }
}

/* ---------- Feature 5/6/7: control cluster (speed, theater, PiP, fullscreen) ---------- */
.pe-controls-row {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 8px;
}
.watch-player-wrap:fullscreen .pe-controls-row,
.watch-player-wrap:-webkit-full-screen .pe-controls-row { right: 22px; bottom: 22px; }
.pe-controls-row .watch-fullscreen-btn { position: static; }
.pe-controls-row .watch-fullscreen-btn.is-active { background: rgba(139,42,240,.55); border-color: rgba(139,42,240,.7); }

.pe-speed-wrap { position: relative; }
.pe-speed-btn span { font-size: .72rem; font-weight: 800; letter-spacing: .01em; }
.pe-speed-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  right: 0;
  display: none;
  flex-direction: column;
  min-width: 76px;
  background: rgba(10,8,16,.94);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 6px;
  backdrop-filter: blur(8px);
}
.pe-speed-menu.open { display: flex; }
.pe-speed-menu button {
  background: none; border: none; color: #fff; text-align: left;
  padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: .85rem;
}
.pe-speed-menu button:hover { background: rgba(255,255,255,.1); }

/* ---------- Feature 2/9: skip intro / skip credits ---------- */
.pe-skip-btn {
  position: absolute;
  right: 14px;
  bottom: 70px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,.65);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: .85rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .15s ease, transform .15s ease;
}
.pe-skip-btn:hover { background: rgba(0,0,0,.85); transform: translateY(-2px); }

/* ---------- Feature 1: resume / start over prompt ---------- */
.pe-resume-prompt {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 56px;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.65) 100%);
}
.pe-resume-box {
  background: rgba(12,9,20,.92);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px;
  padding: 18px 22px;
  text-align: center;
  backdrop-filter: blur(10px);
}
.pe-resume-box p { margin: 0 0 12px; font-weight: 600; }
.pe-resume-actions { display: flex; gap: 10px; justify-content: center; }

/* ---------- Feature 3: auto-next-episode countdown ---------- */
.pe-autonext-overlay {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.78);
  backdrop-filter: blur(4px);
  padding: 16px;
}
.pe-autonext-box {
  display: flex;
  gap: 18px;
  align-items: center;
  background: rgba(15,11,24,.96);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 16px;
  padding: 20px;
  max-width: 460px;
}
.pe-autonext-thumb-wrap { width: 120px; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.pe-autonext-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; }
.pe-autonext-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.6); }
.pe-autonext-count { font-size: 2rem; font-weight: 800; color: var(--purple-2, #c084fc); margin: 2px 0 6px; line-height: 1; }
.pe-autonext-title { font-weight: 600; margin-bottom: 12px; font-size: .9rem; }
.pe-autonext-actions { display: flex; gap: 10px; }

/* ---------- Feature 6: theater mode ---------- */
body.pe-theater-mode .watch-player-section { padding-left: 0; padding-right: 0; transition: padding .4s ease; }
body.pe-theater-mode .watch-player-wrap { border-radius: 0; transition: border-radius .4s ease; }
body.pe-theater-mode .watch-meta-grid { opacity: .55; transition: opacity .4s ease; }

@media (max-width: 640px) {
  .pe-autonext-box { flex-direction: column; text-align: center; }
  .pe-skip-btn { bottom: 62px; padding: 8px 12px; font-size: .78rem; }
}