/* ============================================================================
 * lumen-pages.css — every page is distinct: its own color story,
 * its own hero photograph, its own confident motion.
 *
 * Added 2026-06-15 21:20 per Yousef ("ولا وحدة بتشبه التانية").
 *
 * Each page gets a `body[data-section="<name>"]` attribute set by
 * lumen-pages.js based on URL. CSS targets that to render a fully
 * different palette, photograph, and rhythm.
 * ========================================================================== */

/* ─── 0. Foundation: per-page accent variables (most are used by other CSS) */
body[data-section="home"]        { --page-accent: #D4A843; --page-glow: rgba(212,168,67,0.55); --page-ink-on: #2A2D38; }
body[data-section="learn"]       { --page-accent: #4477A0; --page-glow: rgba(146,191,230,0.65); --page-ink-on: #FFFFFF; }
body[data-section="devotionals"] { --page-accent: #5A7C36; --page-glow: rgba(135,168,98,0.60);  --page-ink-on: #FFFFFF; }
body[data-section="sanctuary"]   { --page-accent: #6E5BAA; --page-glow: rgba(182,164,214,0.55); --page-ink-on: #FFFFFF; }
body[data-section="verse-map"]   { --page-accent: #1B3F65; --page-glow: rgba(146,191,230,0.55); --page-ink-on: #FFFFFF; }
body[data-section="year"]        { --page-accent: #B97F1A; --page-glow: rgba(244,167,139,0.55); --page-ink-on: #2A2D38; }
body[data-section="store"]       { --page-accent: #B45D3F; --page-glow: rgba(255,186,146,0.65); --page-ink-on: #2A2D38; }
body[data-section="safety"]      { --page-accent: #B7565E; --page-glow: rgba(240,155,161,0.65); --page-ink-on: #FFFFFF; }
body[data-section="path"]        { --page-accent: #8B5234; --page-glow: rgba(244,167,139,0.55); --page-ink-on: #FFFFFF; }
body[data-section="reflect"]     { --page-accent: #4B8A6C; --page-glow: rgba(181,228,202,0.65); --page-ink-on: #2A2D38; }

/* ─── 1. PER-PAGE HERO PALETTES (each completely different) ──────────────── */

/* HOME — gold dawn over cream */
body[data-section="home"] .cinematic-hero,
body[data-section="home"] .page-hero {
    background: linear-gradient(160deg,
        #FFF6DC 0%, #F4D77A 20%, #E8C067 40%, #FFBA92 65%, #F4A78B 100%) !important;
}

/* LEARN — cool study: sky + lavender + cream */
body[data-section="learn"] .cinematic-hero,
body[data-section="learn"] .page-hero {
    background: linear-gradient(165deg,
        #EEF5FB 0%, #BDD9F2 28%, #92BFE6 55%, #D4C9E8 80%, #B6A4D6 100%) !important;
}

/* DEVOTIONALS — forest dawn: sage + mint + sky */
body[data-section="devotionals"] .cinematic-hero,
body[data-section="devotionals"] .page-hero {
    background: linear-gradient(170deg,
        #DFF5E8 0%, #B5E4CA 22%, #A8C385 50%, #87A862 80%, #5A7C36 100%) !important;
}

/* SANCTUARY — already its own (use original sanctuary sky variant). */
body[data-section="sanctuary"] .cinematic-hero,
body[data-section="sanctuary"] .page-hero,
body[data-section="sanctuary"] .sanctuary-hero {
    background: linear-gradient(180deg,
        #FFE5C8 0%, #F8BDC3 35%, #D4C9E8 60%, #DEEAF6 100%) !important;
}

/* VERSE MAP — deep cobalt sea + starry sky */
body[data-section="verse-map"] .cinematic-hero,
body[data-section="verse-map"] .page-hero {
    background:
        radial-gradient(circle at 30% 20%, rgba(244,215,122,0.20) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(146,191,230,0.30) 0%, transparent 40%),
        linear-gradient(180deg, #0E1A26 0%, #11283F 35%, #1B3F65 65%, #2A5380 100%) !important;
    color: #F2E9C9 !important;
}
body[data-section="verse-map"] .cinematic-hero__h1,
body[data-section="verse-map"] .page-hero__title {
    color: #FFF6DC !important;
    text-shadow: 0 0 20px rgba(244,215,122,0.45);
}
body[data-section="verse-map"] .cinematic-hero__lede,
body[data-section="verse-map"] .page-hero__lede { color: #DEEAF6 !important; }

/* YEAR — liturgical sunset: peach + rose + butter */
body[data-section="year"] .cinematic-hero,
body[data-section="year"] .page-hero {
    background: linear-gradient(175deg,
        #FFF1A8 0%, #F4D77A 22%, #FFBA92 45%, #F09BA1 75%, #DB7A82 100%) !important;
}

/* STORE — warm market: peach + coral + butter */
body[data-section="store"] .cinematic-hero,
body[data-section="store"] .page-hero {
    background: linear-gradient(165deg,
        #FFEDDD 0%, #FFD4B8 25%, #FFBA92 50%, #F4A78B 75%, #DB7A82 100%) !important;
}

/* SAFETY — protective rose + sage embrace */
body[data-section="safety"] .cinematic-hero,
body[data-section="safety"] .page-hero {
    background: linear-gradient(170deg,
        #FBE5E7 0%, #F8BDC3 25%, #F09BA1 50%, #DB7A82 70%, #B7565E 100%) !important;
}

/* PATH — earthy journey: coral + cream + lav */
body[data-section="path"] .cinematic-hero,
body[data-section="path"] .page-hero {
    background: linear-gradient(165deg,
        #FFEDDD 0%, #F4A78B 25%, #DB7A82 45%, #B6A4D6 70%, #92BFE6 100%) !important;
}

/* REFLECT — still water: mint + sky + cream */
body[data-section="reflect"] .cinematic-hero,
body[data-section="reflect"] .page-hero {
    background: linear-gradient(175deg,
        #FFFEFB 0%, #DFF5E8 25%, #B5E4CA 50%, #BDD9F2 75%, #92BFE6 100%) !important;
}

/* ─── 2. PER-PAGE HERO PHOTO (CC-licensed Pexels CDN, hot-linked) ─────────
 * Each hero gets a real, thematic photograph behind the gradient.
 * The gradient sits on top at 65% opacity to keep the brand mood. */
body[data-section="home"]        .cinematic-hero,
body[data-section="home"]        .page-hero,
body[data-section="learn"]       .cinematic-hero,
body[data-section="learn"]       .page-hero,
body[data-section="devotionals"] .cinematic-hero,
body[data-section="devotionals"] .page-hero,
body[data-section="verse-map"]   .cinematic-hero,
body[data-section="verse-map"]   .page-hero,
body[data-section="year"]        .cinematic-hero,
body[data-section="year"]        .page-hero,
body[data-section="store"]       .cinematic-hero,
body[data-section="store"]       .page-hero,
body[data-section="safety"]      .cinematic-hero,
body[data-section="safety"]      .page-hero,
body[data-section="path"]        .cinematic-hero,
body[data-section="path"]        .page-hero,
body[data-section="reflect"]     .cinematic-hero,
body[data-section="reflect"]     .page-hero { isolation: isolate; }

.lumen-hero-photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}
.lumen-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    transform-origin: 50% 50%;
    mix-blend-mode: multiply;
    opacity: 0.78;
}
@media (prefers-reduced-motion: no-preference) {
    .lumen-hero-photo img { animation: lumen-page-kenburns 38s ease-in-out infinite alternate; }
    @keyframes lumen-page-kenburns {
        from { transform: scale(1.04) translate3d(0, 0, 0); }
        to   { transform: scale(1.18) translate3d(-3%, -2%, 0); }
    }
}
body[data-section="verse-map"] .lumen-hero-photo img { mix-blend-mode: screen; opacity: 0.55; }

/* ─── 3. Confident motion — bold reveals, never timid ─────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    /* Hero title — slide up + scale 0.7→1 on load */
    .cinematic-hero__h1,
    .page-hero__title,
    .store-hero__h1,
    .rp-hero__h1 {
        animation: lumen-hero-title 900ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
    .cinematic-hero__lede,
    .page-hero__lede,
    .store-hero__lede,
    .rp-hero__lede {
        animation: lumen-hero-lede 1100ms cubic-bezier(0.22, 1, 0.36, 1) 220ms both;
    }
    .cinematic-hero__kicker,
    .page-hero__kicker,
    .store-hero__kicker,
    .rp-hero__kicker {
        animation: lumen-hero-kicker 700ms ease 80ms both;
    }
    @keyframes lumen-hero-title {
        from { opacity: 0; transform: translateY(30px) scale(0.85); letter-spacing: 0.05em; }
        to   { opacity: 1; transform: translateY(0)    scale(1);     letter-spacing: -0.012em; }
    }
    @keyframes lumen-hero-lede {
        from { opacity: 0; transform: translateY(18px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes lumen-hero-kicker {
        from { opacity: 0; transform: translateY(-8px); letter-spacing: 0.05em; }
        to   { opacity: 1; transform: translateY(0);     letter-spacing: 0.20em; }
    }

    /* Section reveals — confident slide + scale */
    [data-reveal]:not(.is-revealed) > *,
    main > section:not(.is-revealed) > *:not(.lumen-hero-photo):not(.lumen-hero-scenery):not(.lumen-liturgy-mark) {
        opacity: 0;
        transform: translateY(40px);
        transition: opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
                    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
    }
    [data-reveal].is-revealed > *,
    main > section.is-revealed > *:not(.lumen-hero-photo):not(.lumen-hero-scenery):not(.lumen-liturgy-mark) {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── 4. Floating shape decorations (each page distinct, layered) ────────── */
.lumen-page-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}
.lumen-page-shapes__shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(28px);
    opacity: 0.55;
    mix-blend-mode: soft-light;
}
@media (prefers-reduced-motion: no-preference) {
    .lumen-page-shapes__shape {
        animation: lumen-shape-drift 40s ease-in-out infinite alternate;
    }
    .lumen-page-shapes__shape:nth-child(2) { animation-duration: 52s; animation-delay: -8s; }
    .lumen-page-shapes__shape:nth-child(3) { animation-duration: 33s; animation-delay: -16s; }
    .lumen-page-shapes__shape:nth-child(4) { animation-duration: 46s; animation-delay: -24s; }
    @keyframes lumen-shape-drift {
        0%   { transform: translate(0, 0)         scale(1);   }
        50%  { transform: translate(8vw, -3vh)    scale(1.2); }
        100% { transform: translate(-4vw, 5vh)    scale(0.9); }
    }
}
/* Per-page shape colors */
body[data-section="home"] .lumen-page-shapes__shape:nth-child(1) { background: #F4D77A; top: 8%;  left: 12%; width: 320px; height: 320px; }
body[data-section="home"] .lumen-page-shapes__shape:nth-child(2) { background: #FFBA92; top: 40%; right: 8%; width: 260px; height: 260px; }
body[data-section="home"] .lumen-page-shapes__shape:nth-child(3) { background: #F09BA1; bottom: 8%; left: 25%; width: 220px; height: 220px; }
body[data-section="home"] .lumen-page-shapes__shape:nth-child(4) { background: #87A862; top: 20%; right: 30%; width: 180px; height: 180px; }

body[data-section="learn"] .lumen-page-shapes__shape:nth-child(1) { background: #92BFE6; top: 12%; left: 10%; width: 340px; height: 340px; }
body[data-section="learn"] .lumen-page-shapes__shape:nth-child(2) { background: #B6A4D6; top: 50%; right: 12%; width: 290px; height: 290px; }
body[data-section="learn"] .lumen-page-shapes__shape:nth-child(3) { background: #F4D77A; bottom: 12%; left: 30%; width: 200px; height: 200px; }
body[data-section="learn"] .lumen-page-shapes__shape:nth-child(4) { background: #DFF5E8; top: 26%; right: 38%; width: 160px; height: 160px; }

body[data-section="devotionals"] .lumen-page-shapes__shape:nth-child(1) { background: #87A862; top: 6%;  left: 8%;  width: 360px; height: 360px; }
body[data-section="devotionals"] .lumen-page-shapes__shape:nth-child(2) { background: #B5E4CA; top: 35%; right: 10%; width: 280px; height: 280px; }
body[data-section="devotionals"] .lumen-page-shapes__shape:nth-child(3) { background: #FFF6DC; bottom: 10%; left: 28%; width: 230px; height: 230px; }
body[data-section="devotionals"] .lumen-page-shapes__shape:nth-child(4) { background: #BDD9F2; top: 22%; right: 35%; width: 180px; height: 180px; }

body[data-section="store"] .lumen-page-shapes__shape:nth-child(1) { background: #FFBA92; top: 10%; left: 10%; width: 330px; height: 330px; }
body[data-section="store"] .lumen-page-shapes__shape:nth-child(2) { background: #F4A78B; top: 45%; right: 10%; width: 270px; height: 270px; }
body[data-section="store"] .lumen-page-shapes__shape:nth-child(3) { background: #F4D77A; bottom: 8%; left: 32%; width: 210px; height: 210px; }
body[data-section="store"] .lumen-page-shapes__shape:nth-child(4) { background: #DB7A82; top: 22%; right: 32%; width: 170px; height: 170px; }

body[data-section="year"] .lumen-page-shapes__shape:nth-child(1) { background: #FFF1A8; top: 6%;  left: 10%; width: 320px; height: 320px; }
body[data-section="year"] .lumen-page-shapes__shape:nth-child(2) { background: #DB7A82; top: 40%; right: 10%; width: 260px; height: 260px; }
body[data-section="year"] .lumen-page-shapes__shape:nth-child(3) { background: #F4A78B; bottom: 10%; left: 26%; width: 220px; height: 220px; }
body[data-section="year"] .lumen-page-shapes__shape:nth-child(4) { background: #B6A4D6; top: 20%; right: 36%; width: 180px; height: 180px; }

body[data-section="safety"] .lumen-page-shapes__shape:nth-child(1) { background: #F8BDC3; top: 8%;  left: 10%; width: 340px; height: 340px; }
body[data-section="safety"] .lumen-page-shapes__shape:nth-child(2) { background: #F09BA1; top: 45%; right: 10%; width: 270px; height: 270px; }
body[data-section="safety"] .lumen-page-shapes__shape:nth-child(3) { background: #87A862; bottom: 8%; left: 28%; width: 220px; height: 220px; }
body[data-section="safety"] .lumen-page-shapes__shape:nth-child(4) { background: #FFF6DC; top: 22%; right: 36%; width: 180px; height: 180px; }

body[data-section="path"] .lumen-page-shapes__shape:nth-child(1) { background: #F4A78B; top: 10%; left: 10%; width: 320px; height: 320px; }
body[data-section="path"] .lumen-page-shapes__shape:nth-child(2) { background: #B6A4D6; top: 45%; right: 12%; width: 280px; height: 280px; }
body[data-section="path"] .lumen-page-shapes__shape:nth-child(3) { background: #92BFE6; bottom: 10%; left: 30%; width: 220px; height: 220px; }
body[data-section="path"] .lumen-page-shapes__shape:nth-child(4) { background: #DB7A82; top: 24%; right: 34%; width: 170px; height: 170px; }

body[data-section="reflect"] .lumen-page-shapes__shape:nth-child(1) { background: #B5E4CA; top: 10%; left: 12%; width: 310px; height: 310px; }
body[data-section="reflect"] .lumen-page-shapes__shape:nth-child(2) { background: #BDD9F2; top: 45%; right: 12%; width: 270px; height: 270px; }
body[data-section="reflect"] .lumen-page-shapes__shape:nth-child(3) { background: #DFF5E8; bottom: 10%; left: 30%; width: 230px; height: 230px; }
body[data-section="reflect"] .lumen-page-shapes__shape:nth-child(4) { background: #FFFEFB; top: 24%; right: 35%; width: 180px; height: 180px; }

body[data-section="verse-map"] .lumen-page-shapes__shape:nth-child(1) { background: #92BFE6; top: 8%;  left: 10%; width: 340px; height: 340px; opacity: 0.30; }
body[data-section="verse-map"] .lumen-page-shapes__shape:nth-child(2) { background: #F4D77A; top: 45%; right: 10%; width: 280px; height: 280px; opacity: 0.30; }
body[data-section="verse-map"] .lumen-page-shapes__shape:nth-child(3) { background: #B6A4D6; bottom: 10%; left: 28%; width: 220px; height: 220px; opacity: 0.30; }
body[data-section="verse-map"] .lumen-page-shapes__shape:nth-child(4) { background: #FFF6DC; top: 22%; right: 35%; width: 180px; height: 180px; opacity: 0.40; }

/* ─── 5. Per-page kicker / accent text & buttons ─────────────────────────── */
body[data-section] .cinematic-hero__kicker,
body[data-section] .page-hero__kicker,
body[data-section] .lumen-section__kicker { color: var(--page-accent) !important; }

body[data-section] .btn--primary,
body[data-section] .cinematic-hero__cta a,
body[data-section] .lumen-modal__cta {
    background: var(--page-accent) !important;
    border-color: var(--page-accent) !important;
    color: var(--page-ink-on, #fff) !important;
}

/* ─── 6. Confident scroll-parallax for hero photo ─────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .lumen-hero-photo { will-change: transform; }
}

/* ─── 7. Aria-current page accent flowing through nav ─────────────────────── */
body[data-section] .site-nav--icons a.nav-icon[aria-current="page"] {
    background: color-mix(in srgb, var(--page-accent) 22%, transparent) !important;
    border-color: var(--page-accent) !important;
}
body[data-section] .site-nav--icons a.nav-icon[aria-current="page"]::before,
body[data-section] .site-nav--icons a.nav-icon[aria-current="page"]::after {
    border-color: var(--page-accent) !important;
}