/* Style for fading hero background images */
:root{
      --fade-duration:1000ms;
      --fallback: #333333;
      background-color: #000000;
    }



    /* Container covering the viewport */
    .bg-root{
      position:fixed;
      inset:0; /* top:0;right:0;bottom:0;left:0 */
      z-index:-1; /* behind page content */
      pointer-events:none;
    }

    /* Each layer is absolutely positioned and covers the whole area */
    .bg-layer{
      position:absolute;
      inset:0;
      filter:blur(8px);
      -webkit-filter:blur(8px);
      background-position:center center;
      background-size:cover;
      background-repeat:no-repeat;
      opacity:0; /* start hidden */
      transition:opacity var(--fade-duration) ease-in-out;
      will-change:opacity;
    }

    /* the currently visible layer gets opacity:1 */
    .bg-layer.visible{opacity:1}

    

    /* Respect user preference for reduced motion */
    @media (prefers-reduced-motion: reduce){
      :root{--fade-duration:0ms}
      .bg-layer{transition:none}
    }

    /* small helper to load fallback solid color if images fail */
    .bg-layer[data-fallback-color]{background-color:var(--fallback)}