/* RR Movies V2 — cinematic motion system.
   Only transform / opacity are animated (GPU friendly), effects pause when off-screen,
   and everything calms down for people who ask their OS for reduced motion. */

/* ---------- studio ident (first visit per session) ---------- */
.intro { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; background: #000; overflow: hidden; cursor: pointer; }
.intro-streak {
  position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px;
  background: linear-gradient(90deg, transparent, var(--red) 25%, #fff 50%, var(--red) 75%, transparent);
  box-shadow: 0 0 40px 6px var(--red-glow), 0 0 120px 20px rgba(229, 24, 43, 0.25);
  transform: scaleX(0); opacity: 0;
}
.intro-glow { position: absolute; width: 70vmin; height: 70vmin; border-radius: 50%; background: radial-gradient(circle, rgba(229, 24, 43, 0.35), transparent 65%); opacity: 0; }
.intro-logo { position: relative; display: flex; align-items: center; gap: 14px; opacity: 0; }
.intro-logo .logo-mark { height: 76px; padding: 6px 14px 0 16px; border-radius: 14px; font-size: 66px; }
.intro-logo .logo-word { font-size: 66px; letter-spacing: 0.2em; }
.intro-sub { position: absolute; top: calc(50% + 70px); font-size: 12px; font-weight: 800; letter-spacing: 0.5em; text-transform: uppercase; color: var(--text-2); opacity: 0; }
.intro.play .intro-streak { animation: introStreak 1.5s var(--ease-cine) both; }
.intro.play .intro-glow { animation: introGlow 2s var(--ease-out) 0.35s both; }
.intro.play .intro-logo { animation: introLogo 1.7s var(--ease-out) 0.35s both; }
.intro.play .intro-sub { animation: introSub 1.4s var(--ease-out) 0.85s both; }
.intro.done { animation: introOut 0.8s var(--ease-in-out) forwards; pointer-events: none; }
.hero.is-intro .hero-stage { animation: heroIntro 2.2s var(--ease-out) both; }
@media (max-width: 600px) {
  .intro-logo .logo-mark { height: 50px; font-size: 42px; padding: 4px 10px 0 11px; }
  .intro-logo .logo-word { font-size: 42px; }
  .intro-sub { top: calc(50% + 50px); letter-spacing: 0.32em; font-size: 10px; }
}

/* ---------- film grain + ambient light ---------- */
/* Film grain: a tiny SVG noise tile (no JavaScript), shifted 6 times a second. */
.grain { position: fixed; inset: 0; z-index: 400; pointer-events: none; overflow: hidden; opacity: 0.1; }
.grain::before {
  content: ''; position: absolute; inset: -100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  animation: grain 1s steps(6) infinite;
}
html.player-open .grain { display: none; }
.ambient { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ambient span { position: absolute; width: 80vmax; height: 80vmax; border-radius: 50%; }
.ambient span:first-child { left: -38vmax; top: 10vh; background: radial-gradient(circle, rgba(229, 24, 43, 0.13), transparent 62%); animation: drift1 28s ease-in-out infinite alternate; }
.ambient span:last-child { right: -40vmax; top: 30vh; background: radial-gradient(circle, rgba(150, 18, 70, 0.1), transparent 62%); animation: drift2 34s ease-in-out infinite alternate; }

/* ---------- hero text reveal ---------- */
.hero-content [data-anim] { opacity: 0; translate: 0 26px; }
.hero-content .hero-title .w > span { translate: 0 110%; }
.hero-content.is-in [data-anim] {
  opacity: 1; translate: 0 0;
  transition: opacity 0.9s var(--ease-out), translate 1.1s var(--ease-out);
  transition-delay: calc(var(--k, 0) * 90ms + 380ms);
}
.hero-content.is-in .hero-title .w > span { translate: 0 0; transition: translate 1.15s var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms + 120ms); }
.hero-content.is-out [data-anim] { opacity: 0; translate: 0 -14px; transition: opacity 0.35s, translate 0.45s var(--ease-in-out); }
.hero-content.is-out .hero-title .w > span { translate: 0 -110%; transition: translate 0.5s var(--ease-in-out); }

/* ---------- scroll reveals ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; translate: 0 44px; transition: opacity 1s var(--ease-out), translate 1.2s var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
  .js .reveal.is-in { opacity: 1; translate: 0 0; }
  .js .scene-title .mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
  .js .scene-title .mask > span { display: inline-block; translate: 0 105%; transition: translate 1s var(--ease-out) 0.1s; }
  .js .scene.is-in .scene-title .mask > span { translate: 0 0; }
  .js .scene-line { transform: scaleX(0); transition: transform 1.6s var(--ease-cine) 0.2s; }
  .js .scene.is-in .scene-line { transform: scaleX(1); }
  .js .scene:not(.is-in) .rail > .card, .js .scene:not(.is-in) .grid > .card { opacity: 0; }
  .js .scene.is-in .rail > .card { animation: cardIn 1.1s var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 9) * 65ms + 120ms); }
  .js .scene.is-in .grid > .card { animation: cardRise 0.9s var(--ease-out) both; animation-delay: calc(min(var(--i, 0), 18) * 35ms); }
  /* Network tiles "power on" one after another, like channels lighting up. */
  .js .scene:not(.is-in) .rail > .net { opacity: 0; }
  .js .scene.is-in .rail > .net { animation: netOn 1.1s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }
  .lite .scene.is-in .rail > .net { animation-name: cardRise; }
  .js .banner.reveal { translate: 0 0; opacity: 1; clip-path: inset(10% 6% 10% 6% round 40px); transition: clip-path 1.4s var(--ease-cine); }
  .js .banner.reveal.is-in { clip-path: inset(0 0 0 0 round var(--radius-lg)); }
  .js .banner.reveal .banner-copy > * { opacity: 0; translate: 0 30px; transition: opacity 0.9s var(--ease-out), translate 1.1s var(--ease-out); transition-delay: calc(var(--k, 0) * 90ms + 450ms); }
  .js .banner.reveal.is-in .banner-copy > * { opacity: 1; translate: 0 0; }
}

/* Rows swapped in place (My List / Continue Watching) should not replay their entrance. */
.scene.static .rail > .card, .scene.static .rail > .net { animation: none !important; opacity: 1 !important; }
/* Keyboard users can always see focused spotlight controls, whatever the scroll progress. */
.spot-copy:focus-within > * { opacity: 1 !important; transform: none !important; }

/* Poster → details morph (View Transitions API, Chromium/Edge). Other browsers use the overlay animation. */
::view-transition-group(rr-poster) { animation-duration: 0.75s; animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.45s; }
::view-transition-image-pair(rr-poster) { isolation: isolate; }

/* ---------- keyframes ---------- */
@keyframes kenburns { from { transform: scale(1.14) translate3d(1.5%, 1%, 0); } to { transform: scale(1) translate3d(0, 0, 0); } }
@keyframes heroProgress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes heroIntro { from { transform: scale(1.18); filter: brightness(0.2); } to { transform: scale(1); filter: brightness(1); } }
@keyframes streak {
  0% { transform: translateX(0) rotate(var(--r, -7deg)); opacity: 0; }
  8% { opacity: 0.9; }
  42% { opacity: 0; }
  50%, 100% { transform: translateX(190vw) rotate(var(--r, -7deg)); opacity: 0; }
}
@keyframes flash { 0% { transform: translateX(-100%); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateX(100%); opacity: 0; } }
@keyframes logoGlint { 0%, 70% { transform: translateX(-160%) skewX(-18deg); } 85%, 100% { transform: translateX(360%) skewX(-18deg); } }
@keyframes grain {
  0% { transform: translate(0, 0); } 17% { transform: translate(-6%, 4%); } 33% { transform: translate(5%, -7%); }
  50% { transform: translate(-3%, 8%); } 67% { transform: translate(8%, 2%); } 83% { transform: translate(-7%, -4%); } 100% { transform: translate(2%, 6%); }
}
@keyframes drift1 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(14vw, 22vh, 0); } }
@keyframes drift2 { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-12vw, -18vh, 0); } }
@keyframes cardIn { from { opacity: 0; translate: 70px 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes cardRise { from { opacity: 0; translate: 0 36px; } to { opacity: 1; translate: 0 0; } }
@keyframes riseIn { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes plFrameIn { from { opacity: 0; transform: scale(0.965) translateY(18px); filter: brightness(0.35); } to { opacity: 1; transform: none; filter: none; } }
@keyframes plScan { from { top: 0; } to { top: calc(100% - 2px); } }
@keyframes plPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(229, 24, 43, 0.25); } 50% { box-shadow: 0 0 0 7px rgba(229, 24, 43, 0.05); } }
@keyframes plEq { 0%, 100% { height: 4px; } 50% { height: 14px; } }
@keyframes netOn {
  0% { opacity: 0; translate: 0 34px; filter: brightness(0.3) blur(6px); }
  55% { opacity: 1; filter: brightness(1.35) blur(0); }
  100% { opacity: 1; translate: 0 0; filter: none; }
}
@keyframes upSlide { from { transform: translateX(-110%); } to { transform: translateX(280%); } }
@keyframes upShine { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes upBob { 0%, 100% { transform: translateY(1px); } 50% { transform: translateY(-3px); } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes menuItem { to { opacity: 1; transform: none; } }
@keyframes overlayIn { from { opacity: 0; transform: scale(1.035); filter: brightness(0.4); } to { opacity: 1; transform: none; filter: none; } }
@keyframes overlayOut { to { opacity: 0; transform: scale(0.985); } }
@keyframes detailZoom { from { transform: scale(1.22); filter: brightness(0.35); } to { transform: scale(1.06); filter: none; } }
@keyframes letterbox { 0% { height: 50%; } 100% { height: 0; } }
@keyframes wallUp { from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes wallDown { from { transform: translateY(-50%); } to { transform: translateY(0); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(18px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(10px) scale(0.97); } }
@keyframes introStreak { 0% { transform: scaleX(0); opacity: 0; } 30% { opacity: 1; } 55% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
@keyframes introGlow { 0% { opacity: 0; transform: scale(0.6); } 50% { opacity: 1; } 100% { opacity: 0.4; transform: scale(1.3); } }
@keyframes introLogo { 0% { opacity: 0; transform: scale(1.25); filter: blur(10px); letter-spacing: 0.6em; } 60% { opacity: 1; filter: blur(0); } 100% { opacity: 1; transform: scale(1); } }
@keyframes introSub { from { opacity: 0; letter-spacing: 1em; } to { opacity: 0.85; letter-spacing: 0.5em; } }
@keyframes introOut { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }

/* Paused while the hero / page is not visible (set by motion.js) */
.is-offscreen .streaks i, .is-offscreen .hero-slide .hero-kb,
html.is-hidden .grain::before, html.is-hidden .ambient span { animation-play-state: paused !important; }

/* ---------- lite mode (set automatically on low-spec PCs by motion.js) ---------- */
.lite .grain::before, .lite .ambient span { animation: none; }
.lite .nav.is-solid { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(7, 7, 9, 0.95); }
.lite .streaks i:nth-child(n + 2) { display: none; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important;
    transition-duration: 0.001ms !important; transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
  .streaks, .intro { display: none !important; }
  .grain::before, .ambient span { animation: none !important; }
  .hero-layer, .spot-media, .spot-media .hero-layer, .banner-media { transform: none !important; }
  .spotlight { height: auto; }
  .spot-sticky { position: relative; height: 88vh; }
  .auth-col { animation: none !important; }
}