/* ─── Parallax / Background System v1.3.6 ───────────────────────────────────
   Background on body::before — fixed, never scrolls with content.
   Default: slow zoom+blur breathing animation.
   Scroll (vertical pages): JS drives --scroll-ratio to control zoom+blur.   */

/* ── Fixed background ── */
body::before {
    content: '';
    position: fixed;
    inset: -8%;                    /* oversized so zoom never shows edges */
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: var(--active-bg, none);
    background-color: #08080f;
    filter: brightness(0.42) blur(var(--bg-blur, 0px));
    transform: scale(var(--bg-scale, 1.08));
    transition:
        background-image 0.6s ease,
        filter           0.3s ease,
        transform        0.3s ease;
    pointer-events: none;
    will-change: transform, filter;
}

/* ── Default idle animation: breathe zoom + blur ── */
/* Plays when no scroll is happening (non-vertical slides) */
@keyframes bg-breathe {
    0%   { --bg-scale: 1.06; --bg-blur: 4px;  filter: brightness(0.38) blur(4px);  transform: scale(1.06) translate(0px,    0px);    }
    25%  { --bg-scale: 1.10; --bg-blur: 0px;  filter: brightness(0.44) blur(0px);  transform: scale(1.10) translate(-6px,  -3px);   }
    50%  { --bg-scale: 1.07; --bg-blur: 2px;  filter: brightness(0.40) blur(2px);  transform: scale(1.07) translate(4px,   2px);    }
    75%  { --bg-scale: 1.11; --bg-blur: 0px;  filter: brightness(0.45) blur(0px);  transform: scale(1.11) translate(-3px,  4px);    }
    100% { --bg-scale: 1.06; --bg-blur: 4px;  filter: brightness(0.38) blur(4px);  transform: scale(1.06) translate(0px,    0px);    }
}

body:not(.scrolling-active)::before {
    animation: bg-breathe 18s ease-in-out infinite;
}

/* ── Scroll-driven state: JS adds .scrolling-active to body ── */
/* scroll-ratio: 0 = top (zoomed out, blurry) → 1 = bottom (zoomed in, sharp) */
body.scrolling-active::before {
    animation: none;
    /* Values interpolated by JS via CSS vars */
    filter:    brightness(calc(0.38 + var(--scroll-ratio, 0) * 0.12))
               blur(calc(6px - var(--scroll-ratio, 0) * 6px));
    transform: scale(calc(1.14 - var(--scroll-ratio, 0) * 0.10))
               translateY(calc(var(--scroll-ratio, 0) * -2%));
}

/* ── Slide content fade in ── */
.slide-content {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.45s ease 0.1s, transform 0.45s ease 0.1s;
}
.slide.is-active .slide-content {
    opacity: 1;
    transform: translateY(0);
}
#carousel-track > .slide:only-child .slide-content {
    opacity: 1;
    transform: translateY(0);
}

/* ── Slide-bg (hidden — background lives on body::before) ── */
.slide-bg { display: none; }

/* ── Noise texture ── */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.22;
}