.film-options[hidden] { display: none !important; }
.film-options { position: absolute; z-index: 3; left: 50%; bottom: var(--film-bottom-gap, 12px); transform: translateX(-50%); width: min(600px, calc(100% - 24px)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 5px; border: 1px solid #ffffff50; border-radius: 12px; background: #101923ed; box-shadow: 0 4px 18px #0003; animation: film-options-in .22s ease-out; box-sizing: border-box; }
.film-options button { appearance: none; display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 48px; padding: 8px 10px; border: 1px solid transparent; border-radius: 7px; background: transparent; color: #fff; font-family: inherit; font-size: 14px; line-height: 1.25; font-weight: 600; cursor: pointer; text-align: center; }
.film-options button::before { content: ''; flex: 0 0 8px; height: 8px; border-radius: 50%; background: #efd2a1; }
.film-options button[data-film-scene=seahawks]::before { background: linear-gradient(90deg,#24518a 50%,#69be28 50%); }
.film-options button[data-film-scene=christmas]::before { background: linear-gradient(90deg,#f1524c 50%,#69b963 50%); }
.film-options button[data-film-scene=july4]::before { background: linear-gradient(90deg,#e95659 33%,#fff 33% 66%,#6395f0 66%); }
.film-options button:hover { background: #ffffff20; }
.film-options button[aria-pressed=true] { background: #fff5e6; color: #202628; border-color: #edd4a9; }
.film-options button:focus-visible { outline: 3px solid #edbc70; outline-offset: 2px; }
@keyframes film-options-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
/* The same approved film controller serves the homepage and the review previews. */
.film-hero { height: 400svh; position: relative; background: #fff; }
.film-hero .stage { position: sticky; top: var(--header-height); min-height: calc(100svh - var(--header-height)); background: #fff; }
.film-hero .picture { position: relative; width: 100%; height: min(calc(100svh - var(--header-height)), 50vw); margin: 0; overflow: hidden; }
.film-hero .picture img, .film-hero .picture video { position: absolute; display: block; width: 100%; height: 100%; object-fit: cover; }
.film-hero [hidden] { display: none !important; }
.film-hero .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.film-skip { position: absolute; top: 8px; right: 12px; z-index: 5; padding: 10px 16px; background: white; color: #202628; transform: translateY(-200%); }
.film-skip:focus { transform: none; }
.film-hero[data-state=reduced] { height: auto; }
@media (max-width: 640px) {
  .film-options { width: calc(100% - 16px); gap: 2px; padding: 4px; border-radius: 9px; }
  .film-options button { flex-direction: column; gap: 5px; padding: 6px 2px; font-size: 11px; min-height: 48px; border-radius: 5px; }
  .film-options button::before { flex-basis: 6px; width: 15px; height: 6px; border-radius: 3px; }
  .film-hero .picture { top: 0; bottom: auto; height: min(calc(100svh - var(--header-height)), calc(100vw * 7 / 6)); }
  .film-hero .picture img, .film-hero .picture video { object-fit: cover; object-position: center 58.2%; }
  .film-hero .stage { height: auto; }
  .film-hero .hero-bottom { padding-block: 20px; width: calc(100% - 40px); }
  .film-hero .hero-copy { padding-bottom: 12px; }
  .film-hero .hero-summary { padding-bottom: 0; }
  .film-hero .hero-summary p { font-size: 15px; line-height: 1.5; }
  .film-hero h1 { font-size: 32px; }
  .film-hero[data-state=reduced] { height: auto; }
}
@media (prefers-reduced-motion: reduce) { .film-options { animation: none; } .film-hero { height: auto; } .film-hero .stage { position: relative; top: 0; } }


/* Keep retry buttons at the same scroll position if a film fails mid-visit. */
.scene[data-state=error] { height: 400svh; }
@media (prefers-reduced-motion: reduce) { .scene[data-state=error] { height: auto; } }

/* Approved luminous selector: the same crisp artwork, flow and balance as the design preview. */
.film-options.orb-selector { overflow: hidden; isolation: isolate; width: auto; display: flex; align-items: center; gap: 0; padding: 3px; border: 1px solid #ffffff38; border-radius: 99px; background: linear-gradient(155deg,#e8edf038,#d1dce018 50%,#dce4e528),#18212eaa; box-shadow: inset 0 1px 0 #ffffff26,inset 0 -1px 0 #ffffff0a,0 5px 20px #00000018; color: #e3e8e9; }
.orb-selector button { display: grid; place-items: center; flex: none; width: 48px; height: 48px; min-height: 48px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; transition: background .15s; }
.orb-selector button::before { content: none; }
.orb-selector button:hover { background: #ffffff15; }
.orb-selector button:active { background: #ffffff28; }
.orb-selector button[aria-pressed=true] { background: transparent; color: inherit; }
.orb-selector button:focus-visible { outline: 2px solid #ffd995; outline-offset: 2px; }
.orb-selector svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.orb-selector .palettes { display: flex; align-items: center; gap: 11px; padding: 0 6px; }
.orb-selector [data-orb-motion] { width: 44px; background: transparent; }
.orb-selector [data-orb-motion]:disabled { cursor: default; }
.orb-selector .swatch { --orb-position: 0% 0%; position: relative; display: block; flex: none; width: 38px; height: 38px; border-radius: 50%; isolation: isolate; filter: brightness(1.5); }
.orb-selector .swatch.side { width: 20px; height: 20px; opacity: .64; }
.orb-selector .swatch:not(.side) { filter: brightness(1.68); }
.orb-selector .swatch[data-scene=seahawks] { --orb-position: 100% 0%; }
.orb-selector .swatch[data-scene=christmas] { --orb-position: 0% 100%; }
.orb-selector .swatch[data-scene=july4] { --orb-position: 100% 100%; }
.orb-selector .swatch::before { content: ''; position: absolute; width: 140%; height: 140%; left: -20%; top: -20%; border-radius: 50%; pointer-events: none; background: url('assets/scene-orbs/luminous-orbs.png') var(--orb-position) / 200% 200% no-repeat; mask-image: radial-gradient(circle closest-side,#000 87%,transparent 100%); }
.orb-selector .swatch[data-orb-flow=ready]::before { display: none; }
.film-retry { position: absolute; z-index: 4; left: 50%; bottom: calc(var(--film-bottom-gap, 12px) + 65px); transform: translateX(-50%); min-height: 44px; border: 1px solid #ffffff50; border-radius: 6px; background: #101923ed; color: white; padding: 8px 16px; }
@media (prefers-reduced-motion: reduce) { .orb-selector button { transition: none; } }

/* One crisp outgoing frame dissolves as the new house and palette appear together. */
.picture .film-dissolve { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.film-hero .picture .film-dissolve { object-fit: cover; }
.orb-selector .orb-dissolve { position: absolute; z-index: 1; left: -20%; top: -20%; width: 140%; height: 140%; pointer-events: none; }
@media (max-width: 640px) { .film-hero .picture .film-dissolve { object-position: center 58.2%; } }
.scene[data-format=phone] .picture .film-dissolve { object-fit: cover; object-position: center 58.2%; }

/* Keep copy geometry stable; keyboard focus preserves an active link on reverse scroll. */
.film-hero .hero-bottom { transition: opacity .22s ease-out; }
.film-hero[data-controls-visible="false"] .hero-bottom:not(:focus-within) { opacity: 0; visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .film-hero .hero-bottom { transition: none; } }

/* Desktop copy shares the scene; phones retain their unobstructed portrait film. */
@media (min-width: 1000px) and (min-aspect-ratio: 4/3) {
  .film-hero .picture { height: min(calc(100svh - var(--header-height)), 70vw); }
  .film-hero .hero-bottom { position: absolute; z-index: 2; top: clamp(36px, 5vw, 96px); left: 4%; display: block; width: 28%; margin: 0; padding: 0; color: #fff; text-shadow: 0 2px 18px #06101bb3; }
  .film-hero .hero-copy { padding: 0; }
  .film-hero h1 { font-size: clamp(36px, 3.5vw, 66px); font-weight: 500; letter-spacing: -.045em; }
  .film-hero .hero-summary { max-width: 24ch; margin: 22px 0 0; justify-self: start; }
  .film-hero .hero-summary p { color: #fff; font-size: clamp(15px, 1.1vw, 18px); line-height: 1.6; margin-bottom: 12px; }
  .film-hero .hero-summary .text-link { display: none; }
  .film-hero .picture::after { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(100deg,#06101b80,transparent 38%); pointer-events: none; }
  .film-hero .film-options.orb-selector { bottom: calc(max(18px, var(--film-bottom-gap, 12px)) + 40px); }
  .film-hero .film-retry { bottom: calc(max(18px, var(--film-bottom-gap, 12px)) + 105px); }
}

/* Phones open lit and scroll normally; horizontal swipes change the lighting. */
@media (max-width: 640px), (max-width: 1024px) and (pointer: coarse) {
  .film-hero.scene { height: auto; }
  .film-hero .stage { position: relative; top: 0; min-height: 0; }
  .film-hero .film-skip { display: none; }
  .film-hero .hero-summary .text-link { display: inline-flex; }
  .orb-selector { touch-action: pan-y pinch-zoom; user-select: none; }
  .film-hero[data-state=still] .picture img { animation: mobile-lights-in .6s ease-out; }
}
@keyframes mobile-lights-in { from { opacity: .65; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .film-hero .picture img { animation: none; } }