/* NOVA WEB PRESENTATION SHELL — phase 1 visual-parity bridge. */
:root {
  --safe-top: max(env(safe-area-inset-top, 0px), var(--nova-native-safe-top, 0px));
  --safe-right: max(env(safe-area-inset-right, 0px), var(--nova-native-safe-right, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--nova-native-safe-bottom, 0px));
  --safe-left: max(env(safe-area-inset-left, 0px), var(--nova-native-safe-left, 0px));
}
html, body { margin:0; min-height:100%; background:#000; color:#fff; }
body { min-height:100dvh; overflow-x:hidden; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
img { -webkit-user-drag:none; }
button, a { font:inherit; }
.nova-web-page { min-height:100dvh; background:#000; }
#nova-page-root { min-height:100dvh; padding-bottom:calc(var(--bottom-nav-h,78px) + var(--safe-bottom)); }
html.nova-immersive-route #nova-page-root { padding-bottom:0; }
html.nova-immersive-route #nova-global-header,
html.nova-immersive-route #nova-bottom-nav-host { display:none !important; }

/* Exact loader SVG/keyframes come from NovaMotionLoader.razor.css in legacy-components.css. */
.nova-route-transition {
  position:fixed; inset:0; z-index:2147483640; display:grid; place-items:center;
  background:rgba(0,0,0,.88); opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity 110ms ease, visibility 0s linear 120ms;
  backdrop-filter:blur(8px);
}
.nova-route-transition.is-active { opacity:1; visibility:visible; pointer-events:auto; transition-delay:0s; }
.nova-route-transition .nova-motion-loader { min-height:0!important; width:min(210px,52vw); padding:0!important; background:transparent!important; }
.nova-route-transition .nova-motion-loader::before { opacity:.66; }
.nova-route-transition.is-detail-transition { background:radial-gradient(circle at 50% 43%,rgba(88,72,255,.10),transparent 37%),rgba(0,0,0,.94); }
.nova-route-transition.is-detail-transition .nova-motion-loader__stage { transform:scale(1.12); }

/* Fragment replacement uses opacity only so fixed Android-style chrome never shifts. */
.sg-route-frame.nova-route-swapping .sg-route-surface { opacity:.82; }
.sg-route-surface { transition:opacity 160ms cubic-bezier(.18,.82,.22,1); }
.nova-web-page.nova-page-enter { animation:novaWebPageEnter 220ms cubic-bezier(.18,.82,.22,1) both; }
.nova-web-page[data-nova-page$="details"].nova-page-enter { animation:novaWebDetailEnter 320ms cubic-bezier(.16,.86,.25,1) both; }
@keyframes novaWebPageEnter { from{opacity:.84} to{opacity:1} }
@keyframes novaWebDetailEnter { 0%{opacity:.78} 44%{opacity:.94} 100%{opacity:1} }

/* Initial gate is a route-local equivalent of the current full-screen gate. */
.nova-inline-gate { position:relative!important; inset:auto!important; min-height:calc(100dvh - var(--bottom-nav-h,78px)); z-index:2!important; }
.nova-web-catalog-loader,.details-motion-loading { min-height:calc(100dvh - var(--bottom-nav-h,78px)); display:grid; place-items:center; background:#000; }
.details-motion-loading { min-height:100dvh; }
.nova-web-catalog-loader .nova-motion-loader,.details-motion-loading .nova-motion-loader { min-height:inherit; }

/* Shell icon wrapper keeps OscarIcon metrics. */
.nova-shell-icon { display:inline-grid; place-items:center; line-height:0; }
.nova-shell-icon > svg { display:block; }

/* Server-rendered image stand-in for SafeImage. */
.nova-safe-web-image { display:block; width:100%; height:100%; object-fit:cover; background:#08080a; }
.nova-safe-web-image.is-broken { object-fit:contain; padding:18%; opacity:.55; }

/* Home server rendering; class names intentionally mirror the current Razor DOM. */
.target-home-hero-rail { scroll-behavior:smooth; }
.target-hero-slide { cursor:pointer; }
.target-hero-slide .safe-background-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.shahid-card-image { width:100%!important; height:100%!important; object-fit:cover; display:block; }
.nova-web-section-more { width:42px;height:42px;display:grid;place-items:center;border:0;background:transparent;color:#9b4dff; }
.nova-web-rail-empty { padding:40px 20px; color:rgba(255,255,255,.55); }

/* Catalog parity surface uses existing nova item card component CSS. */
.nova-web-catalog-shell { padding-top:calc(var(--safe-top) + 78px); min-height:100dvh; background:#000; }
.nova-web-catalog-heading { padding:24px max(18px,var(--safe-right)) 16px max(18px,var(--safe-left)); }
.nova-web-catalog-heading span { color:#9B4DFF; font-size:.68rem; font-weight:900; letter-spacing:.12em; }
.nova-web-catalog-heading h1 { margin:5px 0 0; font-size:clamp(1.55rem,4vw,2.4rem); font-weight:950; }
.nova-web-catalog-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 10px; padding:8px max(12px,var(--safe-right)) 42px max(12px,var(--safe-left)); }
@media (min-width:650px){.nova-web-catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 14px;padding-inline:24px}}
@media (min-width:1050px){.nova-web-catalog-grid{grid-template-columns:repeat(6,minmax(0,1fr));max-width:1500px;margin:auto}}
.nova-web-catalog-grid .nova-item-card { min-width:0; }
.nova-web-catalog-grid .poster-wrapper { aspect-ratio:2/3; }

/* Detail route DOM mirrors RenderMediaDetails. */
.nova-web-details-back { position:fixed; top:calc(var(--safe-top) + 16px); right:max(14px,var(--safe-right)); z-index:80; width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.52);backdrop-filter:blur(10px);color:#fff;display:grid;place-items:center; }
.nova-web-details-description { margin:24px auto 0; max-width:1200px; padding:0 var(--page-pad,clamp(20px,5vw,60px)); color:rgba(255,255,255,.72); line-height:1.95; font-size:.9rem; }
.nova-web-details-facts { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.nova-web-details-facts span { border:1px solid rgba(255,255,255,.11); border-radius:999px; padding:7px 11px; color:rgba(255,255,255,.72); font-size:.72rem; }
.nova-web-seasons { max-width:1200px; margin:26px auto 0; padding:0 var(--page-pad,clamp(20px,5vw,60px)) 70px; }
.nova-web-season { margin-top:24px; }
.nova-web-season h2 { font-size:1.12rem; }
.nova-web-episodes { display:grid; gap:8px; }
.nova-web-episode { display:grid; grid-template-columns:132px minmax(0,1fr) auto; gap:12px; align-items:center; border:0; width:100%; text-align:right; color:#fff; background:#0a0a0c; border-radius:14px; padding:8px; }
.nova-web-episode img { width:132px; aspect-ratio:16/9; border-radius:9px; object-fit:cover; background:#111; }
.nova-web-episode strong { display:block; }
.nova-web-episode small { color:rgba(255,255,255,.54); }
@media(max-width:560px){.nova-web-episode{grid-template-columns:104px minmax(0,1fr)}.nova-web-episode>svg{display:none}.nova-web-episode img{width:104px}}

.nova-web-simple-page,.nova-web-profile { min-height:100dvh; padding:calc(var(--safe-top) + 100px) 22px calc(var(--bottom-nav-h,78px) + var(--safe-bottom) + 30px); background:#000; }
.nova-web-profile-brand img { width:min(260px,70vw); height:auto; }
.nova-web-profile-state { margin-top:24px; padding:18px; border:1px solid rgba(255,255,255,.1); border-radius:16px; background:#09080d; color:rgba(255,255,255,.72); }

.nova-web-error { min-height:52dvh; display:grid; place-items:center; align-content:center; text-align:center; padding:28px; color:#fff; }
.nova-web-error p { color:rgba(255,255,255,.58); max-width:520px; line-height:1.7; }
.nova-web-error button { border:0;border-radius:12px;padding:12px 18px;background:#9B4DFF;color:#fff;font-weight:900; }

@media (prefers-reduced-motion:reduce){.nova-route-transition,.sg-route-surface,.nova-web-page{transition:none!important;animation:none!important}}

/* Server-shell adaptation of the existing Android pull-to-refresh feel. */
.nova-web-pull-indicator {
  --nova-pull-progress: 0;
  position: fixed;
  z-index: 2147483000;
  top: calc(var(--nova-safe-top, 0px) + 8px);
  left: 50%;
  width: 42px;
  height: 42px;
  transform: translate(-50%, calc(-62px + (58px * var(--nova-pull-progress)))) scale(calc(.72 + (.28 * var(--nova-pull-progress))));
  opacity: var(--nova-pull-progress);
  pointer-events: none;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(7, 9, 15, .82);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(18px) saturate(1.15);
  box-shadow: 0 12px 34px rgba(0,0,0,.42), inset 0 0 20px rgba(255,255,255,.025);
  transition: opacity 150ms ease, transform 170ms cubic-bezier(.2,.8,.2,1);
}
.nova-web-pull-indicator span {
  position: absolute;
  inset: 5px;
  border-radius: inherit;
  border: 2px solid rgba(255,255,255,.14);
  border-top-color: rgba(255,255,255,.88);
  transform: rotate(calc(310deg * var(--nova-pull-progress)));
}
.nova-web-pull-indicator b { font: 800 11px/1 system-ui,sans-serif; letter-spacing: -.05em; color: #fff; }
.nova-web-pull-indicator.is-refreshing { opacity: 1; transform: translate(-50%, 0) scale(1); }
.nova-web-pull-indicator.is-refreshing span { animation: nova-web-pull-spin .72s linear infinite; }
@keyframes nova-web-pull-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .nova-web-pull-indicator, .nova-web-pull-indicator span { transition: none !important; animation: none !important; } }