/* Homepage cutscene. Colors follow the theme switch on <html data-theme>. */

html.cs-on { overflow: hidden; }

html[data-theme="light"] .cutscene,
.cutscene {
  --cs-sky: #f4f7fb;
  --cs-ground: #e4ebf5;
  --cs-line: #06285e;
  --cs-ink: #06285e;
  --cs-ink-top: #3d6ec4;
  --cs-ink-bot: #041833;
  --cs-ink-edge: #031428;
  --cs-strap: #021026;
  --cs-dust: #8aa0c0;
}

html[data-theme="dark"] .cutscene {
  --cs-sky: #0b1220;
  --cs-ground: #131d31;
  --cs-line: #e7ecf4;
  --cs-ink: #d5deea;
  --cs-ink-top: #f7f9fc;
  --cs-ink-bot: #8fa0b8;
  --cs-ink-edge: #6e829c;
  --cs-strap: #5c7088;
  --cs-dust: #8b9bb3;
}

.cutscene {
  position: fixed;
  inset: 0;
  z-index: 12000;
  background: var(--cs-sky);
  overflow: hidden;
  pointer-events: auto;
  will-change: opacity;
}

.cutscene svg {
  width: 100%;
  height: 100%;
  display: block;
}

.cs-ground { fill: var(--cs-ground); }
.cs-horizon { fill: none; stroke: var(--cs-line); stroke-width: 3; opacity: .7; }
.cs-lane { fill: none; stroke: var(--cs-line); stroke-width: 6; stroke-linecap: round; opacity: .45; }
.cs-pebble { fill: none; stroke: var(--cs-line); stroke-width: 3; stroke-linecap: round; opacity: .22; }
/* Flat fills: volume comes from the lighter lid and the darker edge, no gradients */
.cs-fill { fill: var(--cs-ink); }
.cs-edge { fill: var(--cs-ink-edge); }
.cs-hub { fill: var(--cs-ink-edge); }
.cs-lid { fill: var(--cs-ink-top); }
.cs-strap { fill: var(--cs-strap); }
.cs-shell { fill: none; stroke: var(--cs-ink); stroke-width: 16; stroke-linejoin: round; }
.cs-skin { fill: var(--cs-ink); stroke: none; }
.cs-shadow { fill: var(--cs-ink-edge); }
.cs-dust { fill: var(--cs-dust); }
.cs-air { fill: none; stroke: var(--cs-line); stroke-width: 3; stroke-linecap: round; opacity: .55; }

@media (prefers-reduced-motion: reduce) {
  .cutscene { display: none !important; }
}