/* ─── MealGrid Parallax / Background System v1.0.0 ─────────────────────────
   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.
   Adapted from Digitalis CMS core for MealGrid light theme.               */

/* ── Fixed background ── */
body::before {
    content: '';
    position: fixed;
    inset: -8%;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: var(--active-bg, none);
    background-color: #fff7db;
    /* Light theme: high brightness, soft blur — watercolor should be visible */
    filter: brightness(0.88) blur(var(--bg-blur, 0px)) saturate(1.1);
    transform: scale(var(--bg-scale, 1.06));
    transition:
        background-image 0.6s ease,
        filter           0.3s ease,
        transform        0.3s ease;
    pointer-events: none;
    will-change: transform, filter;
}

/* ── Default idle animation: gentle breathe ── */
@keyframes bg-breathe {
    0%   { filter: brightness(0.85) blur(3px)  saturate(1.0); transform: scale(1.06) translate(0px,   0px);  }
    25%  { filter: brightness(0.92) blur(0px)  saturate(1.15); transform: scale(1.09) translate(-4px, -2px); }
    50%  { filter: brightness(0.88) blur(1px)  saturate(1.05); transform: scale(1.07) translate(3px,   2px); }
    75%  { filter: brightness(0.93) blur(0px)  saturate(1.18); transform: scale(1.10) translate(-2px,  3px); }
    100% { filter: brightness(0.85) blur(3px)  saturate(1.0); transform: scale(1.06) translate(0px,   0px);  }
}

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

/* ── Scroll-driven state ── */
body.scrolling-active::before {
    animation: none;
    filter: brightness(calc(0.85 + var(--scroll-ratio, 0) * 0.10))
            blur(calc(4px - var(--scroll-ratio, 0) * 4px))
            saturate(calc(1.0 + var(--scroll-ratio, 0) * 0.15));
    transform: scale(calc(1.12 - var(--scroll-ratio, 0) * 0.08))
               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; }

/* ── Very subtle noise texture (lighter than Ravecore) ── */
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.03'/%3E%3C/svg%3E");
    pointer-events: none;
    opacity: 0.10;
}

/* ── Cyber loader bar ── */
#cyber-loader {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    z-index: 9999;
    transition: width 0.08s linear, opacity 0.3s ease;
    border-radius: 0 2px 2px 0;
    opacity: 1;
}

/* ── Cyber scan overlay ── */
#cyber-scan {
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(161,18,142,0.06) 50%,
        transparent 100%
    );
    animation: scan-sweep 0.6s ease-out forwards;
}
#cyber-scan.cyber-scan--done {
    opacity: 0;
    transition: opacity 0.4s ease;
}
@keyframes scan-sweep {
    from { transform: translateY(-100%); opacity: 0.8; }
    to   { transform: translateY(100%); opacity: 0; }
}

/* ── Type cursor ── */
.type-cursor {
    display: inline-block;
    color: var(--primary);
    animation: cursor-blink 1s step-end infinite;
    margin-left: 1px;
}
.type-cursor--done,
.type-cursor.blink {
    animation: cursor-blink 1.2s step-end infinite;
    opacity: 0.5;
}
@keyframes cursor-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}

/* ── Reveal block animation ── */
.reveal-block {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.reveal-block.revealed {
    opacity: 1;
    transform: translateY(0);
}