/* WatchVIM 2026 frontend redesign
   Visual presentation only. Subscription, authentication, entitlement,
   checkout and playback logic continue to run from the existing app. */
:root {
  --wv-bg: #030303;
  --wv-surface: #0d0d0f;
  --wv-surface-2: #161619;
  --wv-text: #ffffff;
  --wv-muted: rgba(255,255,255,.66);
  --wv-accent: #ec0a58;
  --wv-accent-2: #ff2f78;
  --wv-border: rgba(255,255,255,.11);
  --wv-shadow: 0 28px 80px rgba(0,0,0,.62);
}

html { background: var(--wv-bg); }
body.wv-redesign {
  margin: 0;
  color: var(--wv-text);
  background:
    radial-gradient(circle at 84% 2%, rgba(236,10,88,.12), transparent 30rem),
    linear-gradient(180deg, #070708 0%, var(--wv-bg) 55%, #010101 100%);
}
body.wv-redesign * { box-sizing: border-box; }
body.wv-redesign button,
body.wv-redesign a { -webkit-tap-highlight-color: transparent; }
body.wv-redesign button:focus-visible,
body.wv-redesign a:focus-visible {
  outline: 3px solid rgba(236,10,88,.75);
  outline-offset: 3px;
}
body.wv-redesign .bg-watchRed,
body.wv-redesign [class*="bg-red-600"],
body.wv-redesign [class*="bg-red-700"] {
  background: linear-gradient(135deg, var(--wv-accent-2), var(--wv-accent)) !important;
  box-shadow: 0 12px 32px rgba(236,10,88,.28);
}

/* =========================================================
   SHARED NAVIGATION
   ========================================================= */
body.wv-redesign .wv-premium-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
  background: linear-gradient(180deg, rgba(2,2,3,.98), rgba(2,2,3,.82)) !important;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
}
body.wv-redesign .wv-premium-nav {
  width: 100%;
  max-width: none !important;
  min-height: 72px;
  padding: 14px clamp(18px, 4vw, 72px) !important;
}
body.wv-redesign .wv-premium-header #appLogo { height: 40px !important; }
body.wv-redesign .wv-primary-nav {
  gap: clamp(4px, 1vw, 18px) !important;
  align-items: stretch;
}
body.wv-redesign .wv-primary-nav .wv-nav-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-radius: 0 !important;
  padding: 8px 7px !important;
  color: rgba(255,255,255,.72) !important;
  background: transparent !important;
  font-weight: 650;
}
body.wv-redesign .wv-primary-nav .wv-nav-link:hover { color: #fff !important; }
body.wv-redesign .wv-primary-nav .wv-nav-link[class*="bg-white/15"] {
  color: #fff !important;
}
body.wv-redesign .wv-primary-nav .wv-nav-link[class*="bg-white/15"]::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: -14px;
  height: 3px;
  border-radius: 999px;
  background: var(--wv-accent);
}

/* =========================================================
   PUBLIC LANDING PAGE
   ========================================================= */
body.wv-route-landing #app {
  min-height: 100vh;
  display: block;
  background: #020203;
}
body.wv-route-landing .wv-landing-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 120;
  min-height: 78px;
  padding: 14px clamp(18px, 4.5vw, 80px);
  display: grid;
  grid-template-columns: minmax(170px, 1fr) auto minmax(120px, 1fr);
  align-items: center;
  gap: 22px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(180deg, rgba(0,0,0,.94), rgba(0,0,0,.3));
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
body.wv-route-landing .wv-landing-brand img { height: 42px; width: auto; display: block; }
body.wv-route-landing .wv-landing-nav nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2.2vw, 34px);
}
body.wv-route-landing .wv-landing-nav nav a {
  color: rgba(255,255,255,.76);
  text-decoration: none;
  font-size: 14px;
  font-weight: 650;
}
body.wv-route-landing .wv-landing-nav nav a:hover { color: #fff; }
body.wv-route-landing .wv-landing-signin {
  justify-self: end;
  padding: 11px 18px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  color: #fff;
  text-decoration: none;
  font-weight: 750;
  background: rgba(0,0,0,.34);
}
body.wv-route-landing .wv-landing {
  position: relative;
  min-height: 100vh !important;
  padding: 0 !important;
  display: block !important;
  overflow: hidden;
  background: #020203 !important;
}
body.wv-route-landing .wv-landing-grid {
  position: relative;
  width: 100%;
  max-width: none !important;
  min-height: 100vh;
  margin: 0 !important;
  padding: 132px clamp(22px, 7vw, 118px) 70px !important;
  display: flex !important;
  align-items: center;
  isolation: isolate;
}
body.wv-route-landing .wv-landing-media {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
}
body.wv-route-landing .wv-landing-player {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: #000;
}
body.wv-route-landing .wv-landing-player mux-player,
body.wv-route-landing .wv-landing-player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .72;
  --media-object-fit: cover;
}
body.wv-route-landing .wv-landing::before,
body.wv-route-landing .wv-landing::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
body.wv-route-landing .wv-landing::before {
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(0,0,0,.98) 0%, rgba(0,0,0,.88) 34%, rgba(0,0,0,.25) 70%, rgba(0,0,0,.52) 100%),
    linear-gradient(0deg, #020203 0%, transparent 42%);
}
body.wv-route-landing .wv-landing::after {
  z-index: -1;
  background: radial-gradient(circle at 20% 42%, rgba(236,10,88,.17), transparent 28rem);
}
body.wv-route-landing .wv-landing-copy {
  width: min(760px, 64vw);
  text-align: left !important;
  position: relative;
  z-index: 2;
}
body.wv-route-landing .wv-landing-copy > .inline-flex:first-child { display: none !important; }
body.wv-route-landing .wv-landing-copy h1 {
  margin: 0;
  max-width: 850px;
  font-size: clamp(52px, 6.6vw, 108px) !important;
  line-height: .88 !important;
  letter-spacing: -.065em;
  text-transform: uppercase;
  text-wrap: balance;
  text-shadow: 0 12px 38px rgba(0,0,0,.72);
}
body.wv-route-landing .wv-landing-copy h1 span {
  display: inline-block;
  color: var(--wv-accent) !important;
}
body.wv-route-landing .wv-landing-copy p {
  max-width: 650px !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  color: rgba(255,255,255,.78) !important;
  font-size: clamp(16px, 1.25vw, 20px) !important;
  line-height: 1.55;
}
body.wv-route-landing .wv-landing-copy .rounded-2xl,
body.wv-route-landing .wv-landing-copy .rounded-full { border-radius: 8px !important; }
body.wv-route-landing .wv-landing-copy .wv-landing-primary {
  order: -1;
  min-height: 52px;
  padding: 0 28px !important;
  border: 0 !important;
  color: #fff !important;
  background: linear-gradient(135deg, var(--wv-accent-2), var(--wv-accent)) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}
body.wv-route-landing .wv-landing-copy .wv-landing-secondary {
  min-height: 52px;
  padding: 0 28px !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  background: rgba(18,18,20,.72) !important;
}

/* =========================================================
   SIGNED-IN / CATALOG HOME
   ========================================================= */
body.wv-route-home #app { background: transparent; }
body.wv-route-home .wv-home-hero {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.wv-route-home .wv-home-hero-card {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: hidden;
}
body.wv-route-home .wv-home-hero-card > div {
  height: clamp(590px, 75vh, 870px) !important;
  min-height: 590px;
  aspect-ratio: auto !important;
}
body.wv-route-home .wv-home-hero-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.98) 0%, rgba(0,0,0,.8) 28%, rgba(0,0,0,.17) 67%, rgba(0,0,0,.4) 100%),
    linear-gradient(0deg, var(--wv-bg) 0%, transparent 37%);
}
body.wv-route-home .wv-home-hero-content {
  left: clamp(18px, 5vw, 84px) !important;
  right: auto !important;
  bottom: clamp(115px, 14vh, 160px) !important;
  width: min(710px, 58vw);
  padding: 0 !important;
  z-index: 22 !important;
}
body.wv-route-home .wv-home-hero-content > div { max-width: none !important; }
body.wv-route-home .wv-home-hero-content h1 {
  font-size: clamp(44px, 5.6vw, 92px) !important;
  line-height: .92 !important;
  letter-spacing: -.055em;
  text-shadow: 0 10px 35px rgba(0,0,0,.75);
}
body.wv-route-home .wv-home-hero-content p {
  max-width: 620px;
  color: rgba(255,255,255,.82) !important;
  font-size: clamp(14px, 1.15vw, 18px) !important;
  line-height: 1.5;
}
body.wv-route-home .wv-home-hero-actions {
  display: flex !important;
  gap: 10px !important;
  padding-top: 10px !important;
}
body.wv-route-home .wv-home-hero-actions button {
  min-height: 48px;
  padding: 0 22px !important;
  border-radius: 8px !important;
  font-weight: 800 !important;
}
body.wv-route-home [data-hero-hover] > div { display: none !important; }
body.wv-route-home .hero-dot {
  width: 22px !important;
  height: 3px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.38) !important;
}
body.wv-route-home .hero-dot.bg-white { background: var(--wv-accent) !important; }

body.wv-route-home .wv-poster-section {
  position: relative;
  z-index: 25;
  margin: 0 !important;
  padding: 18px 0 12px;
}
body.wv-route-home .wv-home-hero + div,
body.wv-route-home .wv-home-hero ~ div.py-6 {
  position: relative;
  z-index: 24;
  margin-top: -112px;
  padding-top: 0 !important;
}
body.wv-route-home .wv-row-shell {
  width: 100%;
  max-width: none !important;
  padding: 0 clamp(18px, 4vw, 68px) !important;
}
body.wv-route-home .wv-row-heading { margin-bottom: 10px !important; }
body.wv-route-home [data-wv-section-title] {
  color: #fff;
  font-size: clamp(20px, 1.65vw, 28px) !important;
  line-height: 1.05;
  font-weight: 850 !important;
  letter-spacing: -.025em;
}
body.wv-route-home .wv-row-heading button {
  color: rgba(255,255,255,.55) !important;
  font-size: 12px !important;
}
body.wv-route-home .wv-poster-rail {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: clamp(158px, 13.2vw, 222px);
  gap: clamp(12px, 1.2vw, 20px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 7px 4px 25px !important;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
body.wv-route-home .wv-poster-rail::-webkit-scrollbar { display: none; }
body.wv-route-home .wv-poster-card {
  width: auto !important;
  min-width: 0 !important;
  scroll-snap-align: start;
  transform-origin: center bottom;
  transition: transform .22s ease, filter .22s ease;
}
body.wv-route-home .wv-poster-card:hover {
  position: relative;
  z-index: 4;
  transform: translateY(-7px) scale(1.025);
}
body.wv-route-home .wv-poster-card .tile-poster,
body.wv-route-home .wv-poster-card > div:first-child {
  width: 100%;
  aspect-ratio: 2/3 !important;
  border-radius: 10px !important;
  overflow: hidden;
  border: 1px solid var(--wv-border) !important;
  background: var(--wv-surface);
  box-shadow: 0 17px 42px rgba(0,0,0,.45);
}
body.wv-route-home .wv-poster-card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
body.wv-route-home .wv-poster-card:hover .tile-poster,
body.wv-route-home .wv-poster-card:hover > div:first-child {
  border-color: rgba(236,10,88,.62) !important;
  box-shadow: var(--wv-shadow), 0 0 0 2px rgba(236,10,88,.28);
}
body.wv-route-home .wv-poster-card > div:nth-child(2) {
  margin-top: 9px !important;
  font-size: 14px !important;
}
body.wv-route-home .wv-poster-card > div:nth-child(3) {
  color: rgba(255,255,255,.48) !important;
}
body.wv-route-home .wv-featured-section { padding-top: 0; }

/* =========================================================
   TITLE, SERIES AND WATCH PAGES
   ========================================================= */
body.wv-route-watch #app { background: var(--wv-bg); }
body.wv-route-watch .wv-watch-shell {
  width: 100%;
  max-width: none !important;
  margin: 0 auto;
  background: transparent;
}
body.wv-route-watch .wv-detail-page {
  position: relative;
  min-height: clamp(650px, 82vh, 930px);
  overflow: hidden;
}
body.wv-route-watch .wv-detail-hero {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.wv-route-watch .wv-detail-hero .wv-hero-card {
  height: 100%;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.wv-route-watch .wv-detail-hero .wv-hero-card > div {
  height: 100% !important;
  min-height: clamp(650px, 82vh, 930px);
  aspect-ratio: auto !important;
}
body.wv-route-watch .wv-detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.98) 0%, rgba(0,0,0,.82) 32%, rgba(0,0,0,.24) 68%, rgba(0,0,0,.45) 100%),
    linear-gradient(0deg, var(--wv-bg) 0%, transparent 42%);
}
body.wv-route-watch .wv-detail-meta {
  position: relative;
  z-index: 4;
  width: min(760px, 62vw);
  margin: 0 !important;
  padding: clamp(120px, 15vh, 175px) 0 90px clamp(20px, 6vw, 102px) !important;
}
body.wv-route-watch .wv-detail-copy {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
}
body.wv-route-watch .wv-detail-copy h1 {
  font-size: clamp(46px, 6vw, 94px) !important;
  line-height: .92;
  letter-spacing: -.06em;
  text-shadow: 0 10px 34px rgba(0,0,0,.72);
}
body.wv-route-watch .wv-detail-copy p {
  max-width: 680px;
  color: rgba(255,255,255,.78) !important;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.55;
}
body.wv-route-watch .wv-watch-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px !important;
}
body.wv-route-watch .wv-watch-actions button,
body.wv-route-watch .wv-watch-actions a {
  min-height: 48px;
  padding: 0 21px !important;
  border-radius: 8px !important;
  border: 1px solid var(--wv-border);
  font-weight: 800;
}
body.wv-route-watch .wv-watch-player {
  width: min(1500px, calc(100% - 36px));
  margin: 28px auto;
  overflow: hidden !important;
  border: 1px solid var(--wv-border);
  border-radius: 14px;
  background: #000;
  box-shadow: var(--wv-shadow);
}
body.wv-route-watch .wv-watch-player mux-player,
body.wv-route-watch .wv-watch-player video {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
}
body.wv-route-watch .wv-poster-section {
  width: 100%;
  padding: 24px clamp(18px, 3.5vw, 58px) 16px !important;
}
body.wv-route-watch [data-wv-section-title] {
  display: block;
  margin-bottom: 12px;
  font-size: clamp(20px, 1.6vw, 27px) !important;
  font-weight: 850 !important;
  letter-spacing: -.025em;
}
body.wv-route-watch .wv-related-rail {
  display: grid !important;
  grid-auto-flow: column;
  grid-auto-columns: clamp(155px, 13vw, 218px);
  gap: 16px !important;
  overflow-x: auto !important;
  padding: 6px 2px 24px !important;
  scrollbar-width: none;
}
body.wv-route-watch .wv-related-rail::-webkit-scrollbar { display: none; }
body.wv-route-watch .wv-related-card {
  width: auto !important;
  min-width: 0 !important;
}
body.wv-route-watch .wv-related-card img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 2/3 !important;
  object-fit: cover !important;
  border-radius: 10px;
  border: 1px solid var(--wv-border);
}

/* Comments are deliberately removed from the consumer title/watch experience. */
body.wv-route-watch [data-comments],
body.wv-route-watch [data-comment-section],
body.wv-route-watch #comments,
body.wv-route-watch #commentSection,
body.wv-route-watch .comments,
body.wv-route-watch .comments-section,
body.wv-route-watch .comment-section,
body.wv-route-watch .comment-form { display: none !important; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  body.wv-route-landing .wv-landing-nav {
    grid-template-columns: 1fr auto;
    min-height: 68px;
  }
  body.wv-route-landing .wv-landing-nav nav { display: none; }
  body.wv-route-landing .wv-landing-grid {
    align-items: flex-end;
    padding: 120px 20px 64px !important;
  }
  body.wv-route-landing .wv-landing-copy { width: 100%; }
  body.wv-route-landing .wv-landing-copy h1 { font-size: clamp(46px, 14vw, 72px) !important; }
  body.wv-route-landing .wv-landing::before {
    background: linear-gradient(0deg, #020203 3%, rgba(0,0,0,.88) 38%, rgba(0,0,0,.18) 100%);
  }

  body.wv-route-home .wv-home-hero-card > div { height: 660px !important; min-height: 660px; }
  body.wv-route-home .wv-home-hero-slide::after {
    background: linear-gradient(0deg, var(--wv-bg) 0%, rgba(0,0,0,.84) 45%, rgba(0,0,0,.15) 100%);
  }
  body.wv-route-home .wv-home-hero-content {
    left: 20px !important;
    right: 20px !important;
    bottom: 116px !important;
    width: auto;
  }
  body.wv-route-home .wv-home-hero-content h1 { font-size: clamp(38px, 11vw, 62px) !important; }
  body.wv-route-home .wv-home-hero + div,
  body.wv-route-home .wv-home-hero ~ div.py-6 { margin-top: -88px; }
  body.wv-route-home .wv-poster-rail { grid-auto-columns: clamp(132px, 38vw, 178px); }
  body.wv-route-home .wv-row-shell { padding-inline: 18px !important; }

  body.wv-route-watch .wv-detail-page { min-height: 720px; }
  body.wv-route-watch .wv-detail-hero .wv-hero-card > div { min-height: 720px; }
  body.wv-route-watch .wv-detail-hero::after {
    background: linear-gradient(0deg, var(--wv-bg) 1%, rgba(0,0,0,.88) 43%, rgba(0,0,0,.15) 100%);
  }
  body.wv-route-watch .wv-detail-meta {
    width: 100%;
    padding: 360px 20px 70px !important;
  }
  body.wv-route-watch .wv-detail-copy h1 { font-size: clamp(40px, 12vw, 64px) !important; }
  body.wv-route-watch .wv-related-rail { grid-auto-columns: clamp(132px, 38vw, 176px); }
}

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