.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--paper);
  contain: strict;
  --film-height: 80svh;
  --film-period: calc(var(--film-height) * 2.777777778);
  --film-opacity: 0.07;
  --light-opacity: 0.12;
  /* Leave the text side quiet while the film reads at the outer edges. */
  mask-image: linear-gradient(90deg, #0009, #0004 35%, #000 80%);
}
.atmosphere-video {
  position: absolute;
  inset: -20px;
  width: calc(100% + 40px);
  height: calc(100% + 40px);
  object-fit: cover;
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(12px) saturate(0.65);
  transition: opacity 3s ease;
}
.atmosphere-video.is-ready { opacity: 0.14; }
.film-track {
  position: absolute;
  left: -60%;
  top: 10%;
  width: 220%;
  height: var(--film-height);
  transform: perspective(1800px) rotate(-24deg) rotateY(-18deg) rotateX(24deg) skewX(-10deg);
  filter: blur(8px);
  opacity: var(--film-opacity);
}
.film-strip {
  width: calc(100% + var(--film-period));
  height: 100%;
  background: url("/assets/film-strip.svg") repeat-x 0 center / var(--film-period) var(--film-height);
  animation: film-pass 180s linear infinite;
  will-change: transform;
}
.light-streak {
  position: absolute;
  top: -45%;
  left: -30%;
  height: 190%;
  width: clamp(180px, 32vw, 480px);
  background: linear-gradient(90deg, transparent, #b97b32 48%, #ecd2a1 51%, transparent);
  filter: blur(46px);
  opacity: 0;
  animation: light-pass 27s linear infinite;
  animation-delay: -17s;
  will-change: transform, opacity;
}
.light-streak-silver {
  width: clamp(90px, 16vw, 220px);
  background: linear-gradient(90deg, transparent, #a8b9b3 50%, transparent);
  filter: blur(32px);
  animation-duration: 37s;
  animation-delay: -28s;
}
.dust-field { position: absolute; inset: 0; }
.dust-field span {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: #efe3c9;
  box-shadow: 0 0 5px #efe3c933;
  filter: blur(0.4px);
  opacity: 0;
  animation: dust-drift 32s linear infinite;
}
.dust-field span:nth-child(1) { left: 8%; top: 26%; animation-delay: -8s; }
.dust-field span:nth-child(2) { left: 17%; top: 68%; animation-delay: -21s; }
.dust-field span:nth-child(3) { left: 26%; top: 42%; animation-delay: -3s; }
.dust-field span:nth-child(4) { left: 34%; top: 88%; animation-delay: -16s; }
.dust-field span:nth-child(5) { left: 43%; top: 21%; animation-delay: -27s; }
.dust-field span:nth-child(6) { left: 52%; top: 61%; animation-delay: -11s; }
.dust-field span:nth-child(7) { left: 61%; top: 35%; animation-delay: -24s; }
.dust-field span:nth-child(8) { left: 70%; top: 82%; animation-delay: -6s; }
.dust-field span:nth-child(9) { left: 79%; top: 19%; animation-delay: -19s; }
.dust-field span:nth-child(10) { left: 88%; top: 57%; animation-delay: -1s; }
.dust-field span:nth-child(11) { left: 95%; top: 91%; animation-delay: -14s; }
.dust-field span:nth-child(12) { left: 13%; top: 95%; animation-delay: -30s; }
.dust-field span:nth-child(13) { left: 39%; top: 54%; animation-delay: -12s; }
.dust-field span:nth-child(14) { left: 57%; top: 94%; animation-delay: -25s; }
.dust-field span:nth-child(15) { left: 74%; top: 49%; animation-delay: -5s; }
.dust-field span:nth-child(16) { left: 91%; top: 29%; animation-delay: -18s; }
.dust-field span:nth-child(3n) { width: 1px; height: 1px; animation-duration: 41s; }
.dust-field span:nth-child(5n) { width: 3px; height: 3px; filter: blur(0.8px); animation-duration: 37s; }
:root[data-paper="light"] .atmosphere { --film-opacity: 0.055; --light-opacity: 0.09; }
@keyframes film-pass {
  to { transform: translate3d(calc(-1 * var(--film-period)), 0, 0); }
}
@keyframes light-pass {
  0%, 25% { transform: translate3d(-30vw, 0, 0) rotate(-22deg); opacity: 0; }
  38% { opacity: var(--light-opacity); }
  66% { opacity: var(--light-opacity); }
  90%, 100% { transform: translate3d(155vw, 0, 0) rotate(-22deg); opacity: 0; }
}
@keyframes dust-drift {
  0% { transform: translate3d(0, 0, 0); opacity: 0; }
  16% { opacity: 0.08; }
  36% { opacity: 0.28; }
  54% { opacity: 0.13; }
  72%, 100% { transform: translate3d(55px, -140px, 0); opacity: 0; }
}
@media (max-width: 700px) {
  .atmosphere { --film-opacity: 0.055; --light-opacity: 0.09; }
  .light-streak { filter: blur(34px); }
  .atmosphere-video.is-ready { opacity: 0.10; }
}
@media (prefers-reduced-motion: reduce) {
  .atmosphere * { animation: none !important; will-change: auto; }
  .light-streak, .dust-field, .atmosphere-video { display: none; }
  .atmosphere-video { transition: none; }
}