/* transitions.css
   Handles the background crossfade and content fade-in/out.
   ---------------------------------------------------------- */

/* Both background layers sit in the same fixed container.
   Only the one with .bg-active is visible. */
.bg-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity var(--bg-transition-duration, 700ms) ease-in-out;
    pointer-events: none;
}

.bg-layer.bg-active {
    opacity: 1;
}

/* Content area fade — transitions.js sets this inline, but we
   also define a sensible default so there's no flash on load. */
#page-content {
    opacity: 1;
    transition: opacity 400ms ease;
}