/* Each window has its own light, while the movie remains the main artwork. */
.cinema-home[data-scene] {
  --scene-ink: 9 16 28;
  --scene-accent: #ffe2cd;
  --scene-accent-rgb: 255 226 205;
  --scene-glow-x: 76%;
  --scene-glow-y: 24%;
  --scene-glow-opacity: .075;
}
.cinema-home:is([data-scene="sakura"], [data-effect-theme="sakura"]) {
  --scene-ink: 19 15 26;
  --scene-accent: #ffe0dc;
  --scene-accent-rgb: 255 224 220;
}
.cinema-home:is([data-scene="summer"], [data-effect-theme="summer"]) {
  --home-cream: #d7eff4;
  --home-hairline: #d7eff43d;
  --scene-ink: 7 25 38;
  --scene-accent: #d0efff;
  --scene-accent-rgb: 208 239 255;
  --scene-glow-x: 65%;
  --scene-glow-y: 19%;
  --scene-glow-opacity: .09;
}
.cinema-home:is([data-scene="lanterns"], [data-effect-theme="lanterns"]) {
  --home-cream: #f5d8b2;
  --home-hairline: #f5d8b23d;
  --scene-ink: 32 18 21;
  --scene-accent: #ffe0ad;
  --scene-accent-rgb: 255 224 173;
  --scene-glow-x: 82%;
  --scene-glow-y: 37%;
  --scene-glow-opacity: .1;
}
.cinema-home:is([data-scene="forest"], [data-effect-theme="forest"]) {
  --home-cream: #dce6bd;
  --home-hairline: #dce6bd38;
  --scene-ink: 10 25 20;
  --scene-accent: #e0efc5;
  --scene-accent-rgb: 224 239 197;
  --scene-glow-x: 70%;
  --scene-glow-y: 20%;
  --scene-glow-opacity: .075;
}
.cinema-home:is([data-scene="stars"], [data-effect-theme="stars"]) {
  --home-cream: #d7dff2;
  --home-hairline: #d7dff23d;
  --scene-ink: 10 15 34;
  --scene-accent: #d9e6ff;
  --scene-accent-rgb: 217 230 255;
  --scene-glow-x: 68%;
  --scene-glow-y: 20%;
  --scene-glow-opacity: .055;
}
.cinema-home:is([data-scene="journey"], [data-effect-theme="journey"]) {
  --home-cream: #f0d1aa;
  --home-hairline: #f0d1aa3d;
  --scene-ink: 30 19 18;
  --scene-accent: #ffdbad;
  --scene-accent-rgb: 255 219 173;
  --scene-glow-x: 82%;
  --scene-glow-y: 39%;
  --scene-glow-opacity: .085;
}

.cinema-home[data-scene] .cinema-grade {
  background:
    linear-gradient(180deg, rgb(var(--scene-ink) / .57), rgb(var(--scene-ink) / .025) 26%,
      rgb(var(--scene-ink) / .045) 42%, rgb(var(--scene-ink) / .68) 72%, rgb(var(--scene-ink) / .96)),
    linear-gradient(90deg, rgb(var(--scene-ink) / .39), rgb(var(--scene-ink) / .08) 45%,
      rgb(var(--scene-ink) / .03) 73%, rgb(var(--scene-ink) / .26));
}
.cinema-home[data-scene] .cinema-grade::after {
  background:
    radial-gradient(ellipse at var(--scene-glow-x) var(--scene-glow-y),
      rgb(var(--scene-accent-rgb) / var(--scene-glow-opacity)), transparent 46%),
    radial-gradient(ellipse at 50% 36%, transparent 34%, rgb(var(--scene-ink) / .21));
}
.cinema-home[data-scene] .cinema-legibility {
  background:
    linear-gradient(180deg, rgb(var(--scene-ink) / .18), transparent 23%, transparent 41%,
      rgb(var(--scene-ink) / .13) 63%, rgb(var(--scene-ink) / .28)),
    radial-gradient(ellipse at 20% 63%, rgb(var(--scene-ink) / .19), transparent 54%);
}
.cinema-home[data-scene] .home-title-row + .home-title-row {
  color: var(--scene-accent);
  transition: color .8s ease;
}
.cinema-home[data-scene] :is(.cinema-brand > span, .cinema-kicker) {
  color: var(--home-cream);
  transition: color .8s ease;
}
.cinema-home[data-scene] .cinema-copy h1 {
  text-shadow: 0 2px 22px rgb(var(--scene-ink) / .34);
}
.cinema-home[data-scene] .cinema-cta {
  background: rgb(var(--scene-accent-rgb) / .085);
  border-color: rgb(var(--scene-accent-rgb) / .34);
  box-shadow: inset 0 1px rgb(255 255 255 / .025);
}
.cinema-home[data-scene] .cinema-cta:hover {
  background: rgb(var(--scene-accent-rgb) / .16);
  border-color: rgb(var(--scene-accent-rgb) / .6);
}
.cinema-home[data-scene] .cinema-rail button:is(.is-active, [aria-pressed="true"]) .scene-window {
  border-color: rgb(var(--scene-accent-rgb) / .74);
  box-shadow: 0 12px 25px rgb(var(--scene-ink) / .52), 0 0 18px rgb(var(--scene-accent-rgb) / .1);
}
.cinema-home[data-scene] .scene-progress > span { background: var(--scene-accent); }
.cinema-home[data-scene] .next-arrow { border-color: rgb(var(--scene-accent-rgb) / .3); }

/* Keep the pointer's light diffuse over the sea, hair and sky. */
.cinema-home[data-scene]:not([data-scene="sakura"]) .cinema-light::after {
  width: 350px;
  height: 220px;
  border: 0;
  box-shadow: none;
  background: radial-gradient(ellipse, rgb(var(--home-light-color) / .025), transparent 68%);
}

@media (max-width: 600px), (max-width: 900px) and (max-aspect-ratio: 1/1) {
  .cinema-home[data-scene] .cinema-grade {
    background: linear-gradient(180deg, rgb(var(--scene-ink) / .65), rgb(var(--scene-ink) / .045) 26%,
      rgb(var(--scene-ink) / .11) 39%, rgb(var(--scene-ink) / .73) 67%, rgb(var(--scene-ink) / .96));
  }
  .cinema-home[data-scene] .cinema-legibility {
    background: radial-gradient(ellipse at 50% 57%, rgb(var(--scene-ink) / .24), transparent 70%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-home[data-scene] :is(.home-title-row, .cinema-brand > span, .cinema-kicker) { transition: none; }
}