/* Optional finish. Load after scene.css; cinematic-finish.js owns the opt-in. */
html[data-cinematic-finish] #aperture {
  isolation: isolate;
  --finish-grain-opacity: .22;
}

/* Grade the complete photographic world so wine/repair/window plates match.
   Text and controls are siblings, outside this filter. Keep the warm lamps. */
html[data-cinematic-finish] #world {
  /* No blur (September 30, GPU budget): 0.12 px was invisible, but a blur makes the whole world a filtered surface
     redrawn on every frame the scene moves. */
  filter: saturate(.92) contrast(1.045) brightness(1.035);
}

/* Replace the existing vignette; never stack another dark overlay over it. */
html[data-cinematic-finish] #aperture::after {
  background:
    linear-gradient(180deg, #090d0c24, transparent 24%, transparent 68%, #090d0c38),
    radial-gradient(ellipse at 50% 45%, transparent 36%, #070a0748 100%);
}

/* Screen-space grain: deliberately outside #world's camera transform.
   z=1 is above the photographic world, below its vignette and all copy/UI. */
.cinematic-grain {
  position: absolute;
  inset: -64px;
  z-index: 1;
  pointer-events: none;
  background-repeat: repeat;
  background-size: 192px 192px;
  opacity: var(--finish-grain-opacity, .22);
  mix-blend-mode: soft-light;
  animation: cinematic-grain .72s steps(1, end) infinite;
  animation-play-state: paused;
}
html[data-cinematic-finish] .cinematic-grain[data-running="true"] {
  animation-play-state: running;
}
body.static .cinematic-grain,
body.hero-away .cinematic-grain,
body.page-hidden .cinematic-grain,
html[data-cinematic-finish="static"] .cinematic-grain {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  .cinematic-grain { animation: none !important; }
}
@media (max-aspect-ratio: 1/1) {
  html[data-cinematic-finish] #aperture { --finish-grain-opacity: .18; }
}

/* Twelve discrete positions per cycle, no smooth crawl, brightness pulse or zoom. */
@keyframes cinematic-grain {
  0%, 100% { transform: translate(0, 0); }
  8.333% { transform: translate(-37px, 19px); }
  16.667% { transform: translate(23px, -41px); }
  25% { transform: translate(-11px, 47px); }
  33.333% { transform: translate(43px, 7px); }
  41.667% { transform: translate(-29px, -31px); }
  50% { transform: translate(17px, 37px); }
  58.333% { transform: translate(47px, -17px); }
  66.667% { transform: translate(-43px, 29px); }
  75% { transform: translate(31px, -47px); }
  83.333% { transform: translate(-19px, -7px); }
  91.667% { transform: translate(7px, 43px); }
}

/* Quiet split tone belongs to the photograph, underneath darkness and black frames. */
html[data-cinematic-finish] #world::after{content:'';position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(180deg,#edc98b22,transparent 45%,#24423548);mix-blend-mode:soft-light;opacity:.65}
/* The grain draws without a filter: a 0.2 px blur was invisible but made the whole screen a filtered layer. */
.cinematic-grain{filter:none}