/**
 * ============================================================
 * Pixelated Background System (FINAL)
 * ============================================================
 *
 * Behavior:
 * - Two background layers (.layer-a / .layer-b)
 * - Old image pixelates OUT
 * - New image pixelates IN
 * - Pixelation ONLY during transitions
 * - No rotation
 * - No persistent blur
 * - Full viewport coverage
 * - Contain image + blurred fill
 * ============================================================
 */

/* ------------------------------------------------------------
   BACKGROUND ROOT CONTAINER
   ------------------------------------------------------------ */
   
   .site-background {
       position: absolute;
       top: calc(-7dvh - 4.5dvh - 5dvh);
       left: 0;
       width: 100%;
       height: 110vh;
       z-index: -1;
       overflow: hidden;
       pointer-events: none;
   }
   
   /* Bottom fade gradient overlay */
   .site-background::after {
       content: "";
       position: absolute;
       bottom: 0;
       left: 0;
       width: 100%;
       height: 20vh;
       background: linear-gradient(to bottom, transparent 0%, var(--background-color) 100%);
       pointer-events: none;
       z-index: 1;
   }
   
   /* ------------------------------------------------------------
      BASE BACKGROUND LAYER
      ------------------------------------------------------------ */
   
      .bg-layer {
        position: absolute;
        inset: 0;
    
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        height: 110vh;
        min-height: 110vh;
    
        opacity: 0;
        filter: grayscale(8%) brightness(0.7);
        transition: filter 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
   
   /* ------------------------------------------------------------
      BLURRED FILL (ALWAYS BEHIND, NEVER ANIMATED)
      ------------------------------------------------------------ */
   
   .bg-layer::before {
       content: "";
       position: absolute;
       inset: 0;
   
       background-image: inherit;
       background-position: center center;
       background-repeat: no-repeat;
       background-size: cover;
       height: 110vh;
   
       /* Static blur — does NOT animate, stays behind main image */
       filter: blur(28px) brightness(0.7);
       transform: scale(1.15);
       opacity: 0;
       pointer-events: none;
       transition: filter 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
   }
   
   /* ------------------------------------------------------------
      ACTIVE IMAGE (NO BLUR, NO ANIMATION)
      ------------------------------------------------------------ */
   
      .bg-layer.active {
        opacity: 0.65;
        filter: grayscale(25%) brightness(0.7);
        transition: filter 2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }
   
   /* Show blurred fill only when layer is active (as subtle background) */
   .bg-layer.active::before {
       opacity: 0.2;
   }
   
   /* ------------------------------------------------------------
      TRANSITION STATES (ONLY TIME BLUR EXISTS)
      ------------------------------------------------------------ */
   
   /* Old image pixelates OUT */
   .bg-layer.exit {
       animation: pixelOut 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
   }
   
   /* New image pixelates IN */
   .bg-layer.enter {
       animation: pixelIn 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
   }
   
   /* ------------------------------------------------------------
      ANIMATIONS
      ------------------------------------------------------------ */
/* Pixelate OUT */
@keyframes pixelOut {
    from {
        opacity: 0.7;
        filter: blur(0px) grayscale(8%) brightness(0.7);
    }
    to {
        opacity: 0;
        filter: blur(4px) grayscale(8%) brightness(0.7);
    }
}

/* Pixelate IN */
@keyframes pixelIn {
    from {
        opacity: 0;
        filter: blur(4px) grayscale(8%) brightness(0.7);
    }
    to {
        opacity: 0.7;
        filter: blur(0px) grayscale(8%) brightness(0.7);
    }
}
   
   /* ------------------------------------------------------------
      ACCESSIBILITY: REDUCED MOTION
      ------------------------------------------------------------ */
   
      @media (prefers-reduced-motion: reduce) {
        .bg-layer.enter,
        .bg-layer.exit {
            animation: none;
            filter: grayscale(25%) brightness(0.7);
            opacity: 0.7;
        }
    }