:root {
  --film-accent: var(--live-accent, #74a7ff);
  --film-focus: 0;
  --film-transition: 0;
}

.film-overlay {
  position: fixed;
  inset: 0;
  z-index: 35;
  pointer-events: none;
  overflow: hidden;
}

.film-bar {
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(14px, 2.1vh, 26px);
  background: rgba(0, 0, 0, .86);
  transform: scaleY(calc(.35 + var(--film-transition) * .65));
  transition: transform .16s linear;
}

.film-bar.top { top: 0; transform-origin: top; }
.film-bar.bottom { bottom: 0; transform-origin: bottom; }

.film-wash {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 74% 44%, color-mix(in srgb, var(--film-accent) 20%, transparent), transparent 38%),
    linear-gradient(112deg, transparent 30%, color-mix(in srgb, var(--film-accent) 6%, transparent) 52%, transparent 72%);
  opacity: calc(.12 + var(--film-transition) * .62);
  filter: blur(24px);
  mix-blend-mode: screen;
  transform: translate3d(calc((var(--film-transition) - .5) * 7vw), 0, 0) scale(1.06);
}

.film-label {
  position: absolute;
  left: clamp(20px, 4vw, 64px);
  bottom: clamp(28px, 4vh, 48px);
  display: grid;
  gap: 4px;
  color: rgba(240, 244, 255, .76);
  text-transform: uppercase;
  letter-spacing: .16em;
  opacity: calc(.28 + var(--film-focus) * .72);
  transform: translateY(calc((1 - var(--film-focus)) * 12px));
  transition: opacity .2s linear, transform .2s linear;
}

.film-label span { font-size: .56rem; color: #6f788c; }
.film-label strong { font-size: .68rem; font-weight: 650; color: color-mix(in srgb, var(--film-accent) 72%, white); }

.product-world {
  min-height: 132svh;
}

.product-world .product-copy,
.product-world .visual-system {
  align-self: start;
  position: sticky;
  top: max(15vh, calc(var(--header-h) + 42px));
  will-change: transform, opacity, filter;
}

.product-world .product-copy {
  transform:
    translate3d(0, calc(var(--scene-shift-y, 0) * 1px), 0)
    scale(calc(.955 + var(--scene-focus, 1) * .045));
  opacity: calc(.36 + var(--scene-focus, 1) * .64);
  filter: blur(calc((1 - var(--scene-focus, 1)) * 5px));
}

.product-world .visual-system {
  transform:
    translate3d(calc(var(--scene-shift-x, 0) * 1px), calc(var(--scene-shift-y, 0) * -.28px), 0)
    scale(calc(.90 + var(--scene-focus, 1) * .10));
  opacity: calc(.24 + var(--scene-focus, 1) * .76);
  filter:
    saturate(calc(.72 + var(--scene-focus, 1) * .38))
    brightness(calc(.72 + var(--scene-focus, 1) * .32))
    blur(calc((1 - var(--scene-focus, 1)) * 7px));
}

.product-world::before {
  transform: translate3d(calc(var(--scene-shift-x, 0) * -.34px), 0, 0) scale(calc(.92 + var(--scene-focus, 1) * .12));
  opacity: calc(.16 + var(--scene-focus, 1) * .42);
}

.product-world[data-film-phase="entering"] .product-index,
.product-world[data-film-phase="leaving"] .product-index {
  opacity: .28;
}

.product-world[data-film-phase="center"] .product-index {
  opacity: 1;
  text-shadow: 0 0 18px color-mix(in srgb, var(--scene-accent) 60%, transparent);
}

.scene-transition-line {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: 0;
  width: 1px;
  height: 28vh;
  background: linear-gradient(transparent, color-mix(in srgb, var(--scene-accent) 58%, white 8%), transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--scene-accent) 35%, transparent);
  opacity: calc(.08 + var(--scene-transition, 0) * .7);
  transform: translateY(calc((1 - var(--scene-transition, 0)) * -28%));
}

.scene-transition-line::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--scene-accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 24px var(--scene-accent);
}

.reduced-motion .film-wash,
.standard-mode .film-wash,
.reduced-motion .scene-transition-line {
  display: none;
}

.reduced-motion .product-world,
.standard-mode .product-world {
  min-height: 100svh;
}

.reduced-motion .product-world .product-copy,
.reduced-motion .product-world .visual-system,
.standard-mode .product-world .product-copy,
.standard-mode .product-world .visual-system {
  position: relative;
  top: auto;
  transform: none;
  opacity: 1;
  filter: none;
}

@media (max-width: 980px) {
  .product-world { min-height: 118svh; }
  .film-label { display: none; }
}

@media (max-width: 760px) {
  .film-bar { height: 12px; }
  .product-world { min-height: 108svh; }
  .product-world .product-copy,
  .product-world .visual-system {
    position: relative;
    top: auto;
    transform: none;
    opacity: 1;
    filter: none;
  }
  .scene-transition-line { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .film-wash,
  .scene-transition-line { display: none; }
  .product-world { min-height: 100svh; }
  .product-world .product-copy,
  .product-world .visual-system {
    position: relative;
    top: auto;
    transform: none;
    opacity: 1;
    filter: none;
  }
}