/**
 * VerseFlow Perfected Atmospheres
 * Merges Kinetic Mesh, Liturgy of Light, and Respiratory Sync.
 * Enforces Transparency Audit to prevent "White Lid" blockage.
 */

/* 1. THE TRANSPARENCY AUDIT */
/* --- Fix stacking so mesh is always visible --- */
body,
body[class*="atmosphere-"] {
    background: transparent !important;
    background-color: transparent !important;
}

:root {
    --vf-atmosphere-bleed-inline: 15vw;
    --vf-atmosphere-bleed-block: 15vh;
}

@supports (height: 100dvh) {
    :root {
        --vf-atmosphere-bleed-block: 15dvh;
    }
}

/* Force a stacking context so pseudo-elements can sit behind content but above the page canvas */
body {
    position: relative;
    isolation: isolate;
}

#page,
#main,
.site-main,
.votd-wrapper,
article.page,
.entry-content,
.generator-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* 2. THE KINETIC CANVAS (Oversized to kill the Vignette Bug) */
body::before {
    content: "";
    position: fixed;
    /* OVERSIZE THE CANVAS: Pulls the blurred edges safely off-screen */
    top: calc(var(--vf-atmosphere-bleed-block) * -1);
    right: calc(var(--vf-atmosphere-bleed-inline) * -1);
    bottom: calc(var(--vf-atmosphere-bleed-block) * -1);
    left: calc(var(--vf-atmosphere-bleed-inline) * -1);
    z-index: 0;
    pointer-events: none;

    background-size: 200% 200%;
    filter: blur(60px);
    /* Heavy blur for soft, cloud-like blobs */
    opacity: 0.85;

    transition:
        background 5000ms ease,
        background-color 5000ms ease;

    /* The Dual-Engine Motion */
    animation:
        liturgy-breath 10s ease-in-out infinite,
        mesh-flow 25s ease-in-out infinite alternate,
        mesh-drift 35s ease-in-out infinite alternate !important;
}

/* 3. TIME-OF-DAY STATES (High-Contrast Blobs for Visible Motion) */

/* MORNING: Distinct Peach & Soft Gold */
body.atmosphere-morning::before {
    background:
        radial-gradient(at 20% 20%, #fde0c5 0%, transparent 50%),
        radial-gradient(at 80% 80%, #f6efe2 0%, transparent 50%),
        radial-gradient(at 50% 50%, #fff0d4 0%, transparent 60%);
    background-color: #faf9f6;
}

html.atmosphere-morning {
    background-color: #faf9f6;
}

/* DAYLIGHT: Increased contrast for visible motion */
body.atmosphere-daylight::before {
    background:
        radial-gradient(at 10% 10%, #ffffff 0%, transparent 60%),
        radial-gradient(at 90% 90%, #dce8f2 0%, transparent 60%),
        /* Deeper blue cloud */
        radial-gradient(at 50% 50%, #fcf4e4 0%, transparent 70%);
    /* Warmer gold cloud */
    background-color: #f2f4f7;
    opacity: 1;
    /* Ensure full visibility */
}

html.atmosphere-daylight {
    background-color: #f2f4f7;
}

/* EVENING: Dusty Rose & Cool Indigo */
body.atmosphere-evening::before {
    background:
        radial-gradient(at 100% 0%, #e8d5cc 0%, transparent 60%),
        radial-gradient(at 0% 100%, #d5d0e0 0%, transparent 60%),
        radial-gradient(at 50% 50%, #f4eef5 0%, transparent 50%);
    background-color: #eae6eb;
}

html.atmosphere-evening {
    background-color: #eae6eb;
}

/* NIGHT: Deep Sapphire & Charcoal */
body.atmosphere-night::before {
    background:
        radial-gradient(at 80% 20%, #1a1e29 0%, transparent 50%),
        radial-gradient(at 20% 80%, #2a2228 0%, transparent 50%),
        radial-gradient(at 50% 50%, #121212 0%, transparent 60%);
    background-color: #0a0a0a;
    will-change: background-position, transform;
}

html.atmosphere-night {
    background-color: #0a0a0a;
}

/* SABBATH SHIMMER: Make the "God-rays" cut through the light */
body.sabbath-active::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(105deg,
            transparent 30%,
            rgba(255, 255, 255, 0.2) 45%,
            rgba(255, 255, 255, 0.6) 50%,
            /* Sharper center beam */
            rgba(255, 255, 255, 0.2) 55%,
            transparent 70%);
    mix-blend-mode: overlay;
    /* Allows it to "glow" over the mesh */
    animation: shimmer 12s infinite linear;
    /* Slightly faster for more visible travel */
}

/* 5. FOCUS FRAME RESPIRATORY SYNC */
.vf-focus-frame {
    transition: box-shadow 1s ease, border-color 1s ease;
    will-change: box-shadow, border-color;
}

.vf-focus-frame.breathing {
    animation: sacredRespiration 10s ease-in-out infinite;
}

.vf-focus-frame.breathing-fast {
    animation: sacredRespiration 3s ease-in-out infinite;
}

/* 6. ANIMATION KEYFRAMES */

/* Kinetic Mesh Displacement */
@keyframes mesh-flow {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 100%;
    }
}

@keyframes mesh-drift {
    0% {
        transform: translate3d(-3%, -3%, 0) scale(1.0);
    }

    100% {
        transform: translate3d(3%, 4%, 0) scale(1.15);
    }
}

/* Respiratory Brightness Pulse */
@keyframes liturgy-breath {

    0%,
    100% {
        filter: blur(45px) brightness(1) saturate(1);
        opacity: 0.9;
    }

    50% {
        filter: blur(45px) brightness(1.05) saturate(1.1);
        opacity: 0.85;
    }
}

/* Sunday Light Beams */
@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Fix: The Bloom Reveal (Removed legacy .vf-atmosphere reference) */
body:has(.vf-bloom-run)::before {
    animation: vf-bg-bloom-reveal 6s cubic-bezier(0.16, 1, 0.3, 1) forwards,
        mesh-flow 25s ease-in-out infinite alternate,
        mesh-drift 35s ease-in-out infinite alternate !important;
}

@keyframes vf-bg-bloom-reveal {
    0% {
        filter: blur(55px) brightness(0.9) saturate(0.8);
    }

    100% {
        filter: blur(45px) brightness(1) saturate(1);
    }
}

/* Frame Pulse */
@keyframes sacredRespiration {

    0%,
    100% {
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        border-color: rgba(42, 42, 42, 0.1);
    }

    50% {
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
        border-color: rgba(42, 42, 42, 0.25);
    }
}

/* Strip solid backgrounds from theme containers to reveal the mesh */
#page,
#main,
.site-main,
.guidance-section,
.votd-wrapper,
#vf-generator,
.generator-wrapper,
.vf-footer {
    background: transparent !important;
    position: relative;
    z-index: 2;
}

/* =========================================================
   Atmosphere-aware UI tokens (text, borders, surfaces)
   ========================================================= */

/* Defaults for light atmospheres */
body.atmosphere-morning,
body.atmosphere-daylight,
body.atmosphere-evening {
    --vf-ink: rgba(26, 26, 26, 0.92);
    --vf-ink-muted: rgba(26, 26, 26, 0.72);
    --vf-border: rgba(0, 0, 0, 0.10);
    --vf-surface: rgba(255, 255, 255, 0.72);
    --vf-surface-strong: rgba(255, 255, 255, 0.88);
    --vf-accent: var(--covenant-accent);
}

/* Night: readable ink + softer borders + dark surfaces */
body.atmosphere-night {
    --vf-ink: rgba(255, 255, 255, 0.92);
    --vf-ink-muted: rgba(255, 255, 255, 0.72);
    --vf-border: rgba(255, 255, 255, 0.14);
    --vf-surface: rgba(18, 18, 18, 0.55);
    --vf-surface-strong: rgba(18, 18, 18, 0.72);

    /* Accent must be lighter on dark backgrounds */
    --vf-accent: rgba(255, 190, 195, 0.95);

    /* Improves native form controls on dark */
    color-scheme: dark;
}

/* Map your existing theme tokens to the atmosphere tokens */
body[class*="atmosphere-"] {
    --color-text: var(--vf-ink);
    --grounded-text: var(--vf-ink);
    --color-muted: var(--vf-ink-muted);

    --color-border: var(--vf-border);
    --color-accent: var(--vf-accent);

    /* Keep existing “covenant” names working */
    --covenant-accent: var(--vf-accent);
    --covenant-border: var(--vf-border);

    /* IMPORTANT: Make “mercy” surfaces atmosphere-aware */
    --mercy-base: var(--vf-surface-strong);
    --mercy-contrast: var(--vf-ink);
}

/* Ensure WP-style buttons also adapt */
body[class*="atmosphere-"] .button.button-primary,
body[class*="atmosphere-"] button.button-primary,
body[class*="atmosphere-"] input.button-primary {
    background-color: var(--covenant-accent);
    border-color: var(--covenant-accent);
    color: var(--mercy-base);
}

body[class*="atmosphere-"] .button.button-primary:hover,
body[class*="atmosphere-"] button.button-primary:hover,
body[class*="atmosphere-"] input.button-primary:hover {
    background-color: var(--mercy-base);
    color: var(--covenant-accent);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {

    body:not(.vf-motion-force)::before,
    body:not(.vf-motion-force)::after {
        animation: none !important;
    }

    body:not(.vf-motion-force) .vf-focus-frame.breathing,
    body:not(.vf-motion-force) .vf-focus-frame.breathing-fast {
        animation: none !important;
    }
}

/* ==========================================================================
   VerseFlow — Atmosphere UI Adaptation Layer
   Goal: background changes AND UI (text/header/footer/buttons) adapts too.
   Paste at BOTTOM of atmospheres.css so it wins the cascade.
   ========================================================================== */

/* 1) UI Tokens (defaults for any atmosphere page) */
body[class*="atmosphere-"] {
    /* Core readable ink */
    --vf-ui-text: rgba(17, 17, 17, 0.92);
    --vf-ui-muted: rgba(17, 17, 17, 0.72);

    /* Accent (keep existing unless overridden below) */
    --vf-ui-accent: var(--covenant-accent);

    /* Glass surfaces */
    --vf-ui-bar-bg: rgba(255, 255, 255, 0.78);
    --vf-ui-bar-border: rgba(17, 17, 17, 0.12);

    --vf-ui-card-bg: rgba(255, 255, 255, 0.42);
    --vf-ui-card-border: rgba(17, 17, 17, 0.14);

    /* CTA button tokens */
    --vf-ui-btn-bg: rgba(17, 17, 17, 0.88);
    --vf-ui-btn-text: rgba(246, 239, 226, 0.96);
    /* “mercy” light */
    --vf-ui-btn-border: transparent;

    --vf-ui-btn-bg-hover: rgba(246, 239, 226, 0.96);
    --vf-ui-btn-text-hover: var(--vf-ui-accent);
    --vf-ui-btn-border-hover: var(--vf-ui-accent);

    /* Label visibility (mood buttons) */
    --vf-ui-label-opacity: 0.88;

    /* Map to existing theme vars used everywhere */
    --grounded-text: var(--vf-ui-text);
    --color-text: var(--vf-ui-text);
    --color-muted: var(--vf-ui-muted);
    --mercy-base: rgba(246, 239, 226, 0.96);
}

/* 2) Night mode overrides */
body.atmosphere-night {
    --vf-ui-text: rgba(255, 255, 255, 0.92);
    --vf-ui-muted: rgba(255, 255, 255, 0.72);

    /* Make the accent readable on dark */
    --vf-ui-accent: rgba(243, 179, 195, 0.95);
    /* soft rose */
    --covenant-accent: rgba(243, 179, 195, 0.95);

    /* Dark glass bars */
    --vf-ui-bar-bg: rgba(18, 18, 18, 0.56);
    --vf-ui-bar-border: rgba(255, 255, 255, 0.12);

    --vf-ui-card-bg: rgba(18, 18, 18, 0.48);
    --vf-ui-card-border: rgba(255, 255, 255, 0.14);

    /* CTAs become “lantern” light on dark */
    --vf-ui-btn-bg: rgba(255, 255, 255, 0.88);
    --vf-ui-btn-text: rgba(18, 18, 18, 0.92);
    --vf-ui-btn-border: rgba(255, 255, 255, 0.12);

    --vf-ui-btn-bg-hover: rgba(255, 255, 255, 0.96);
    --vf-ui-btn-text-hover: rgba(18, 18, 18, 0.92);
    --vf-ui-btn-border-hover: rgba(255, 255, 255, 0.18);

    --vf-ui-label-opacity: 0.95;

    /* Helps any component that uses mercy-base as a “light text” token */
    --mercy-base: rgba(18, 18, 18, 0.92);
}

/* Optional: prevent night from feeling like a “black sheet” */
body.atmosphere-night::before {
    opacity: 0.72;
    filter: blur(48px) brightness(1.22) saturate(1.12);
}

/* 3) Header + Footer should adapt with the atmosphere */
body[class*="atmosphere-"] .vf-header,
body[class*="atmosphere-"] .vf-footer {
    background: var(--vf-ui-bar-bg);
    color: var(--vf-ui-text);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body[class*="atmosphere-"] .vf-header {
    border-bottom: 1px solid var(--vf-ui-bar-border);
}

body[class*="atmosphere-"] .vf-footer {
    border-top: 1px solid var(--vf-ui-bar-border);
    border-bottom: 0;
}

/* Force nav/logo/footer links to follow readable ink */
body[class*="atmosphere-"] .vf-logo a,
body[class*="atmosphere-"] .vf-nav a,
body[class*="atmosphere-"] .vf-footer a {
    color: var(--vf-ui-text) !important;
}

body[class*="atmosphere-"] .vf-nav a:hover,
body[class*="atmosphere-"] .vf-nav a:focus,
body[class*="atmosphere-"] .vf-nav .is-active>a {
    color: var(--vf-ui-accent) !important;
}

/* 4) Buttons: ensure text is readable in every atmosphere */
body[class*="atmosphere-"] .vf-seek-button,
body[class*="atmosphere-"] .vf-peace-button,
body[class*="atmosphere-"] .button,
body[class*="atmosphere-"] a.button,
body[class*="atmosphere-"] button.button,
body[class*="atmosphere-"] button.button-primary,
body[class*="atmosphere-"] .button-primary {
    background-color: var(--vf-ui-btn-bg);
    color: var(--vf-ui-btn-text);
    border-color: var(--vf-ui-btn-border);
}

body[class*="atmosphere-"] .vf-seek-button:hover,
body[class*="atmosphere-"] .vf-seek-button:focus,
body[class*="atmosphere-"] .vf-peace-button:hover,
body[class*="atmosphere-"] .vf-peace-button:focus,
body[class*="atmosphere-"] .button:hover,
body[class*="atmosphere-"] .button:focus,
body[class*="atmosphere-"] .button-primary:hover,
body[class*="atmosphere-"] .button-primary:focus {
    background-color: var(--vf-ui-btn-bg-hover);
    color: var(--vf-ui-btn-text-hover);
    border-color: var(--vf-ui-btn-border-hover);
}

/* 5) Mood buttons: fix “label only visible on hover” */
body[class*="atmosphere-"] .mood-btn {
    opacity: 1;
    /* remove the global fade that kills readability */
    background-color: var(--vf-ui-card-bg);
    border-color: var(--vf-ui-card-border);
    color: var(--vf-ui-text);
}

/* Ticket #VF-029: Night Mode Text Correction */
body.atmosphere-night .vf-brand-text {
    color: #ffffff;
    /* Override to white for dark backgrounds */
    mix-blend-mode: screen;
    /* Light-on-dark blending */
    opacity: 0.95;
}


body[class*="atmosphere-"] .mood-btn .mood-label {
    opacity: var(--vf-ui-label-opacity);
    color: inherit;
}

/* Keep your existing hover behavior, but don’t hide the label */
body[class*="atmosphere-"] .mood-btn:hover,
body[class*="atmosphere-"] .mood-btn:focus-visible {
    opacity: 1;
}

/* 6) General text safety for sanctuary pages */
body[class*="atmosphere-"] .site-main,
body[class*="atmosphere-"] .entry-content,
body[class*="atmosphere-"] .page-header,
body[class*="atmosphere-"] .vf-footer-curator-note {
    color: var(--vf-ui-text);
}