/**
 * Layered animated "trash" background.
 *
 * Two stacked images that slowly zoom/rotate against each other. Layer 01 is
 * the base; layer 02 is an overlay clipped to the viewport. Motion is disabled
 * for users who prefer reduced motion (see the media query at the bottom).
 */
.reciklart-trash-bg-01 {
  /* --bg-image is emitted at :root by reciklart_preprocess_html() when a
     background Media (site-wide profile, or a landing node's hero image) is
     set; otherwise this shipped default is used. */
  background-image: var(--bg-image, url(../../images/reciklart-trash-bg-01.jpg));
  background-position: center;
  background-size: auto 300%;
  animation: reciklart-trash-bg-01 var(--bg-duration, 30s) infinite;
}

.reciklart-bg__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.reciklart-trash-bg-02 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* --bg-image-2 is emitted at :root when a background overlay Media is set;
     otherwise this shipped default is used. */
  background-image: var(--bg-image-2, url(../../images/reciklart-trash-bg-021.png));
  background-position: center;
  background-size: auto 120%;
  transform: rotate(15deg) scale(1.3);
  animation: reciklart-trash-bg-02 var(--bg-duration, 30s) infinite;
}

@keyframes reciklart-trash-bg-01 {
  0%   { background-size: auto 300%; }
  50%  { background-size: auto 120%; }
  100% { background-size: auto 300%; }
}

@keyframes reciklart-trash-bg-02 {
  0%   { background-size: auto 120%; transform: rotate(15deg) scale(1.3); }
  30%  { background-size: auto 300%; transform: rotate(0deg) scale(1); }
  100% { background-size: auto 120%; transform: rotate(15deg) scale(1.3); }
}

@media (prefers-reduced-motion: reduce) {
  .reciklart-trash-bg-01,
  .reciklart-trash-bg-02 { animation: none !important; }
}