/* Cohesive optical treatment, v48.
   Evolve the v44 wine / chrome palette; keep the v45 responsive BUY fixes.
   ?look=baseline bypasses this file. No changes to source art or its compositor.
   Hero atmosphere is behind the object in WebGL, never a screen-blended photo.
   CSS layers: background 0, source art 1, copy scrim 2, content 3+;
   Fixed camera layers: light 89, vignette 90, grain 91; header 100.
*/

html.film-look {
  --film-black: #080709;
  --film-silver: #f2eee9;
  --film-muted: #c1b8bd;
  --film-accent: #ff3f98;
  --film-grain-opacity: .12;
}

/* No global coloured wash or diagonal lens stripe. The grain below deliberately
   lifts deep shadows slightly, matching the user's preferred soft exposure. */
.film-look .fx-vignette {
  background: radial-gradient(ellipse 110% 100% at 50% 48%, transparent 62%, rgb(4 4 6 / .16));
  opacity: 1;
}

.film-look .fx-vignette::before,
.film-look .fx-vignette::after {
  content: none;
}

.film-look .fx-grain {
  inset: 0;
  width: auto;
  height: auto;
  overflow: hidden;
  /* One flat raster: no transformed child or promoted moving texture.
     Normal alpha keeps grain visible in shadows. Contrast blend modes suppress
     it there and make the same texture read as hard noise on highlights only. */
  background: url('./assets/film/grain-v1.png') repeat;
  background-size: 256px 256px;
  mix-blend-mode: normal;
  opacity: var(--film-grain-opacity);
  filter: none;
  transform: none;
  animation: film-density 800ms steps(1, end) infinite;
  animation-play-state: paused;
  transition: none;
  will-change: auto;
}

.film-look .fx-grain::before {
  content: none;
}

.film-look[data-film-motion='running'] .fx-grain {
  animation-play-state: running;
}

/* Repaint only the fixed grain plane at 10 exposures/sec. Deliberately use
   background offsets, not a separately composited transform animation. */
@keyframes film-density {
  0% { background-position: 0 0; }
  12.5% { background-position: -64px -32px; }
  25% { background-position: 48px -96px; }
  37.5% { background-position: -112px 64px; }
  50% { background-position: 80px 112px; }
  62.5% { background-position: -32px -128px; }
  75% { background-position: 112px -64px; }
  87.5% { background-position: -96px 32px; }
}

/* Diagnostic comparison only: ?grain=legacy restores the v46 grain path. */
html.film-look.grain-legacy {
  --film-grain-opacity: .12;
}

.film-look.grain-legacy .fx-grain {
  background: none;
  mix-blend-mode: soft-light;
  animation: none;
}

.film-look.grain-legacy .fx-grain::before {
  content: '';
  position: absolute;
  inset: -160px;
  background: url('./assets/film/grain-v1.png') repeat;
  background-size: 256px 256px;
  animation: film-exposure 800ms steps(1, end) infinite;
  animation-play-state: paused;
  will-change: auto;
}

.film-look.grain-legacy[data-film-motion='running'] .fx-grain::before {
  animation-play-state: running;
  will-change: transform;
}

/* Pixel-aligned offsets of a single seeded tile, not a simulated film scan. */
@keyframes film-exposure {
  0% { transform: translate3d(0, 0, 0); }
  12.5% { transform: translate3d(-64px, -32px, 0); }
  25% { transform: translate3d(48px, -96px, 0); }
  37.5% { transform: translate3d(-112px, 64px, 0); }
  50% { transform: translate3d(80px, 112px, 0); }
  62.5% { transform: translate3d(-32px, -128px, 0); }
  75% { transform: translate3d(112px, -64px, 0); }
  87.5% { transform: translate3d(-96px, 32px, 0); }
}

/* One exposure across the whole page. Section observers must not switch this
   fixed camera texture off or halve its density when two chapters share view. */

html.film-look.grain-off .fx-grain { display: none; }

/* LIGHT STUDY: two diffuse apertures share the same optical plane as grain.
   Static turbulence breaks up the cones; only their transform / opacity moves.
   No filter is applied to text, source images, video or WebGL. ?rays=off is the
   grain-only comparison. This is an optical overlay, not simulated scene light. */
.fx-light { display: none; }

/* The light is authored as two cached optical plates. Chapter state moves the
   shared camera; each plate keeps a slower independent exposure drift. */
html.film-look {
  --ray-shift-x: 6%;
  --ray-shift-y: -5%;
  --ray-rotation: -1.5deg;
  --ray-scale: 1.09;
  --ray-chapter-opacity: .9;
}

html.film-look[data-atmosphere='hero'][data-voxel-phase='B'] {
  --ray-shift-x: -7%;
  --ray-shift-y: 3%;
  --ray-rotation: 1.2deg;
  --ray-scale: 1.11;
  --ray-chapter-opacity: .96;
}

html.film-look[data-atmosphere='hero'][data-voxel-phase='C'] {
  --ray-shift-x: 7%;
  --ray-shift-y: -2%;
  --ray-rotation: -1deg;
  --ray-scale: 1.08;
  --ray-chapter-opacity: .86;
}

html.film-look[data-atmosphere='origin'] {
  --ray-shift-x: -8%;
  --ray-shift-y: 2%;
  --ray-rotation: 1.5deg;
  --ray-scale: 1.1;
  --ray-chapter-opacity: .84;
}

html.film-look[data-atmosphere='mechanics'] {
  --ray-shift-x: 8%;
  --ray-shift-y: 6%;
  --ray-rotation: -1.2deg;
  --ray-scale: 1.08;
  --ray-chapter-opacity: .68;
}

html.film-look[data-atmosphere='buy'] {
  --ray-shift-x: -7%;
  --ray-shift-y: 4%;
  --ray-rotation: 1.5deg;
  --ray-scale: 1.11;
  --ray-chapter-opacity: .94;
}

html.film-look[data-atmosphere='proof'] {
  --ray-shift-x: 8%;
  --ray-shift-y: -4%;
  --ray-rotation: -.8deg;
  --ray-scale: 1.07;
  --ray-chapter-opacity: .14;
}

html.film-look[data-atmosphere='epilogue'] {
  --ray-shift-x: -6%;
  --ray-shift-y: 4%;
  --ray-rotation: 1.2deg;
  --ray-scale: 1.09;
  --ray-chapter-opacity: .78;
}

.film-look.film-rays .fx-light {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 89;
  overflow: hidden;
  pointer-events: none;
  opacity: .82;
  mask-image: linear-gradient(180deg, #000 0%, #000 42%, rgb(0 0 0 / .72) 72%, rgb(0 0 0 / .2) 100%);
}

.fx-light__parallax {
  position: absolute;
  inset: -10%;
  opacity: var(--ray-chapter-opacity);
  transform: translate3d(var(--ray-shift-x), var(--ray-shift-y), 0)
    rotate(var(--ray-rotation)) scale(var(--ray-scale));
  transform-origin: 64% 0;
  transition:
    transform 1600ms cubic-bezier(.16, 1, .3, 1),
    opacity 1100ms ease;
  will-change: auto;
}

.fx-light__field {
  position: absolute;
  inset: -12%;
  transform-origin: 64% -8%;
  animation-play-state: paused;
  /* Safari moves decoded PNG plates; no filter, gradient or geometry changes
     after the atomic raster swap. */
  will-change: auto;
}

.fx-light__field::before {
  content: '';
  position: absolute;
  inset: 0;
  filter: url('#film-aperture-softness');
  transform: translateZ(0);
  backface-visibility: hidden;
}

.fx-light__field.is-rasterized::before {
  content: none;
}

.fx-light__raster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.fx-light__field--key {
  opacity: .66;
  animation: film-light-breathe 22s cubic-bezier(.45, .05, .3, .98) infinite alternate;
  animation-play-state: paused;
}

.fx-light__field--key::before {
  background:
    radial-gradient(ellipse 22% 34% at 72% 34%,
      rgb(180 222 233 / .13) 0%,
      rgb(87 151 182 / .065) 42%,
      rgb(61 119 154 / .025) 72%,
      transparent 100%),
    conic-gradient(from 170deg at 66% -14%,
      transparent 0deg,
      rgb(112 168 194 / .03) 15deg,
      rgb(166 209 225 / .16) 21deg,
      rgb(207 233 239 / .32) 26deg,
      rgb(82 145 178 / .12) 31deg,
      rgb(111 173 199 / .05) 36deg,
      rgb(229 160 112 / .09) 41deg,
      rgb(205 139 102 / .035) 46deg,
      transparent 54deg);
}

.fx-light__field--echo {
  opacity: .44;
  animation: film-light-echo 31s cubic-bezier(.42, 0, .25, 1) -11s infinite alternate;
  animation-play-state: paused;
}

.fx-light__field--echo::before {
  background:
    radial-gradient(ellipse 23% 25% at 62% 62%,
      transparent 0%,
      transparent 58%,
      rgb(222 164 121 / .045) 68%,
      rgb(255 63 152 / .12) 76%,
      rgb(124 179 201 / .045) 84%,
      transparent 94%,
      transparent 100%),
    conic-gradient(from 133deg at 56% -16%,
      transparent 0deg,
      rgb(106 167 193 / .025) 15deg,
      rgb(255 63 152 / .035) 22deg,
      rgb(229 160 112 / .095) 27deg,
      rgb(111 174 199 / .09) 33deg,
      rgb(75 135 167 / .03) 40deg,
      transparent 47deg);
}

.film-look[data-film-motion='running'] .fx-light__field {
  animation-play-state: running;
  will-change: transform, opacity;
}

.film-look[data-film-motion='running'] .fx-light__parallax {
  will-change: transform, opacity;
}

@keyframes film-light-breathe {
  0% {
    transform: translate3d(-5%, -3%, 0) rotate(-3deg) scale(1.07);
    opacity: .58;
  }
  36% {
    transform: translate3d(2.8%, 4.5%, 0) rotate(.5deg) scale(1.11);
    opacity: .92;
  }
  68% {
    transform: translate3d(-2.5%, 1.8%, 0) rotate(-1.2deg) scale(1.09);
    opacity: .72;
  }
  100% {
    transform: translate3d(6%, -1.5%, 0) rotate(2.6deg) scale(1.08);
    opacity: .68;
  }
}

@keyframes film-light-echo {
  0% {
    transform: translate3d(5%, -4%, 0) rotate(2.5deg) scale(1.09);
    opacity: .3;
  }
  56% {
    transform: translate3d(-5.5%, 4.5%, 0) rotate(-1.8deg) scale(1.12);
    opacity: .58;
  }
  100% {
    transform: translate3d(2%, 1%, 0) rotate(-3deg) scale(1.08);
    opacity: .38;
  }
}

@media (max-width: 768px) {
  .film-look.film-rays .fx-light { opacity: .54; }
}

@media (prefers-reduced-motion: reduce) {
  .film-look .fx-light__field,
  .film-look .fx-light__parallax {
    animation: none;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

.film-look[data-film-motion='static'] .fx-light__field,
.film-look[data-film-motion='static'] .fx-light__parallax,
.film-look.has-reduced-hero .fx-light__field,
.film-look.has-reduced-hero .fx-light__parallax {
  animation: none;
  transform: none;
  transition: none;
  will-change: auto;
}

/* HERO: coloured air is rendered behind the chrome by the existing scene. */
html.film-look.has-voxel-draft .hero__voxel-draft {
  background: var(--film-black);
  box-shadow: none;
}

html.film-look.has-voxel-draft .hero__voxel-draft[data-lookdev='self-pbr']::before {
  content: none;
  display: none;
}

.film-look.has-voxel-draft .hero__voxel-draft::after {
  background:
    linear-gradient(90deg, rgb(8 7 9 / .98), rgb(8 7 9 / .72) 29%, transparent 58%),
    linear-gradient(180deg, rgb(8 7 9 / .16), transparent 24% 76%, rgb(8 7 9 / .66));
}

.film-look .hero__title-line--accent,
.film-look.has-reduced-hero .hero__title-line--accent {
  color: var(--film-accent);
  text-shadow: none;
}

.film-look.has-reduced-hero .hero {
  background:
    radial-gradient(ellipse 42% 74% at 76% 42%, rgb(107 22 63 / .34), transparent 75%),
    linear-gradient(112deg, var(--film-black), #120910 62%, var(--film-black));
}

.film-look.has-reduced-hero .hero__reduced-art {
  background: none;
}

/* ORIGIN: preserve the launch image, remove the simulated glossy laminate. */
.film-look .origin {
  background: var(--film-black);
}

.film-look .origin::after {
  background:
    radial-gradient(ellipse 32% 60% at 58% 48%, rgb(100 22 58 / .20), transparent 75%),
    linear-gradient(112deg, var(--film-black), #10090e 60%, var(--film-black));
  border-block-color: rgb(242 238 233 / .07);
}

.film-look .origin__artifact-field::before,
.film-look .origin__artifact-field::after {
  content: none;
}

.film-look .origin__artifact::before {
  background: radial-gradient(ellipse, rgb(141 30 82 / .17), transparent 72%);
}

.film-look .origin__artifact-field {
  background: #0c080c;
  box-shadow: 0 28px 72px rgb(3 3 5 / .42), 0 0 0 1px rgb(242 238 233 / .14);
}

.film-look .origin__artifact-field img {
  filter: none;
}

/* BUY: wine bounce follows Lord's existing magenta rim. No circular neon halo.
   Wide, overlapping light / shadow fields soften the old hard-edged aperture. */
.film-look .buy-section::after {
  background:
    radial-gradient(ellipse 32% 62% at 37% 48%, rgb(130 25 72 / .27), transparent 76%),
    radial-gradient(ellipse 58% 70% at 49% 53%, rgb(61 20 39 / .24), transparent 78%),
    linear-gradient(108deg, var(--film-black), #130b11 43%, #0d090c 66%, var(--film-black));
}

html.film-look .buy-section::before {
  z-index: 0;
  inset: 0 auto;
  left: 50%;
  width: 100vw;
  background:
    linear-gradient(180deg, var(--film-black), transparent 22% 75%, var(--film-black)),
    linear-gradient(112deg, transparent 12%, rgb(8 7 9 / .68) 28%, transparent 47%, rgb(8 7 9 / .45) 70%),
    radial-gradient(ellipse 23% 54% at 41% 48%, rgb(217 84 142 / .20), transparent 74%);
  filter: none;
  opacity: 1;
  transform: translateX(-50%);
  transition: none;
}

.film-look .buy-section__mascot-wrap::before {
  /* Off-axis reflected light. Source video and contact shadow remain untouched. */
  inset: 8% -24% 18%;
  background: radial-gradient(ellipse at 62% 48%, rgb(157 44 94 / .17), transparent 73%);
  filter: none;
}

.film-look .buy-section__panel--external::before {
  content: none;
}

.film-look .buy-panel__header--external h2 {
  gap: 7px;
  line-height: .84;
}

.film-look .buy-panel__header--external h2 span {
  color: #f1eaee;
  font-size: clamp(2.75rem, 4vw, 3.8rem);
  font-weight: 420;
  font-stretch: 108%;
  letter-spacing: -.035em;
}

.film-look .buy-panel__header--external h2 strong {
  color: var(--film-accent);
  font-size: clamp(4.8rem, 7vw, 6rem);
  font-weight: 760;
  font-stretch: 72%;
  letter-spacing: -.038em;
  white-space: nowrap;
  text-shadow: none;
}

.film-look .buy-panel__external-copy {
  max-width: 36ch;
  margin-block: 30px 28px;
  color: var(--film-muted);
  line-height: 1.65;
}

.film-look .buy-panel__external-actions {
  display: flex;
  align-items: center;
  gap: 28px;
}

.film-look .buy-panel__external-actions .btn {
  white-space: nowrap;
  width: auto;
  min-height: 54px;
  flex: 0 0 auto;
}

.film-look .buy-panel__external-cta {
  min-width: 204px;
  color: #171317;
  background: var(--film-silver);
  border-color: var(--film-silver);
  box-shadow: none;
}

.film-look .buy-panel__external-cta:hover {
  color: #171317;
  background: #f3e8ed;
  border-color: #f3e8ed;
  box-shadow: 0 4px 26px rgb(205 133 165 / .08);
}

.film-look .buy-panel__external-chart {
  padding-inline: 0;
  color: #c7c0c4;
  border-color: transparent;
  background: transparent;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-color: rgb(199 192 196 / .32);
}

.film-look .buy-panel__external-chart:hover {
  color: var(--film-silver);
  text-decoration-color: currentColor;
}

.film-look .buy-panel__external-proof {
  margin-top: 36px;
  border-top-color: rgb(228 225 220 / .18);
  border-bottom: 0;
}

.film-look .buy-panel__external-proof > div {
  border-right: 0;
}

.film-look .buy-panel__external-proof dt,
.film-look .buy-contract-identity__source > span {
  color: #a29ba0;
  letter-spacing: .03em;
}

.film-look .buy-contract-identity {
  border-bottom: 0;
  padding-block: 18px 14px;
}

.film-look .buy-contract-identity__source code {
  font-size: .6875rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.film-look .buy-panel__external-note {
  margin-top: 20px;
  color: #aaa4a9;
}

.film-look .buy-panel__external-note strong {
  color: #d5cfd3;
  font-weight: 550;
}

@media (min-width: 1101px) {
  .film-look .buy-section {
    min-height: 100svh;
    padding-block: clamp(72px, 6.2vw, 100px);
  }
}

@media (min-width: 1101px) and (max-height: 800px) {
  .film-look .buy-section { padding-block: 48px; }
  .film-look .buy-section__panel--external {
    align-self: start;
    padding-block: 12px;
  }
}

@media (max-width: 900px) {
  .film-look .buy-section {
    width: min(100% - 40px, 680px);
    min-height: 0;
    margin-inline: auto;
    padding: 56px 0 40px;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 0;
  }

  .film-look .buy-section__panel--external {
    min-width: 0;
    order: 1;
    margin: 0;
    padding: 0;
  }

  .film-look .buy-section__mascot-wrap {
    position: relative;
    inset: auto;
    order: 2;
    width: min(66vw, 290px);
    max-width: 100%;
    margin: 0;
    justify-self: center;
    align-self: start;
  }

  .film-look .buy-section::after {
    background:
      radial-gradient(ellipse 65% 32% at 54% 74%, rgb(116 26 66 / .28), transparent 76%),
      linear-gradient(180deg, var(--film-black), #110a0f 65%, var(--film-black));
  }

  html.film-look .buy-section::before {
    background:
      linear-gradient(180deg, var(--film-black), transparent 50% 78%, var(--film-black)),
      radial-gradient(ellipse 44% 28% at 64% 75%, rgb(196 65 124 / .15), transparent 75%);
  }
}

@media (max-width: 768px) {
  html.film-look { --film-grain-opacity: .09; }
  html.film-look.grain-legacy { --film-grain-opacity: .085; }

  .film-look .buy-panel__header--external h2 {
    gap: 6px;
  }

  .film-look .buy-panel__header--external h2 span {
    font-size: clamp(2.5rem, 11.5vw, 3rem);
  }

  .film-look .buy-panel__header--external h2 strong {
    font-size: clamp(3.7rem, 17.5vw, 4.75rem);
  }

  .film-look .buy-panel__external-copy {
    margin-block: 25px;
  }

  .film-look .buy-panel__external-actions {
    gap: 24px;
  }

  .film-look .buy-panel__external-cta {
    min-width: 164px;
  }

  .film-look .buy-panel__external-proof {
    margin-top: 30px;
  }

  .film-look .buy-contract-identity__source code {
    font-size: .625rem;
  }

  .film-look.has-voxel-draft .hero__voxel-draft::after {
    background: linear-gradient(180deg, rgb(8 7 9 / .04), transparent 38%, rgb(8 7 9 / .22) 52%, rgb(8 7 9 / .98) 83%);
  }

  /* B / C put copy higher in the frame than A. Keep its left-hand safe-zone
     quiet at intermediate phone widths as well as at the narrow fixture. */
  .film-look[data-voxel-phase='B'] .hero__voxel-draft::after,
  .film-look[data-voxel-phase='C'] .hero__voxel-draft::after {
    background:
      linear-gradient(90deg, rgb(8 7 9 / .94), rgb(8 7 9 / .84) 42%, rgb(8 7 9 / .14) 86%),
      linear-gradient(180deg, transparent 20%, rgb(8 7 9 / .4) 66%, rgb(8 7 9 / .88));
  }
}

/* No new render loop, layout animation, or moving atmospheric backplate. */
@media (prefers-reduced-motion: reduce) {
  .film-look .fx-grain { transition: none; animation: none; }
  .film-look .fx-grain::before {
    animation: none;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

.film-look[data-film-motion='static'] .fx-grain,
.film-look.has-reduced-hero .fx-grain,
.film-look[data-film-motion='static'] .fx-grain::before,
.film-look.has-reduced-hero .fx-grain::before {
  animation: none;
  transform: none;
  transition: none;
  will-change: auto;
}

/* OBJECT-BOUND STAGE LIGHT, v49.
   The user's references are translated into local sources: black air, broken
   density inside each shaft, a restrained magenta rim and a grounded pool.
   Geometry is authored once; cinematic.js changes transform / opacity only. */
html.film-look .fx-light {
  display: none !important;
}

.scene-light,
.scene-light__surface {
  display: none;
  pointer-events: none;
  user-select: none;
}

.film-look.film-rays .scene-light,
.film-look.film-rays .scene-light__surface {
  display: block;
}

.scene-light {
  position: absolute;
  z-index: 0;
  overflow: visible;
}

.scene-light__beam,
.scene-light__pool,
.scene-light__surface {
  position: absolute;
  backface-visibility: hidden;
  transform-origin: center;
}

.scene-light__beam::before,
.scene-light__beam::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

.scene-light.is-light-active .scene-light__beam,
.scene-light.is-light-active .scene-light__pool,
.scene-light.is-light-active + .origin__artifact-field .scene-light__surface {
  will-change: transform, opacity;
}

/* The archival mark receives two independent lamps. Their imperfect cores are
   asymmetric on purpose: a studio setup, not a mirrored neon decoration. */
.film-look .origin::after {
  background:
    linear-gradient(96deg, #080709 0%, #0b080b 47%, #09070a 68%, #080709 100%);
}

.film-look .origin__artifact {
  isolation: isolate;
  overflow: visible;
}

.film-look .origin__artifact::before {
  content: none;
}

.film-look .origin__artifact-field {
  z-index: 2;
  overflow: hidden;
}

.film-look .origin__artifact-field img {
  position: relative;
  z-index: 1;
  display: block;
}

.film-look .origin__artifact figcaption {
  position: relative;
  z-index: 3;
}

.scene-light--origin {
  inset: -52% -92% -38%;
}

.scene-light__beam--origin-left,
.scene-light__beam--origin-right {
  top: 24%;
  width: 74%;
  height: 18%;
  border-radius: 50%;
  opacity: .86;
}

.scene-light__beam--origin-left {
  left: 0;
  transform-origin: 0 50%;
  transform: rotate(10.5deg) scale3d(1, 1.08, 1);
  background:
    radial-gradient(ellipse 13% 72% at 37% 44%, rgb(255 230 240 / .08), transparent 100%),
    radial-gradient(ellipse 9% 58% at 61% 57%, rgb(255 63 152 / .12), transparent 100%),
    linear-gradient(90deg,
      transparent 0%,
      rgb(255 63 152 / .018) 10%,
      rgb(133 31 76 / .075) 28%,
      rgb(255 104 173 / .12) 53%,
      rgb(247 226 234 / .19) 76%,
      rgb(255 63 152 / .075) 90%,
      transparent 100%);
}

.scene-light__beam--origin-right {
  right: 0;
  transform-origin: 100% 50%;
  transform: rotate(-10.5deg) scale3d(1, 1.03, 1);
  background:
    radial-gradient(ellipse 12% 66% at 63% 54%, rgb(236 243 245 / .07), transparent 100%),
    radial-gradient(ellipse 8% 52% at 43% 43%, rgb(112 177 198 / .08), transparent 100%),
    linear-gradient(270deg,
      transparent 0%,
      rgb(221 236 239 / .016) 9%,
      rgb(89 144 166 / .07) 27%,
      rgb(205 230 236 / .13) 53%,
      rgb(247 229 238 / .18) 76%,
      rgb(255 63 152 / .06) 91%,
      transparent 100%);
}

.scene-light__beam--origin-left::before,
.scene-light__beam--origin-right::before {
  inset: 38% 5%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgb(255 240 246 / .2) 50%, transparent);
  opacity: .42;
}

.scene-light__beam--origin-left::after,
.scene-light__beam--origin-right::after {
  inset: 18% 13% 52%;
  border-radius: 50%;
  background: linear-gradient(90deg, transparent, rgb(255 63 152 / .16) 38%, rgb(227 239 241 / .12) 68%, transparent);
  opacity: .58;
  transform: translate3d(0, 48%, 0) rotate(.8deg);
}

.scene-light__pool--origin {
  z-index: 0;
  top: 22%;
  left: 34%;
  width: 32%;
  height: 56%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 46% 54% at 48% 45%, rgb(255 234 242 / .2), rgb(255 63 152 / .11) 38%, transparent 76%),
    radial-gradient(ellipse 78% 64% at 52% 56%, rgb(94 21 54 / .2), transparent 78%);
  opacity: .54;
  transform: scale3d(1.04, 1, 1);
}

.scene-light__surface--origin {
  z-index: 3;
  inset: 10px;
  background:
    radial-gradient(ellipse 32% 54% at 48% 47%, rgb(255 244 248 / .13), transparent 72%),
    linear-gradient(106deg,
      transparent 25%,
      rgb(255 63 152 / .04) 38%,
      rgb(255 241 246 / .14) 49%,
      rgb(137 201 214 / .045) 58%,
      transparent 72%);
  opacity: .44;
  transform: skewX(-8deg);
}

/* Lord is lit as a subject on a dark stage: one overhead cone, one broken rim
   in the air behind the silhouette, and a small pool that meets the throne. */
.film-look .buy-section::after {
  background:
    linear-gradient(108deg, #080709 0%, #0b080b 42%, #0a080a 66%, #080709 100%);
}

html.film-look .buy-section::before,
.film-look .buy-section__mascot-wrap::before {
  content: none;
}

.film-look .buy-section__mascot-wrap {
  isolation: isolate;
  overflow: visible;
}

.film-look .buy-section__mascot-media {
  z-index: 2;
}

.scene-light--buy {
  inset: -22% -46% -10%;
}

.scene-light__beam--buy-key {
  z-index: 0;
  top: -7%;
  left: 27%;
  width: 46%;
  height: 112%;
  clip-path: polygon(43% 0, 57% 0, 91% 100%, 9% 100%);
  transform-origin: 50% 0;
  transform: rotate(-5.5deg) scale3d(1.06, 1.01, 1);
  background:
    radial-gradient(ellipse 45% 18% at 52% 26%, rgb(255 248 250 / .18), transparent 100%),
    linear-gradient(180deg,
      rgb(251 244 247 / .18) 0%,
      rgb(255 152 199 / .15) 18%,
      rgb(255 63 152 / .085) 49%,
      rgb(112 24 62 / .04) 76%,
      transparent 100%);
  opacity: .79;
}

.scene-light__beam--buy-key::before {
  inset: 0 31%;
  clip-path: polygon(41% 0, 59% 0, 88% 100%, 12% 100%);
  background: linear-gradient(180deg, rgb(255 255 255 / .16), rgb(255 79 161 / .1) 42%, transparent 94%);
  opacity: .64;
}

.scene-light__beam--buy-key::after {
  top: 12%;
  right: 18%;
  bottom: 18%;
  left: 38%;
  clip-path: polygon(35% 0, 62% 0, 90% 100%, 4% 100%);
  background: linear-gradient(180deg, rgb(226 240 243 / .12), rgb(255 63 152 / .06) 56%, transparent);
  opacity: .56;
}

.scene-light__beam--buy-rim {
  z-index: 0;
  top: 20%;
  left: 3%;
  width: 74%;
  height: 58%;
  border-radius: 50%;
  transform: rotate(2.5deg) scale3d(1.04, 1, 1);
  background:
    radial-gradient(ellipse 12% 38% at 71% 32%, rgb(238 247 248 / .1), transparent 100%),
    radial-gradient(ellipse 17% 44% at 53% 58%, rgb(255 63 152 / .16), transparent 100%),
    radial-gradient(ellipse 72% 66% at 58% 48%, rgb(126 26 66 / .2), rgb(255 63 152 / .07) 48%, transparent 79%);
  opacity: .59;
}

.scene-light__beam--buy-rim::before {
  inset: 20% 12% 30% 18%;
  border-radius: 50%;
  background:
    linear-gradient(104deg, transparent 12%, rgb(255 63 152 / .12) 38%, transparent 52%),
    linear-gradient(82deg, transparent 35%, rgb(210 234 239 / .08) 51%, transparent 66%);
  opacity: .74;
  transform: rotate(-4deg);
}

.scene-light__pool--buy {
  z-index: 1;
  right: 13%;
  bottom: 9%;
  width: 72%;
  height: 13%;
  border-radius: 50%;
  background:
    radial-gradient(ellipse 42% 44% at 50% 48%, rgb(255 203 227 / .17), rgb(255 63 152 / .1) 42%, transparent 75%),
    radial-gradient(ellipse 76% 72% at 50% 52%, rgb(79 29 54 / .22), transparent 78%);
  opacity: .34;
  transform: scale3d(1.06, .96, 1);
}

@media (max-width: 900px) {
  .scene-light--origin {
    inset: -34% -54% -24%;
    opacity: .82;
  }

  .scene-light__beam--origin-left,
  .scene-light__beam--origin-right {
    top: 24%;
    width: 73%;
    height: 15%;
  }

  .scene-light--buy {
    inset: -17% -34% -7%;
    opacity: .82;
  }

  .scene-light__beam--buy-key {
    left: 25%;
    width: 50%;
  }
}

@media (max-width: 600px) {
  .scene-light--origin {
    inset: -28% -38% -20%;
    opacity: .74;
  }

  .scene-light__beam--origin-left,
  .scene-light__beam--origin-right {
    top: 25%;
    height: 13%;
  }

  .scene-light__surface--origin {
    inset: 8px;
  }

  .scene-light--buy {
    inset: -15% -27% -6%;
    opacity: .76;
  }

  .scene-light__beam--buy-rim {
    left: 8%;
    width: 78%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-light__beam,
  .scene-light__pool,
  .scene-light__surface {
    transition: none;
    will-change: auto;
  }
}

.film-look[data-film-motion='static'] .scene-light__beam,
.film-look[data-film-motion='static'] .scene-light__pool,
.film-look[data-film-motion='static'] .scene-light__surface,
.film-look[data-film-motion='paused'] .scene-light__beam,
.film-look[data-film-motion='paused'] .scene-light__pool,
.film-look[data-film-motion='paused'] .scene-light__surface {
  will-change: auto;
}

/* Reference tuning: once the archival reveal has landed, its lamps may spill
   beyond the figure. The mascot cones get a small, bounded optical softness;
   no viewport-sized filtered layer is introduced. */
.film-look .origin__artifact.reveal-pending.revealed {
  clip-path: none;
}

.film-look .buy-section {
  overflow: clip;
}

.scene-light__beam--buy-key {
  filter: blur(8px);
  background:
    radial-gradient(ellipse 45% 18% at 52% 26%, rgb(255 246 250 / .12), transparent 100%),
    linear-gradient(180deg,
      rgb(247 236 242 / .11) 0%,
      rgb(255 126 184 / .14) 18%,
      rgb(255 63 152 / .09) 48%,
      rgb(104 22 59 / .045) 76%,
      transparent 100%);
}

.scene-light__beam--buy-rim {
  top: 22%;
  left: 7%;
  width: 68%;
  height: 54%;
  filter: blur(10px);
  background:
    radial-gradient(ellipse 10% 36% at 72% 31%, rgb(233 246 248 / .085), transparent 100%),
    radial-gradient(ellipse 15% 40% at 54% 57%, rgb(255 63 152 / .15), transparent 100%),
    radial-gradient(ellipse 68% 62% at 58% 48%, rgb(118 25 63 / .18), rgb(255 63 152 / .055) 44%, transparent 72%);
}

/* The OG lamps need readable direction at normal display brightness. Their
   narrow cores carry the emphasis; the surrounding section remains black. */
.scene-light__beam--origin-left,
.scene-light__beam--origin-right {
  height: 14%;
  filter: blur(4px);
}

.scene-light__beam--origin-left {
  background:
    radial-gradient(ellipse 14% 76% at 39% 46%, rgb(255 235 243 / .14), transparent 100%),
    radial-gradient(ellipse 10% 64% at 63% 55%, rgb(255 63 152 / .2), transparent 100%),
    linear-gradient(90deg,
      transparent 0%,
      rgb(255 63 152 / .03) 9%,
      rgb(142 32 80 / .12) 27%,
      rgb(255 96 169 / .22) 52%,
      rgb(250 229 237 / .31) 76%,
      rgb(255 63 152 / .12) 90%,
      transparent 100%);
}

.scene-light__beam--origin-right {
  background:
    radial-gradient(ellipse 13% 72% at 61% 52%, rgb(239 247 248 / .13), transparent 100%),
    radial-gradient(ellipse 9% 60% at 41% 45%, rgb(110 181 203 / .14), transparent 100%),
    linear-gradient(270deg,
      transparent 0%,
      rgb(220 238 241 / .025) 9%,
      rgb(91 151 174 / .11) 27%,
      rgb(202 231 238 / .21) 52%,
      rgb(250 232 240 / .29) 76%,
      rgb(255 63 152 / .09) 91%,
      transparent 100%);
}

.scene-light__beam--origin-left::before,
.scene-light__beam--origin-right::before {
  background: linear-gradient(90deg, transparent, rgb(255 244 248 / .32) 50%, transparent);
  opacity: .56;
}

/* HYBRID ATMOSPHERE, v50.
   Several translucent fields recreate the warm, smoky reference without a
   single baked overlay. Their overlap changes as each field drifts at a
   different rate; grain supplies texture while text remains on a dry layer. */
.scene-light__haze {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  backface-visibility: hidden;
  transform-origin: center;
}

.scene-light.is-light-active .scene-light__haze {
  will-change: transform, opacity;
}

.film-look .origin__content,
.film-look .origin__lineage {
  position: relative;
  z-index: 2;
}

.scene-light__haze--origin-wine {
  top: 12%;
  left: 10%;
  width: 78%;
  height: 72%;
  background:
    radial-gradient(ellipse 28% 42% at 27% 45%, rgb(111 23 61 / .22) 0%, rgb(89 18 49 / .1) 48%, transparent 78%),
    radial-gradient(ellipse 25% 38% at 67% 36%, rgb(255 63 152 / .2) 0%, rgb(139 27 73 / .11) 46%, transparent 76%),
    radial-gradient(ellipse 36% 29% at 56% 76%, rgb(116 25 67 / .17) 0%, rgb(76 17 44 / .07) 52%, transparent 80%);
  opacity: .62;
}

.scene-light__haze--origin-smoke {
  top: 19%;
  left: 25%;
  width: 52%;
  height: 58%;
  background:
    radial-gradient(ellipse 31% 48% at 31% 39%, rgb(238 211 223 / .085) 0%, rgb(155 79 112 / .045) 48%, transparent 78%),
    radial-gradient(ellipse 26% 39% at 72% 57%, rgb(113 180 199 / .07) 0%, rgb(80 101 118 / .03) 50%, transparent 78%),
    radial-gradient(ellipse 40% 27% at 49% 79%, rgb(255 63 152 / .09) 0%, transparent 76%);
  opacity: .42;
}

.scene-light__haze--buy-wine {
  top: 12%;
  left: 2%;
  width: 80%;
  height: 70%;
  background:
    radial-gradient(ellipse 31% 43% at 28% 43%, rgb(125 27 68 / .24) 0%, rgb(90 20 52 / .11) 50%, transparent 78%),
    radial-gradient(ellipse 26% 35% at 62% 34%, rgb(255 63 152 / .23) 0%, rgb(140 30 76 / .1) 48%, transparent 76%),
    radial-gradient(ellipse 38% 27% at 51% 77%, rgb(131 28 72 / .2) 0%, rgb(73 17 43 / .075) 52%, transparent 80%);
  opacity: .67;
}

.scene-light__haze--buy-smoke {
  top: 23%;
  left: 20%;
  width: 58%;
  height: 53%;
  background:
    radial-gradient(ellipse 30% 45% at 33% 35%, rgb(247 220 232 / .095) 0%, rgb(161 83 116 / .04) 50%, transparent 78%),
    radial-gradient(ellipse 25% 40% at 73% 50%, rgb(119 184 201 / .075) 0%, rgb(76 109 124 / .03) 52%, transparent 80%),
    radial-gradient(ellipse 42% 25% at 47% 81%, rgb(255 63 152 / .1) 0%, transparent 76%);
  opacity: .48;
}

@media (max-width: 900px) {
  .scene-light__haze--origin-wine,
  .scene-light__haze--buy-wine {
    width: 84%;
    left: 4%;
  }

  .scene-light__haze--origin-smoke,
  .scene-light__haze--buy-smoke {
    width: 64%;
    left: 18%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-light__haze {
    transition: none;
    will-change: auto;
  }
}

.film-look[data-film-motion='static'] .scene-light__haze,
.film-look[data-film-motion='paused'] .scene-light__haze {
  will-change: auto;
}

/* OPTICAL RECONSTRUCTION, v51.
   Restore the broad wine exposure the user preferred, but keep it object-bound.
   Split conic apertures replace polygon strips; independent transforms make
   their overlap and density evolve instead of sliding one baked picture. */
.scene-light__haze--origin-wine {
  top: 0;
  left: -2%;
  width: 104%;
  height: 92%;
  border-radius: 44%;
  filter: blur(26px) saturate(1.06);
  background:
    radial-gradient(ellipse 38% 48% at 27% 44%, rgb(117 24 64 / .38) 0%, rgb(91 18 51 / .22) 43%, transparent 77%),
    radial-gradient(ellipse 34% 44% at 66% 37%, rgb(255 63 152 / .34) 0%, rgb(145 29 77 / .19) 45%, transparent 75%),
    radial-gradient(ellipse 48% 34% at 53% 76%, rgb(128 27 70 / .31) 0%, rgb(78 17 45 / .14) 49%, transparent 79%);
}

.scene-light__haze--origin-smoke {
  top: 13%;
  left: 16%;
  width: 70%;
  height: 68%;
  border-radius: 46%;
  filter: blur(18px);
  background:
    radial-gradient(ellipse 34% 52% at 29% 39%, rgb(244 218 229 / .14) 0%, rgb(177 91 128 / .07) 47%, transparent 77%),
    radial-gradient(ellipse 31% 46% at 72% 56%, rgb(123 187 202 / .105) 0%, rgb(73 108 123 / .045) 51%, transparent 78%),
    radial-gradient(ellipse 45% 31% at 49% 80%, rgb(255 63 152 / .16) 0%, transparent 75%);
}

.scene-light__beam--origin-left,
.scene-light__beam--origin-right {
  top: 14%;
  width: 64%;
  height: 58%;
  border-radius: 0;
  filter: blur(12px);
}

.scene-light__beam--origin-left {
  left: 1%;
  background:
    radial-gradient(ellipse 18% 26% at 7% 50%, rgb(255 91 171 / .2), transparent 78%),
    conic-gradient(from 0deg at 0% 50%,
      transparent 0deg 75deg,
      rgb(137 34 81 / .06) 78deg,
      rgb(255 63 152 / .19) 84deg,
      rgb(248 222 233 / .2) 88deg,
      transparent 92deg 96deg,
      rgb(255 95 170 / .13) 99deg,
      transparent 106deg 360deg);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 72%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 13%, #000 72%, transparent 100%);
}

.scene-light__beam--origin-right {
  right: 1%;
  background:
    radial-gradient(ellipse 18% 26% at 93% 50%, rgb(219 239 243 / .16), transparent 78%),
    conic-gradient(from 0deg at 100% 50%,
      transparent 0deg 253deg,
      rgb(129 188 203 / .08) 257deg,
      rgb(228 242 244 / .19) 264deg,
      rgb(255 217 233 / .18) 269deg,
      transparent 273deg 278deg,
      rgb(255 63 152 / .105) 282deg,
      transparent 289deg 360deg);
  -webkit-mask-image: linear-gradient(270deg, transparent 0%, #000 13%, #000 72%, transparent 100%);
  mask-image: linear-gradient(270deg, transparent 0%, #000 13%, #000 72%, transparent 100%);
}

.scene-light__beam--origin-left::before,
.scene-light__beam--origin-left::after,
.scene-light__beam--origin-right::before,
.scene-light__beam--origin-right::after {
  content: none;
}

.scene-light__haze--buy-wine {
  top: 0;
  left: -9%;
  width: 108%;
  height: 91%;
  border-radius: 44%;
  filter: blur(28px) saturate(1.08);
  background:
    radial-gradient(ellipse 39% 48% at 24% 45%, rgb(132 27 71 / .42) 0%, rgb(93 19 53 / .23) 44%, transparent 77%),
    radial-gradient(ellipse 35% 42% at 63% 34%, rgb(255 63 152 / .38) 0%, rgb(147 30 78 / .2) 46%, transparent 75%),
    radial-gradient(ellipse 50% 34% at 49% 77%, rgb(139 29 75 / .34) 0%, rgb(78 18 46 / .15) 51%, transparent 80%);
}

/* Secondary BUY field is a broken aperture, not another amorphous halo. */
.scene-light__haze--buy-smoke {
  top: -8%;
  left: 8%;
  width: 82%;
  height: 112%;
  border-radius: 0;
  filter: blur(15px);
  background:
    conic-gradient(from 0deg at 50% 0%,
      transparent 0deg 163deg,
      rgb(246 224 233 / .09) 166deg,
      rgb(255 82 164 / .15) 171deg,
      transparent 176deg 181deg,
      rgb(215 236 240 / .11) 184deg,
      rgb(255 63 152 / .11) 190deg,
      transparent 196deg 360deg);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 70%, transparent 100%);
}

.scene-light__beam--buy-key {
  top: -17%;
  left: 6%;
  width: 86%;
  height: 126%;
  border-radius: 0;
  clip-path: none;
  filter: blur(14px);
  background:
    radial-gradient(ellipse 22% 14% at 50% 6%, rgb(255 239 246 / .13), transparent 80%),
    conic-gradient(from 0deg at 50% 0%,
      transparent 0deg 158deg,
      rgb(255 63 152 / .055) 161deg,
      rgb(255 132 188 / .15) 167deg,
      rgb(247 229 236 / .18) 172deg,
      transparent 177deg 183deg,
      rgb(219 238 241 / .14) 186deg,
      rgb(255 77 161 / .17) 192deg,
      rgb(121 30 70 / .06) 198deg,
      transparent 204deg 360deg);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 72%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 72%, transparent 100%);
}

.scene-light__beam--buy-key::before,
.scene-light__beam--buy-key::after {
  content: none;
}

.scene-light__beam--buy-rim {
  filter: blur(14px);
  background:
    radial-gradient(ellipse 14% 40% at 72% 31%, rgb(235 246 248 / .12), transparent 100%),
    radial-gradient(ellipse 19% 46% at 54% 57%, rgb(255 63 152 / .24), transparent 100%),
    radial-gradient(ellipse 72% 68% at 58% 48%, rgb(126 26 67 / .3), rgb(255 63 152 / .1) 45%, transparent 75%);
}

@media (max-width: 900px) {
  .scene-light__haze--origin-wine,
  .scene-light__haze--buy-wine {
    left: -8%;
    width: 116%;
    filter: blur(22px) saturate(1.06);
  }

  .scene-light__beam--origin-left,
  .scene-light__beam--origin-right {
    top: 16%;
    width: 66%;
    height: 54%;
    filter: blur(9px);
  }

  .scene-light__beam--buy-key,
  .scene-light__haze--buy-smoke {
    filter: blur(11px);
  }
}

/* OPTICAL EDGE / APERTURE TUNING, v52.
   Radial masks remove any readable layer rectangle. Three blurred lobes make
   the mascot light feel optically split rather than drawn with vector strips. */
.scene-light__haze--origin-wine,
.scene-light__haze--buy-wine {
  -webkit-mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 0%, #000 43%, rgb(0 0 0 / .7) 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 72% 72% at 50% 50%, #000 0%, #000 43%, rgb(0 0 0 / .7) 62%, transparent 100%);
}

.scene-light__beam--buy-key {
  filter: blur(18px);
  background:
    radial-gradient(ellipse 20% 13% at 50% 6%, rgb(255 235 244 / .2), transparent 82%),
    conic-gradient(from 0deg at 50% 0%,
      transparent 0deg 157deg,
      rgb(134 31 76 / .08) 160deg,
      rgb(255 63 152 / .2) 164deg,
      rgb(255 207 228 / .34) 169deg,
      rgb(245 232 237 / .29) 173deg,
      transparent 178deg 182deg,
      rgb(255 91 169 / .24) 186deg,
      rgb(255 193 219 / .28) 190deg,
      transparent 194deg 198deg,
      rgb(203 231 237 / .2) 201deg,
      rgb(255 63 152 / .14) 205deg,
      transparent 211deg 360deg);
}

.scene-light__haze--buy-smoke {
  filter: blur(17px);
  background:
    conic-gradient(from 0deg at 50% 0%,
      transparent 0deg 160deg,
      rgb(236 217 225 / .15) 164deg,
      rgb(255 83 163 / .2) 169deg,
      transparent 173deg 178deg,
      rgb(218 237 240 / .16) 182deg,
      rgb(255 63 152 / .17) 187deg,
      transparent 192deg 197deg,
      rgb(121 29 69 / .09) 201deg,
      transparent 207deg 360deg);
}

@media (max-width: 900px) {
  .scene-light__haze--origin-wine {
    left: 2%;
    width: 96%;
  }

  .scene-light__haze--buy-wine {
    top: 4%;
    left: 11%;
    width: 78%;
    height: 84%;
    filter: blur(20px) saturate(1.06);
  }

  .scene-light__beam--buy-key {
    filter: blur(14px);
  }

  .scene-light__haze--buy-smoke {
    filter: blur(13px);
  }
}

/* EDGE FEATHER + LOCAL LIGHT DUST, v53. */
.scene-light__beam--origin-right {
  right: -5%;
  width: 72%;
  filter: blur(18px);
  background:
    radial-gradient(ellipse 20% 30% at 94% 50%, rgb(222 240 243 / .14), transparent 82%),
    conic-gradient(from 0deg at 100% 50%,
      transparent 0deg 246deg,
      rgb(114 169 188 / .025) 251deg,
      rgb(151 204 216 / .1) 258deg,
      rgb(230 243 245 / .19) 265deg,
      rgb(255 216 232 / .16) 272deg,
      rgb(255 63 152 / .045) 280deg,
      transparent 286deg 291deg,
      rgb(152 92 119 / .04) 295deg,
      transparent 304deg 360deg);
  -webkit-mask-image: radial-gradient(ellipse 108% 82% at 100% 50%, #000 0%, #000 48%, rgb(0 0 0 / .64) 70%, transparent 100%);
  mask-image: radial-gradient(ellipse 108% 82% at 100% 50%, #000 0%, #000 48%, rgb(0 0 0 / .64) 70%, transparent 100%);
}

/* Keep the warm BUY exposure broad while ensuring its moving right edge has
   already faded to zero before it can meet a scene boundary. */
.scene-light__haze--buy-wine {
  left: -14%;
  width: 118%;
  -webkit-mask-image: radial-gradient(ellipse 66% 74% at 46% 49%, #000 0%, #000 40%, rgb(0 0 0 / .62) 61%, transparent 100%);
  mask-image: radial-gradient(ellipse 66% 74% at 46% 49%, #000 0%, #000 40%, rgb(0 0 0 / .62) 61%, transparent 100%);
}

.scene-light__dust {
  position: absolute;
  z-index: 1;
  top: 11%;
  left: 11%;
  width: 78%;
  height: 70%;
  border-radius: 46%;
  background: url('./assets/film/grain-v1.png') repeat;
  background-size: 220px 220px;
  pointer-events: none;
  backface-visibility: hidden;
  -webkit-mask-image:
    radial-gradient(ellipse 28% 42% at 31% 43%, #000 0%, transparent 78%),
    radial-gradient(ellipse 31% 38% at 69% 56%, #000 0%, transparent 80%);
  mask-image:
    radial-gradient(ellipse 28% 42% at 31% 43%, #000 0%, transparent 78%),
    radial-gradient(ellipse 31% 38% at 69% 56%, #000 0%, transparent 80%);
  opacity: .06;
}

.scene-light__dust--buy {
  top: 15%;
  left: 7%;
  width: 82%;
  height: 66%;
}

.scene-light.is-light-active .scene-light__dust {
  will-change: transform, opacity;
}

@media (max-width: 900px) {
  .scene-light__beam--origin-right {
    right: -4%;
    width: 72%;
    filter: blur(13px);
  }

  .scene-light__haze--buy-wine {
    top: 4%;
    left: 7%;
    width: 86%;
    height: 84%;
  }

  .scene-light__dust {
    background-size: 180px 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scene-light__dust {
    transition: none;
    will-change: auto;
  }
}

.film-look[data-film-motion='static'] .scene-light__dust,
.film-look[data-film-motion='paused'] .scene-light__dust {
  will-change: auto;
}

/* VIEWPORT CLIP FIX, v54.
   Clip optical spill only at the browser edge. Clipping the BUY grid itself
   exposed its internal left boundary as a vertical cut through the haze. */
html.film-look,
html.film-look body {
  overflow-x: clip;
}

.film-look .buy-section {
  overflow: visible;
}

/* SPLIT OBJECT KEY, v58.
   The unmasked bed keeps the approved broad wine atmosphere. A separate,
   softly masked fan restores four brighter warm/cool rays without exposing a
   plate edge or relying on Safari-sensitive composite masks. */
.scene-light__beam--buy-key {
  left: -54%;
  width: 208%;
  filter: none;
  background: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.scene-light__beam--buy-key::before {
  content: '';
  inset: -2%;
  clip-path: none;
  background:
    radial-gradient(ellipse 23% 106% at 32% 0%, rgb(255 63 152 / .22) 0%, rgb(255 118 181 / .105) 29%, transparent 80%),
    radial-gradient(ellipse 19% 114% at 50% 0%, rgb(248 232 238 / .24) 0%, rgb(255 76 161 / .13) 32%, transparent 82%),
    radial-gradient(ellipse 24% 104% at 69% 0%, rgb(205 232 238 / .17) 0%, rgb(255 63 152 / .09) 35%, transparent 79%);
  filter: blur(30px);
  opacity: 1;
  transform: none;
  backface-visibility: hidden;
  -webkit-mask-image: none;
  mask-image: none;
}

.scene-light__beam--buy-key::after {
  content: '';
  inset: -4% 3% -2%;
  clip-path: none;
  background:
    radial-gradient(ellipse 15% 11% at 50% 3%, rgb(255 244 248 / .52), transparent 82%),
    conic-gradient(from 0deg at 50% -3%,
      transparent 0deg 155deg,
      rgb(255 63 152 / .08) 158deg,
      rgb(255 170 210 / .56) 164deg,
      rgb(255 83 166 / .26) 169deg,
      transparent 173deg 176deg,
      rgb(214 238 242 / .12) 178deg,
      rgb(251 248 249 / .68) 183deg,
      rgb(255 120 185 / .3) 188deg,
      transparent 192deg 195deg,
      rgb(255 64 154 / .1) 198deg,
      rgb(255 80 165 / .54) 203deg,
      rgb(255 190 220 / .28) 208deg,
      transparent 212deg 215deg,
      rgb(203 233 239 / .09) 217deg,
      rgb(220 241 244 / .44) 221deg,
      rgb(255 80 166 / .18) 226deg,
      transparent 230deg 360deg);
  filter: blur(9px) saturate(1.08);
  opacity: 1;
  transform: rotate(-.8deg);
  transform-origin: 50% 0;
  backface-visibility: hidden;
  -webkit-mask-image: radial-gradient(ellipse 66% 98% at 50% 0%, #000 0%, #000 43%, rgb(0 0 0 / .72) 66%, rgb(0 0 0 / .24) 82%, transparent 100%);
  mask-image: radial-gradient(ellipse 66% 98% at 50% 0%, #000 0%, #000 43%, rgb(0 0 0 / .72) 66%, rgb(0 0 0 / .24) 82%, transparent 100%);
}

/* MOBILE HERO CONTINUITY, v51.
   Keep the vertical legibility scrim stable; fade the B/C left safe-zone from
   continuous feather progress instead of repainting the viewport at a phase flag. */
@media (max-width: 768px) and (prefers-reduced-motion: no-preference) {
  .film-look.has-voxel-draft .hero__voxel-draft::after,
  .film-look[data-voxel-phase='B'] .hero__voxel-draft::after,
  .film-look[data-voxel-phase='C'] .hero__voxel-draft::after {
    background: linear-gradient(180deg, rgb(8 7 9 / .04), transparent 38%, rgb(8 7 9 / .22) 52%, rgb(8 7 9 / .98) 83%);
  }

  html.film-look.has-voxel-draft .hero__voxel-draft[data-lookdev='self-pbr']::before {
    content: '';
    display: block;
    position: absolute;
    z-index: 2;
    inset: 0;
    border-radius: 0;
    background: linear-gradient(90deg, rgb(8 7 9 / .94), rgb(8 7 9 / .84) 42%, rgb(8 7 9 / .14) 86%);
    filter: none;
    opacity: clamp(0, calc(var(--voxel-break) + var(--voxel-recall)), 1);
    transform: none;
    transition: none;
    pointer-events: none;
  }
}