/* ============================================================================
 * joy-v2-images.css — joyful imagery treatment + olive accent + dark mode
 * Yousef directive 2026-06-14: refresh all imagery with a fresh, joyful spirit.
 *
 * Purely additive. No existing rules overridden without higher-specificity
 * intent. Loaded LAST in base.njk after luminous.css.
 * ============================================================================ */

/* ─── 1. Extended palette additions — olive (hope, wisdom) ──────────────── */
:root {
    --joy-olive:        #8FA079;   /* soft olive green */
    --joy-olive-soft:   #C8D2BB;
    --joy-olive-deep:   #5E6E50;
    --joy-olive-bg:     rgba(143, 160, 121, 0.08);

    /* Morning sunlight gradient — "Joy in the morning" */
    --joy-morning:
        linear-gradient(135deg,
            rgba(255, 235, 165, 0.55) 0%,
            rgba(244, 215, 122, 0.32) 30%,
            rgba(255, 212, 184, 0.28) 60%,
            rgba(189, 217, 242, 0.18) 100%);

    /* Sunset gradient — "Evening light" */
    --joy-sunset:
        linear-gradient(180deg,
            rgba(255, 212, 184, 0.45) 0%,
            rgba(244, 167, 139, 0.32) 50%,
            rgba(212, 168, 67, 0.18) 100%);

    /* Olive + gold — anointing */
    --joy-anointing:
        linear-gradient(120deg,
            rgba(143, 160, 121, 0.22) 0%,
            rgba(232, 192, 103, 0.28) 100%);
}

/* ─── 2. Hero — joyful morning treatment over existing photo ─────────────── */
.cinematic-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--joy-morning);
    mix-blend-mode: screen;
    opacity: 0.85;
    pointer-events: none;
    transition: opacity 1200ms ease;
}
@media (prefers-reduced-motion: no-preference) {
    .cinematic-hero__media::after { animation: lumen-morning-shift 24s ease-in-out infinite alternate; }
    @keyframes lumen-morning-shift {
        from { opacity: 0.62; }
        to   { opacity: 0.88; }
    }
}

/* Replace hard "veil" darkness with warm cream wash */
.cinematic-hero__veil {
    background:
        radial-gradient(ellipse at top, rgba(255, 246, 220, 0.42) 0%, transparent 60%),
        linear-gradient(180deg, transparent 0%, rgba(253, 251, 245, 0.85) 100%) !important;
}

/* ─── 3. Section heroes — joyful overlay on all *_hero.jpg images ───────── */
[class*="-hero__media"]::after,
.hero-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--joy-morning);
    mix-blend-mode: soft-light;
    opacity: 0.75;
    pointer-events: none;
}

/* ─── 4. Card hover — lift + olive ring (Mont-fort warmth) ──────────────── */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .card,
    .feature-card,
    .episode-card,
    .hymn-card,
    .feature-grid > *,
    .tech-grid > *,
    article.card,
    a.card-link {
        transition:
            transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
            box-shadow 360ms cubic-bezier(0.22, 1, 0.36, 1),
            background-color 240ms ease,
            border-color 240ms ease;
        will-change: transform;
    }
    .card:hover,
    .feature-card:hover,
    .episode-card:hover,
    .hymn-card:hover,
    .feature-grid > *:hover,
    .tech-grid > *:hover,
    article.card:hover {
        transform: translate3d(0, -4px, 0);
        box-shadow:
            0 18px 40px -16px rgba(143, 160, 121, 0.25),
            0 4px 14px -4px rgba(13, 17, 23, 0.10);
    }
}

/* ─── 5. Olive accent rule — used as new section divider color ──────────── */
.section-divider__mark { color: var(--joy-olive); }
.section-divider__mark svg line { stroke: var(--joy-olive-deep); }

/* ─── 6. Verse band — anointing gradient backdrop ───────────────────────── */
.verse-band {
    background: var(--joy-anointing) !important;
    border-top: 1px solid rgba(143, 160, 121, 0.18);
    border-bottom: 1px solid rgba(232, 192, 103, 0.22);
}

/* ─── 7. Buttons — gentle gold gradient + olive ghost ───────────────────── */
.btn--gold {
    background-image: linear-gradient(135deg, #F4D77A 0%, #D4A843 100%);
    border: 1px solid rgba(184, 144, 44, 0.5);
    color: #1E3050 !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.55),
        0 8px 20px -10px rgba(212, 168, 67, 0.55);
}
.btn--gold:hover {
    background-image: linear-gradient(135deg, #FFEBA5 0%, #E8C067 100%);
}
.btn--ghost {
    border: 1px solid var(--joy-olive) !important;
    color: var(--joy-olive-deep) !important;
}
.btn--ghost:hover {
    background-color: var(--joy-olive-bg);
    border-color: var(--joy-olive-deep) !important;
}

/* ─── 8. Dark mode — gentle navy + warm gold (auto via prefers-color-scheme) ─ */
@media (prefers-color-scheme: dark) {
    :root.allow-dark-mode {
        --cream: #1A2030;
        --cream-warm: #1E2538;
        --paper: #232B40;
        --ink: #E8E2D2;
        --ink-soft: #B8B0A0;
        --joy-cream: #1E2538;
        --joy-cream-warm: #232B40;
        --joy-olive: #B0BFA2;
        --joy-olive-soft: #5E6E50;
        --joy-olive-deep: #C8D2BB;
    }
    :root.allow-dark-mode body { background-color: var(--paper); color: var(--ink); }
    :root.allow-dark-mode .site-header { background-color: rgba(35, 43, 64, 0.85); }
    :root.allow-dark-mode .cinematic-hero__media::after { mix-blend-mode: overlay; opacity: 0.45; }
    :root.allow-dark-mode .cinematic-hero__veil {
        background: linear-gradient(180deg, transparent 0%, rgba(13, 17, 23, 0.75) 100%) !important;
    }
}

/* ─── 9. Page-specific morning glow ─────────────────────────────────────── */
main {
    background-image:
        radial-gradient(ellipse at top, rgba(255, 235, 165, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, transparent 0%, rgba(232, 192, 103, 0.02) 100%);
    background-attachment: fixed;
}

/* ─── 10. Subtle border-glow on focus rings (a11y + premium) ────────────── */
*:focus-visible {
    outline: 2px solid var(--joy-olive-deep);
    outline-offset: 3px;
    box-shadow: 0 0 0 6px rgba(143, 160, 121, 0.18);
    transition: box-shadow 200ms ease, outline-color 200ms ease;
}

/* ─── 11. Image lazy-load fade-in ───────────────────────────────────────── */
img.lumen-fade-in {
    opacity: 0;
    transition: opacity 700ms ease;
}
img.lumen-fade-in.is-loaded { opacity: 1; }

/* ─── 12. Site footer warmth ────────────────────────────────────────────── */
.site-footer {
    background-image: linear-gradient(180deg, rgba(232, 192, 103, 0.04) 0%, transparent 30%);
}
.footer-bless a:hover { color: var(--joy-olive-deep) !important; }

/* ─── 13. Marquee verse band (extra) — for dedicated marquee blocks ─────── */
.joy-marquee {
    overflow: hidden;
    white-space: nowrap;
    padding: 1.5rem 0;
    border-top: 1px solid var(--gold-tint);
    border-bottom: 1px solid var(--gold-tint);
    background: var(--joy-anointing);
}
.joy-marquee__track {
    display: inline-block;
    animation: lumen-marquee 60s linear infinite;
    font-family: var(--serif);
    font-style: italic;
    color: var(--joy-olive-deep);
    font-size: 1.4rem;
}
.joy-marquee__track > span { padding: 0 3rem; }
.joy-marquee__track > span::before {
    content: "✦";
    margin-right: 0.6em;
    color: var(--joy-gold);
}
@keyframes lumen-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .joy-marquee__track { animation: none; }
}