/* Vaporwave's artwork stays behind the page; the moving grid is decorative. */
.vaporwave-backdrop { display: none; }
html[data-theme="vaporwave"] .vaporwave-backdrop {
  display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; contain: paint;
  background: radial-gradient(ellipse at 85% 60%, #771d754d, transparent 60%), #1a0e32;
}
html[data-theme="vaporwave"] .vaporwave-scene {
  position: absolute; inset: -22px -4% auto; height: 660px; opacity: .18;
  background: url('assets/vaporwave-backdrop.jpg') center 42% / cover no-repeat;
  mask-image: linear-gradient(#000 75%, transparent 100%);
  animation: cw-vaporwave-drift 28s ease-in-out infinite alternate; will-change: transform;
}
html[data-theme="vaporwave"] .vaporwave-grid {
  position: absolute; left: -25%; right: -25%; top: -10%; height: 135%; opacity: .78;
  background-image: linear-gradient(#f5a0f19c 1px, transparent 1px), linear-gradient(90deg, #7ff4ed99 1px, transparent 1px);
  background-size: 88px 64px; transform: perspective(1800px) rotateX(24deg); transform-origin: center top;
  mask-image: linear-gradient(transparent, #000 8%, #000 88%, transparent);
  animation: cw-vaporwave-grid 5s linear infinite;
}
html[data-theme="vaporwave"] .vaporwave-backdrop::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, #160c2b24, transparent 60%), linear-gradient(0deg, #160c2b 0%, transparent 12%, transparent 94%, #160c2b52);
}

@keyframes cw-vaporwave-drift { from { transform: translate3d(-1%, 0, 0) scale(1.02); } to { transform: translate3d(1.2%, 8px, 0) scale(1.07); } }
@keyframes cw-vaporwave-grid { to { background-position: 0 64px, 0 64px; } }

@media (max-width: 1050px) {
  html[data-theme="vaporwave"] .vaporwave-scene { background-position: 70% 42%; }
}
@media (max-width: 700px) {
  html[data-theme="vaporwave"] .vaporwave-scene { inset: 0; height: auto; background-size: auto 760px; background-position: 77% top; mask-image: none; opacity: .12; }
  html[data-theme="vaporwave"] .vaporwave-grid { top: -10%; height: 135%; opacity: .68; background-size: 64px 64px; transform: perspective(2400px) rotateX(18deg); }
  html[data-theme="vaporwave"] .vaporwave-backdrop::after { background: linear-gradient(0deg, #160c2b, transparent 10%, transparent 94%, #160c2b52); }
}

/* One motion preference controls CSS effects on either Site. */
html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after {
  animation-play-state: paused !important;
  transition-duration: 0s !important;
}
html[data-motion="off"] { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
}