/* RouteSky for Android — cinematic home hero. Always dark ("the screening room"), in both site themes. */
.rsc {
  --rsc-ink: #f5f8ff;
  --rsc-ink-2: rgba(226, 236, 255, 0.78);
  --rsc-ink-3: rgba(206, 220, 245, 0.62);
  --rsc-sky: #64c8ff;
  --rsc-dawn: #ffc27a;
  --rsc-bar: clamp(14px, 5.2vh, 58px);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(640px, 100svh, 940px);
  background: radial-gradient(120% 90% at 66% 50%, #0b1a3c 0%, #050b1a 48%, #020309 100%);
  color: var(--rsc-ink);
  display: flex;
  align-items: center;
}
.rsc__stage { position: absolute; inset: 0; z-index: 0; }
.rsc__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.rsc__bg { position: absolute; left: -60px; top: -60px; width: calc(100% + 120px); height: calc(100% + 120px); display: block; will-change: transform, opacity; }

.rsc__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }

/* legibility scrim: from the text side */
.rsc__stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(2,3,9,0.86) 0%, rgba(2,3,9,0.55) 34%, rgba(2,3,9,0) 58%),
    radial-gradient(130% 100% at 60% 50%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.6) 100%);
}
/* film grain: a CSS overlay on the compositor, not a per-frame canvas fill */
.rsc__grain { position: absolute; inset: -50%; z-index: 1; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: var(--rsc-grain, none); background-size: 160px 160px; }
.rsc.is-cine .rsc__grain { animation: rsc-grain 0.5s steps(5) infinite; }
.rsc.is-paused .rsc__grain { animation-play-state: paused; }
@keyframes rsc-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-7%, 4%); } 40% { transform: translate(5%, -6%); } 60% { transform: translate(-3%, 8%); } 80% { transform: translate(8%, 2%); } 100% { transform: translate(0, 0); } }
/* letterbox: arrives with the first shot */
.rsc__bar { position: absolute; left: 0; right: 0; height: var(--rsc-bar); background: #000; z-index: 3; pointer-events: none; transform: scaleY(1); }
.rsc__bar--t { top: 0; transform-origin: top; }
.rsc__bar--b { bottom: 0; transform-origin: bottom; }
.rsc.is-cine .rsc__bar { transform: scaleY(0); transition: transform 1.4s cubic-bezier(0.65, 0, 0.35, 1); }
.rsc.is-cine.is-bars .rsc__bar { transform: scaleY(1); }

/* film subtitles */
.rsc__subtitle {
  position: absolute; left: 50%; bottom: calc(var(--rsc-bar) + clamp(18px, 4vh, 40px)); z-index: 4;
  margin: 0; transform: translate(-50%, 8px); width: max-content; max-width: min(92vw, 44rem);
  font-size: clamp(0.95rem, 1.6vw, 1.2rem); font-style: italic; font-weight: 500; letter-spacing: 0.01em;
  color: #fff; text-align: center; text-shadow: 0 1px 2px #000, 0 0 18px rgba(0,0,0,0.8);
  opacity: 0; filter: blur(6px); transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.6s ease;
}
.rsc__subtitle.is-on { opacity: 1; transform: translate(-50%, 0); filter: blur(0); }
.rsc.is-done .rsc__subtitle { opacity: 0; }

/* content */
.rsc__content { position: relative; z-index: 2; padding-block: calc(var(--rsc-bar) + 3.5rem); }
.rsc__copy { max-width: 37rem; }
.rsc__eyebrow { margin: 0 0 1.1rem; }
.rsc__chip {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.42rem 0.85rem 0.42rem 0.7rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--rsc-ink);
  background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  border: 1px solid rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
}
.rsc__chip::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--rsc-dawn); box-shadow: 0 0 0 0 rgba(255,194,122,0.6); animation: rsc-ping 2.4s ease-out infinite;
}
@keyframes rsc-ping { 0% { box-shadow: 0 0 0 0 rgba(255,194,122,0.55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(255,194,122,0); } }

.rsc__title {
  margin: 0; font-size: clamp(2.5rem, 5.6vw, 5.1rem); line-height: 1.02; letter-spacing: -0.035em; font-weight: 700;
  color: var(--rsc-ink); text-wrap: balance;
}
.rsc__brand {
  background: linear-gradient(100deg, #ffffff 0%, #bfe6ff 28%, var(--rsc-sky) 48%, #ffffff 62%, var(--rsc-dawn) 100%);
  background-size: 220% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rsc__title sup { font-size: 0.32em; vertical-align: super; letter-spacing: 0; font-weight: 600; margin-left: 0.04em; }
.rsc__lede { margin: 1.25rem 0 0; font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.55; color: var(--rsc-ink-2); max-width: 34rem; }
.rsc__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.9rem; }
.rsc__ghost {
  color: var(--rsc-ink); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.rsc__ghost:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.34); }
.rsc .btn:focus-visible, .rsc__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.rsc__legal { margin: 1.6rem 0 0; font-size: 0.78rem; line-height: 1.5; color: var(--rsc-ink-3); max-width: 34rem; }

/* pause control (WCAG 2.2.2) */
.rsc__toggle {
  position: absolute; z-index: 5; right: clamp(14px, 2.4vw, 32px); top: calc(var(--rsc-bar) + 92px);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: #fff; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.rsc__toggle:hover { background: rgba(255,255,255,0.16); }
.rsc:not(.is-js) .rsc__toggle, .rsc.is-reduced .rsc__toggle { display: none; }
.rsc__toggle svg { width: 14px; height: 14px; }
.rsc__toggle .i-play { display: none; }
.rsc.is-paused .rsc__toggle .i-play { display: block; }
.rsc.is-paused .rsc__toggle .i-pause { display: none; }

/* ---------- the cinematic sequence (is-init: the hidden start state is applied instantly, not animated) */
.rsc.is-init, .rsc.is-init * { transition: none !important; }
/* ---------- (only when JS runs and motion is allowed) ---------- */
.rsc.is-cine .rsc__eyebrow, .rsc.is-cine .rsc__lede, .rsc.is-cine .rsc__cta, .rsc.is-cine .rsc__legal {
  opacity: 0; transform: translateY(14px); filter: blur(8px);
  transition: opacity 1s ease, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), filter 1s ease;
}
.rsc.is-cine.is-eyebrow .rsc__eyebrow, .rsc.is-cine.is-lede .rsc__lede, .rsc.is-cine.is-cta .rsc__cta, .rsc.is-cine.is-done .rsc__legal {
  opacity: 1; transform: none; filter: none;
}
.rsc.is-cine .rsc__ch {
  display: inline-block; opacity: 0; transform: translateY(0.35em) scale(1.08); filter: blur(14px);
  transition: opacity 0.9s ease, transform 1.3s cubic-bezier(0.16, 1, 0.3, 1), filter 1s ease;
  transition-delay: calc(var(--i) * 34ms);
}
.rsc.is-cine.is-title .rsc__ch { opacity: 1; transform: none; filter: none; }
.rsc__w { display: inline-block; white-space: nowrap; }
/* chromatic split on the reveal, settling to clean type */
.rsc.is-cine.is-title .rsc__split { animation: rsc-chroma 1.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes rsc-chroma {
  0% { text-shadow: -3px 0 rgba(255,70,90,0.65), 3px 0 rgba(60,200,255,0.65); }
  100% { text-shadow: 0 0 rgba(255,70,90,0), 0 0 rgba(60,200,255,0); }
}
.rsc.is-cine .rsc__brand .rsc__ch {   /* each letter carries the brand gradient */
  background: linear-gradient(100deg, #ffffff 0%, #bfe6ff 28%, var(--rsc-sky) 48%, #ffffff 62%, var(--rsc-dawn) 100%);
  background-size: 900% 100%; background-position: calc(var(--i) * 12%) 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.rsc.is-cine .rsc__brand { background: none; color: inherit; }
/* anamorphic flare across the title as it lands */
.rsc__titlewrap { position: relative; }
.rsc__flare {
  position: absolute; z-index: 3; left: -25%; right: -45%; height: 2px; top: 56%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(90,180,255,0) 0%, rgba(150,215,255,0.5) 30%, #fff 50%, rgba(150,215,255,0.5) 70%, rgba(90,180,255,0) 100%);
  box-shadow: 0 0 22px 4px rgba(90,180,255,0.45);
}
.rsc.is-cine.is-title .rsc__flare { animation: rsc-flare 1.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes rsc-flare {
  0% { opacity: 0; transform: translateX(-30%) scaleX(0.3); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translateX(30%) scaleX(1); }
}

.rsc.is-paused .rsc__chip::before { animation-play-state: paused; }

/* ---------- layout: phones and narrow windows ---------- */
@media (max-width: 760px) {
  .rsc { align-items: flex-end; min-height: max(100svh, 980px); }
  .rsc__content { padding-block: 0 calc(var(--rsc-bar) + 4.4rem); }
  .rsc__stage::after {
    background: linear-gradient(0deg, rgba(2,3,9,0.94) 0%, rgba(2,3,9,0.86) 34%, rgba(2,3,9,0.35) 52%, rgba(2,3,9,0) 64%),
                radial-gradient(140% 100% at 50% 30%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
  }
  .rsc__subtitle { bottom: auto; top: 58%; font-size: 1rem; }
  .rsc__title { font-size: clamp(2.3rem, 10.5vw, 3.2rem); }
  .rsc__cta { gap: 0.6rem; }
  .rsc__cta .btn-lg { padding: 0.75rem 1.15rem; font-size: 1rem; }
}
/* ---------- reduced motion: the finished still, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .rsc__chip::before, .rsc__grain { animation: none !important; }
  .rsc__subtitle, .rsc__flare { display: none; }
}