* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #1a2a2e; overflow: hidden; }
.stage { position: relative; width: 100%; height: 100%; overflow: hidden; }
.photo,
.chroma {
  position: absolute; inset: -8%;
  background: url(/assets/pool.jpg) center / cover no-repeat;
}
.photo {
  animation: drift 38s ease-in-out infinite alternate, breathe 12s ease-in-out infinite, flicker 8.5s ease-in-out infinite;
  transform: scale(1.08);
  filter: saturate(0.88) contrast(1.06) brightness(0.9);
  z-index: 0;
}
.chroma { pointer-events: none; z-index: 1; mix-blend-mode: screen; }
.chroma--r {
  opacity: 0.16;
  filter: sepia(1) saturate(8) hue-rotate(-40deg) brightness(0.7);
  animation: wobble-r 6.5s ease-in-out infinite, drift 38s ease-in-out infinite alternate;
}
.chroma--b {
  opacity: 0.14;
  filter: sepia(1) saturate(8) hue-rotate(155deg) brightness(0.7);
  animation: wobble-b 7.2s ease-in-out infinite, drift 38s ease-in-out infinite alternate;
}
.fuzz {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
  mix-blend-mode: overlay; opacity: 0.48;
}
.track {
  position: absolute; inset: -20% 0;
  pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0 14px,
    rgba(255,255,255,0.045) 15px 16px,
    rgba(0,0,0,0) 17px 36px,
    rgba(0,0,0,0.16) 37px 39px,
    rgba(0,0,0,0) 40px 58px
  );
  background-size: 100% 240px;
  animation: roll 11s linear infinite;
  mix-blend-mode: multiply;
  opacity: 0.75;
}
.veil {
  position: absolute; inset: 0; pointer-events: none; z-index: 4;
  background:
    repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(18,16,14,0.16) 3px),
    radial-gradient(ellipse at center, transparent 42%, rgba(10,16,18,0.5) 100%);
  box-shadow: inset 0 0 140px 36px rgba(0,0,0,0.32);
}
@keyframes drift {
  0% { transform: scale(1.08) translate3d(-1.4%, -0.8%, 0); }
  50% { transform: scale(1.11) translate3d(1.3%, 0.9%, 0); }
  100% { transform: scale(1.09) translate3d(0.5%, -1.1%, 0); }
}
@keyframes breathe {
  0%, 100% { filter: saturate(0.88) contrast(1.06) brightness(0.9) hue-rotate(-2deg); }
  50% { filter: saturate(0.8) contrast(1.1) brightness(0.84) hue-rotate(3deg); }
}
@keyframes flicker {
  0%, 16%, 20%, 62%, 68%, 100% { opacity: 1; }
  18% { opacity: 0.9; }
  65% { opacity: 0.86; }
}
@keyframes wobble-r {
  0%, 100% { transform: translate3d(-1.2px, 0.4px, 0) scale(1.08); }
  50% { transform: translate3d(2.2px, -0.8px, 0) scale(1.09); }
}
@keyframes wobble-b {
  0%, 100% { transform: translate3d(1.4px, -0.5px, 0) scale(1.08); }
  50% { transform: translate3d(-2px, 1px, 0) scale(1.09); }
}
@keyframes roll {
  from { background-position: 0 0; }
  to { background-position: 0 240px; }
}
@media (prefers-reduced-motion: reduce) {
  .photo, .chroma, .track { animation: none; }
  .photo { opacity: 1; }
}