/* Current Website only: COLOR → genre gallery. LP lives in options. */
body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__sticky--genre-sequence,
body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__sticky--genre-sequence[data-hero-design-sequence] {
  grid-template-rows: auto auto auto auto auto auto auto;
}
body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__sticky--genre-sequence > #website-design-examples {
  grid-column: 1 / -1;
  grid-row: 5;
  align-self: start;
  width: 100%;
  min-width: 0;
  margin: 0;
}
body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__sticky--genre-sequence > .lumen-sheet { grid-row: 6; }
body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__sticky--genre-sequence > .service-hero__reverse-film-stage { grid-row: 7; }

/* Animate one inherited surface, not two independently fading sections.
   COLOR and the gallery therefore have exactly the same color on every frame.
   The demo paper's --color-* palette and all other hero surfaces stay intact. */
@property --genre-surface { syntax: "<color>"; inherits: true; initial-value: #eaf1f5; }
@property --genre-ink { syntax: "<color>"; inherits: true; initial-value: #4a4d4b; }
body.service-website-page .service-hero__sticky--genre-sequence { --genre-from: #665943; --genre-surface: #eaf1f5; --genre-ink: #4a4d4b; }
body.service-website-page .service-hero__sticky--genre-sequence:has(> #website-color-showcase[data-motion-state="running"][data-color-index="1"]) { --genre-from: #204e68; }
body.service-website-page .service-hero__sticky--genre-sequence:has(> #website-color-showcase[data-motion-state="running"][data-color-index="2"]) { --genre-from: #3c5944; }
body.service-website-page #website-design-examples { border-bottom: 0; }
@media (prefers-reduced-motion: no-preference) {
  body.service-website-page.service-movie-page.service-movie-normal-scroll .service-hero__sticky--genre-sequence:has(> #website-color-showcase[data-motion-state="running"]):has(> #website-design-examples[data-genre-in-view][data-motion-state="running"]) {
    --website-joined-surface: var(--genre-surface);
    --website-joined-ink: var(--genre-ink);
    transition: background-color .8s ease, --genre-surface .8s ease, --genre-ink .8s ease;
  }
  body.service-website-page .service-hero__sticky--genre-sequence:has(> #website-color-showcase[data-motion-state="running"]):has(> #website-design-examples[data-genre-in-view="false"][data-motion-state="running"]) { --genre-surface: var(--genre-from); --genre-ink: #fff; }
}
body.service-website-page #website-color-showcase,
body.service-website-page #website-color-showcase .web-color-stage {
  background: var(--website-joined-surface, var(--color-ink));
}
body.service-website-page #website-color-showcase :is(.web-color-stage, .web-color-copy, .web-color-progress, .web-color-scroll) {
  color: var(--website-joined-ink, #fff);
}
body.service-website-page #website-design-examples,
body.service-website-page #website-design-examples .hero-image-orbit__stage,
body.service-website-page #website-design-examples > .eluna-motion-fallback {
  background: var(--genre-surface);
  color: var(--genre-ink);
  transition: none;
}
body.service-website-page #website-color-showcase .web-color-stage::after { background: none; }
body.service-website-page #website-design-examples::before,
body.service-website-page #website-design-examples::after,
body.service-website-page #website-design-examples .hero-image-orbit__stage::before,
body.service-website-page #website-design-examples .hero-image-orbit__stage::after {
  background: none;
}
body.service-website-page #website-design-examples .hero-image-orbit__description { display: none; }
body.service-website-page #website-design-examples :is(.hero-image-orbit__status, .hero-image-orbit__status-heading > span, .hero-image-orbit__status-heading > strong) { color: var(--genre-ink); transition: none; }
body.service-website-page #website-design-examples .hero-image-orbit__status-heading > span,
body.service-website-page #website-design-examples .hero-image-orbit__status-progress { display: none; }
body.service-website-page #website-design-examples .hero-image-orbit__status-progress span { background: var(--genre-ink); }
body.service-website-page #website-design-examples :is(.hero-image-orbit__status-progress, .hero-image-orbit__status-progress span) { transition: none; }
body.service-website-page #website-design-examples :is(.hero-image-orbit__title, .hero-image-orbit__title h2, .hero-image-orbit__eyebrow, .hero-image-orbit__controls button) { color: var(--genre-ink); transition: none; }
body.service-website-page #website-design-examples .hero-image-orbit__eyebrow {
  margin-bottom: 24px;
  font-size: clamp(42px, 4.2vw, 64px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .045em;
}
body.service-website-page #website-design-examples .hero-image-orbit__eyebrow::after { display: none; }
@media (max-width: 900px) {
  body.service-website-page #website-design-examples .hero-image-orbit__eyebrow {
    margin-bottom: 16px;
    font-size: clamp(38px, 10vw, 54px);
  }
  /* Give the mobile gallery its original light surface, independent of COLOR. */
  body.service-website-page #website-design-examples {
    --genre-surface: #eaf1f5;
    --genre-ink: #4a4d4b;
  }
  body.service-website-page #website-design-examples .hero-image-orbit__title h2 {
    font-size: clamp(20px, 5.4vw, 26px);
    letter-spacing: .025em;
    white-space: nowrap;
  }
  body.service-website-page #website-design-examples .hero-image-orbit__title h2 span {
    display: inline;
  }
}
body.service-website-page #website-design-examples .hero-image-orbit__eyebrow::after { background: currentColor; opacity: .4; }
body.service-website-page #website-design-examples .hero-image-orbit__title::before { background: currentColor; opacity: .3; }
body.service-website-page #website-design-examples .hero-image-orbit__controls button:focus-visible { outline-color: currentColor; }
body.service-website-page.is-home-linear:has(#website-design-examples[data-genre-in-view="true"]) .eluna-global-header:not(.is-menu-open) { color: #4a4d4b; }
@media (min-width: 901px) {
  body.service-website-page #website-design-examples { min-height: 0; }
  body.service-website-page #website-design-examples .hero-image-orbit__stage { height: max(600px, 92svh); }
  body.service-website-page #website-design-examples .hero-image-orbit__title {
    display: flex;
    align-items: flex-end;
    gap: clamp(20px, 2vw, 32px);
  }
  body.service-website-page #website-design-examples .hero-image-orbit__eyebrow {
    flex: none;
    margin-bottom: 0;
  }
  body.service-website-page #website-design-examples .hero-image-orbit__title h2 {
    flex: none;
    margin-bottom: 13px;
    font-size: clamp(18px, 1.55vw, 24px);
    line-height: 1.1;
    white-space: nowrap;
  }
  body.service-website-page #website-design-examples .hero-image-orbit__title h2 span { display: inline; }
  body.service-website-page #website-design-examples .hero-image-orbit__viewport { inset: 20% 0 0; }
  body.service-website-page #website-design-examples .hero-image-orbit__controls { top: 60%; }
}
@media (min-width: 901px) and (max-width: 1000px) {
  body.service-website-page #website-design-examples .hero-image-orbit__title { gap: 14px; }
  body.service-website-page #website-design-examples .hero-image-orbit__title h2 { font-size: clamp(18px, 2vw, 20px); }
}
@media (prefers-reduced-motion: reduce) {
  body.service-website-page #website-design-examples,
  body.service-website-page #website-design-examples * { transition: none; }
}