/* The decorative background moves independently of the stationary foreground. */
.hero {
  isolation: isolate;
  background: none !important;
  --hero-image: url('pepper-bg.webp');
  --hero-wash: linear-gradient(110deg,rgba(252,249,244,.97) 20%,rgba(252,249,244,.81) 60%,rgba(252,249,244,.3));
  --hero-duration: 10s;
  --hero-drift-x: 28px;
  --hero-drift-y: 12px;
}
body[data-theme=couples] .hero { --hero-duration: 12s; }
body[data-theme=radio] .hero {
  --hero-image: url('radio-bg.webp');
  --hero-wash: linear-gradient(110deg,#fcf9f4 5%,#fcf9f4dd 60%,#fcf9f422);
  --hero-duration: 10s;
}
body[data-theme=catalog] .hero {
  --hero-image: url('catalog-bg.webp');
  --hero-wash: linear-gradient(110deg,#fcf9f4 5%,#fcf9f4dd 60%,#fcf9f422);
  --hero-duration: 11s;
}
.hero::before {
  content: '';
  position: absolute;
  inset: -52px;
  z-index: -1;
  pointer-events: none;
  background-image: var(--hero-wash), var(--hero-image);
  background-position: center;
  background-size: cover;
  transform: translate3d(calc(-1 * var(--hero-drift-x)),var(--hero-drift-y),0) scale(1);
}
@media (prefers-reduced-motion: no-preference) {
  .hero.motion-enabled::before {
    animation: hero-background-drift var(--hero-duration) ease-in-out infinite alternate;
  }
  .hero.motion-paused::before { animation-play-state: paused; }
}
@keyframes hero-background-drift {
  from { transform: translate3d(calc(-1 * var(--hero-drift-x)),var(--hero-drift-y),0) scale(1); }
  to { transform: translate3d(var(--hero-drift-x),calc(-1 * var(--hero-drift-y)),0) scale(1.08); }
}
@media (max-width: 800px) {
  .hero { --hero-drift-x: 16px; --hero-drift-y: 9px; }
  .hero::before { inset: -34px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none !important; transform: none; }
}
@media print {
  .hero::before { display: none; }
}