/*
 * background.css — Animated Background Layers
 * CRCKC Child Theme
 * Covers: @keyframes skyDrift, fixed .bg-photo / .bg-sun / .bg-overlay layers,
 *         and the prefers-reduced-motion override.
 * Self-contained: no other component depends on these rules.
 * Swap or disable this file freely without affecting any other styles.
 */

/* ============================================================
   KEYFRAME ANIMATION
   ============================================================ */
@keyframes skyDrift {
  0%   { transform: scale(1.22) translate(  0%,    0%   ); }
  12%  { transform: scale(1.23) translate( -1.8%,  0.6% ); }
  25%  { transform: scale(1.24) translate( -3.5%,  1.2% ); }
  38%  { transform: scale(1.23) translate( -4.2%,  0.4% ); }
  50%  { transform: scale(1.22) translate( -2.8%, -0.8% ); }
  62%  { transform: scale(1.23) translate( -0.6%, -1.5% ); }
  75%  { transform: scale(1.24) translate(  1.8%, -2.2% ); }
  88%  { transform: scale(1.23) translate(  3.2%, -0.9% ); }
  100% { transform: scale(1.22) translate(  0%,    0%   ); }
}

/* ============================================================
   BACKGROUND LAYERS
   ============================================================ */

/* Layer 0 — drifting photo */
.bg-photo {
  position: fixed;
  inset: -14%;
  z-index: 0;
  background-image: url("site-hopeful-bg.webp");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  animation: skyDrift 30s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
}

/* Layer 1 — sun ray overlay (screen blend) */
.bg-sun {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Layer 2 — white wash to soften the photo */
.bg-overlay {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.16);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .bg-photo {
    animation: none;
    transform: scale(1.06);
  }
  .bg-sun animate {
    animation: none;
  }
}