/* ============================================================================
 * lumen-identities.css — 10 page identities, each unmistakably its own.
 *
 * Yousef (2026-06-15 21:31): each page must look 100% different from the rest,
 * with a Christian-meets-technology visual story.
 *
 * I cannot reach Higgsfield/Leonardo from this session (no MCP access to
 * those services right now), so the artwork below is hand-built SVG/CSS
 * craft — vector illustrations + bespoke animation per page. Where you
 * later supply Higgsfield or Leonardo images, drop them into
 *   src/assets/img/identity/{home,learn,...}.{png|webp}
 * and the JS will swap them in automatically.
 *
 * Each identity below is BUILT FROM SCRATCH — different hero geometry,
 * different illustration, different motion. Not a re-skin.
 * ========================================================================== */

/* ─── HOME · "The Doorway" — radiating gold cross with KJV breath ───────── */
body[data-section="home"] .lumen-identity {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
body[data-section="home"] .lumen-identity__center {
    position: relative;
    width: clamp(220px, 30vw, 420px);
    height: clamp(220px, 30vw, 420px);
}
body[data-section="home"] .lumen-identity__halo {
    position: absolute; inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at center,
        rgba(255, 246, 220, 0.85) 0%,
        rgba(244, 215, 122, 0.55) 30%,
        rgba(244, 167, 139, 0.20) 60%,
        transparent 80%);
    animation: home-halo-pulse 6s ease-in-out infinite;
}
@keyframes home-halo-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.85; }
    50%      { transform: scale(1.10); opacity: 1; }
}
body[data-section="home"] .lumen-identity__cross {
    position: absolute;
    top: 50%; left: 50%;
    width: 40%; height: 40%;
    transform: translate(-50%, -50%);
    color: #B97F1A;
    filter: drop-shadow(0 0 24px rgba(212, 168, 67, 0.65));
}
body[data-section="home"] .lumen-identity__rays {
    position: absolute; inset: -30%;
    background: conic-gradient(from -90deg at 50% 50%,
        transparent 0deg,    rgba(244, 215, 122, 0.30) 8deg,
        transparent 16deg,   transparent 35deg,
        rgba(255, 246, 220, 0.22) 43deg, transparent 52deg,
        transparent 70deg,   rgba(244, 215, 122, 0.25) 78deg,
        transparent 86deg,   transparent 105deg,
        rgba(255, 246, 220, 0.20) 113deg, transparent 122deg,
        transparent 360deg);
    animation: home-rays-spin 80s linear infinite;
    mix-blend-mode: screen;
}
@keyframes home-rays-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }


/* ─── LEARN · "The Classroom" — book + neural traces ───────────────────── */
body[data-section="learn"] .lumen-identity {
    position: absolute;
    bottom: -2%;
    right: 4%;
    width: clamp(280px, 32vw, 480px);
    height: clamp(220px, 25vw, 340px);
    z-index: 2;
    pointer-events: none;
}
body[data-section="learn"] .lumen-identity__book {
    width: 100%; height: 100%;
    color: #4477A0;
    filter: drop-shadow(0 8px 24px rgba(146, 191, 230, 0.55));
}
body[data-section="learn"] .lumen-identity__book line.trace { stroke-dasharray: 220; stroke-dashoffset: 220; animation: learn-trace 4s ease-in-out infinite; }
body[data-section="learn"] .lumen-identity__book line.trace:nth-child(2) { animation-delay: 0.5s; }
body[data-section="learn"] .lumen-identity__book line.trace:nth-child(3) { animation-delay: 1.0s; }
body[data-section="learn"] .lumen-identity__book line.trace:nth-child(4) { animation-delay: 1.5s; }
body[data-section="learn"] .lumen-identity__book line.trace:nth-child(5) { animation-delay: 2.0s; }
@keyframes learn-trace {
    0%   { stroke-dashoffset: 220; opacity: 0; }
    20%  { opacity: 1; }
    50%  { stroke-dashoffset: 0;   opacity: 1; }
    100% { stroke-dashoffset:-220; opacity: 0; }
}
body[data-section="learn"] .lumen-identity__book circle.node { fill: #FFF6DC; stroke: #4477A0; stroke-width: 1.4; animation: learn-node 3s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
body[data-section="learn"] .lumen-identity__book circle.node:nth-child(7)  { animation-delay: 0.4s; }
body[data-section="learn"] .lumen-identity__book circle.node:nth-child(8)  { animation-delay: 0.8s; }
body[data-section="learn"] .lumen-identity__book circle.node:nth-child(9)  { animation-delay: 1.2s; }
body[data-section="learn"] .lumen-identity__book circle.node:nth-child(10) { animation-delay: 1.6s; }
@keyframes learn-node {
    0%, 100% { transform: scale(1);    fill: #FFF6DC; }
    50%      { transform: scale(1.4);  fill: #F4D77A; }
}


/* ─── DEVOTIONALS · "The Garden" — growing vine + candle ──────────────── */
body[data-section="devotionals"] .lumen-identity {
    position: absolute;
    bottom: 0; left: 6%;
    width: clamp(260px, 30vw, 460px);
    height: 75%;
    pointer-events: none;
    z-index: 2;
}
body[data-section="devotionals"] .lumen-identity__vine {
    width: 100%; height: 100%;
    color: #5A7C36;
    filter: drop-shadow(0 4px 18px rgba(135, 168, 98, 0.55));
}
body[data-section="devotionals"] .lumen-identity__vine path.stem { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 600; stroke-dashoffset: 600; animation: devo-grow 5s ease-in-out infinite alternate; }
body[data-section="devotionals"] .lumen-identity__vine path.leaf { fill: #87A862; opacity: 0; animation: devo-leaf-in 6s ease infinite alternate; transform-origin: center; transform-box: fill-box; }
body[data-section="devotionals"] .lumen-identity__vine path.leaf:nth-of-type(1) { animation-delay: 1.5s; fill: #A8C385; }
body[data-section="devotionals"] .lumen-identity__vine path.leaf:nth-of-type(2) { animation-delay: 2.0s; }
body[data-section="devotionals"] .lumen-identity__vine path.leaf:nth-of-type(3) { animation-delay: 2.6s; fill: #B5E4CA; }
body[data-section="devotionals"] .lumen-identity__vine path.leaf:nth-of-type(4) { animation-delay: 3.2s; }
body[data-section="devotionals"] .lumen-identity__vine circle.bud { fill: #F4D77A; }
@keyframes devo-grow { to { stroke-dashoffset: 0; } }
@keyframes devo-leaf-in {
    0%, 30%  { opacity: 0; transform: scale(0.5) rotate(-12deg); }
    60%      { opacity: 1; transform: scale(1)   rotate(0); }
    100%     { opacity: 1; transform: scale(1)   rotate(4deg); }
}


/* ─── SANCTUARY · keep its own identity (already perfect) ──────────────── */
body[data-section="sanctuary"] .lumen-identity { display: none; }


/* ─── VERSE-MAP · "The Heavens" — constellation of Bible books ─────────── */
body[data-section="verse-map"] .lumen-identity {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
}
body[data-section="verse-map"] .lumen-identity__sky {
    width: 100%; height: 100%;
}
body[data-section="verse-map"] .lumen-identity__sky line { stroke: rgba(244, 215, 122, 0.45); stroke-width: 0.8; stroke-dasharray: 200; stroke-dashoffset: 200; animation: vm-line-draw 12s linear infinite; }
body[data-section="verse-map"] .lumen-identity__sky line:nth-child(2) { animation-delay: 1s;  stroke: rgba(146, 191, 230, 0.45); }
body[data-section="verse-map"] .lumen-identity__sky line:nth-child(3) { animation-delay: 2s; }
body[data-section="verse-map"] .lumen-identity__sky line:nth-child(4) { animation-delay: 3s;  stroke: rgba(182, 164, 214, 0.45); }
body[data-section="verse-map"] .lumen-identity__sky line:nth-child(5) { animation-delay: 4s; }
body[data-section="verse-map"] .lumen-identity__sky line:nth-child(6) { animation-delay: 5s;  stroke: rgba(244, 167, 139, 0.45); }
body[data-section="verse-map"] .lumen-identity__sky circle.star { fill: #FFF6DC; }
body[data-section="verse-map"] .lumen-identity__sky circle.star { animation: vm-twinkle 4s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
body[data-section="verse-map"] .lumen-identity__sky circle.star:nth-of-type(odd)  { animation-delay: 0s; }
body[data-section="verse-map"] .lumen-identity__sky circle.star:nth-of-type(even) { animation-delay: 1.5s; }
body[data-section="verse-map"] .lumen-identity__sky text.book-name { font-family: var(--sans); font-size: 5px; fill: rgba(255, 246, 220, 0.75); letter-spacing: 0.3px; text-transform: uppercase; }
@keyframes vm-line-draw {
    0%   { stroke-dashoffset:  200; opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { stroke-dashoffset: -200; opacity: 0; }
}
@keyframes vm-twinkle {
    0%, 100% { opacity: 0.4; transform: scale(0.85); }
    50%      { opacity: 1;   transform: scale(1.4);  }
}


/* ─── YEAR · "The Wheel" — liturgical wheel rotating slowly ────────────── */
body[data-section="year"] .lumen-identity {
    position: absolute;
    right: 4%; top: 50%;
    transform: translateY(-50%);
    width: clamp(220px, 28vw, 380px);
    height: clamp(220px, 28vw, 380px);
    pointer-events: none;
    z-index: 2;
}
body[data-section="year"] .lumen-identity__wheel {
    width: 100%; height: 100%;
    animation: year-wheel-spin 120s linear infinite;
    transform-origin: center;
    filter: drop-shadow(0 8px 28px rgba(244, 215, 122, 0.55));
}
@keyframes year-wheel-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
body[data-section="year"] .lumen-identity__wheel text {
    font-family: var(--sans); font-size: 7px; font-weight: 700; letter-spacing: 0.18em;
    text-transform: uppercase; fill: #2A2D38;
}


/* ─── STORE · "The Workshop" — candle in the window + tag ──────────────── */
body[data-section="store"] .lumen-identity {
    position: absolute;
    bottom: 0; right: 6%;
    width: clamp(220px, 26vw, 380px);
    height: 80%;
    pointer-events: none;
    z-index: 2;
}
body[data-section="store"] .lumen-identity__candle {
    width: 100%; height: 100%;
    color: #B45D3F;
    filter: drop-shadow(0 8px 22px rgba(244, 167, 139, 0.55));
}
body[data-section="store"] .lumen-identity__candle .flame {
    fill: url(#store-flame-grad);
    transform-origin: center;
    transform-box: fill-box;
    animation: store-flicker 3.2s ease-in-out infinite;
}
@keyframes store-flicker {
    0%, 100% { transform: scaleY(1)    translateY(0)    rotate(-1deg); opacity: 0.95; }
    25%      { transform: scaleY(1.08) translateY(-2px) rotate( 2deg); opacity: 1; }
    50%      { transform: scaleY(0.95) translateY(2px)  rotate(-2deg); opacity: 0.9; }
    75%      { transform: scaleY(1.05) translateY(-1px) rotate( 1deg); opacity: 1; }
}


/* ─── SAFETY · "The Shield" — protective shield with family icons ──────── */
body[data-section="safety"] .lumen-identity {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}
body[data-section="safety"] .lumen-identity__shield {
    width: clamp(240px, 30vw, 420px);
    height: clamp(280px, 36vw, 500px);
    color: #B7565E;
    filter: drop-shadow(0 8px 28px rgba(240, 155, 161, 0.55));
}
body[data-section="safety"] .lumen-identity__shield path.body { fill: rgba(251, 229, 231, 0.85); stroke: #B7565E; stroke-width: 2; }
body[data-section="safety"] .lumen-identity__shield path.cross { stroke: #B97F1A; stroke-width: 4; stroke-linecap: round; }
body[data-section="safety"] .lumen-identity__shield path.ripple { fill: none; stroke: rgba(240, 155, 161, 0.55); stroke-width: 1.5; animation: safety-ripple 4s ease-out infinite; transform-origin: center; transform-box: fill-box; }
body[data-section="safety"] .lumen-identity__shield path.ripple:nth-of-type(2) { animation-delay: 1s; }
body[data-section="safety"] .lumen-identity__shield path.ripple:nth-of-type(3) { animation-delay: 2s; }
@keyframes safety-ripple {
    0%   { transform: scale(0.7); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: scale(1.4); opacity: 0; }
}


/* ─── PATH · "The Journey" — footprints + milestone markers ───────────── */
body[data-section="path"] .lumen-identity {
    position: absolute;
    inset: 0 0 0 0;
    pointer-events: none;
    z-index: 2;
}
body[data-section="path"] .lumen-identity__path {
    width: 100%; height: 100%;
}
body[data-section="path"] .lumen-identity__path path.road {
    fill: none;
    stroke: rgba(244, 167, 139, 0.45);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    animation: path-draw 8s ease-in-out infinite alternate;
    filter: drop-shadow(0 0 12px rgba(244, 167, 139, 0.45));
}
body[data-section="path"] .lumen-identity__path circle.milestone {
    fill: #B6A4D6;
    animation: path-milestone 4s ease-in-out infinite;
    transform-origin: center;
    transform-box: fill-box;
}
body[data-section="path"] .lumen-identity__path circle.milestone:nth-of-type(2) { animation-delay: 1s;  fill: #92BFE6; }
body[data-section="path"] .lumen-identity__path circle.milestone:nth-of-type(3) { animation-delay: 2s;  fill: #DB7A82; }
body[data-section="path"] .lumen-identity__path circle.milestone:nth-of-type(4) { animation-delay: 3s;  fill: #87A862; }
@keyframes path-draw { to { stroke-dashoffset: 0; } }
@keyframes path-milestone {
    0%, 100% { transform: scale(1);   opacity: 0.7; }
    50%      { transform: scale(1.6); opacity: 1;   }
}


/* ─── REFLECT · "The Mirror" — ripple pond ─────────────────────────────── */
body[data-section="reflect"] .lumen-identity {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60%;
    pointer-events: none;
    z-index: 2;
    overflow: hidden;
}
body[data-section="reflect"] .lumen-identity__ripple {
    position: absolute;
    left: 50%; bottom: -20%;
    width: 30vw; height: 30vw;
    transform: translateX(-50%) rotateX(72deg);
    border-radius: 50%;
    border: 2px solid rgba(146, 191, 230, 0.45);
    animation: reflect-ripple 5s ease-out infinite;
}
body[data-section="reflect"] .lumen-identity__ripple:nth-child(2) { animation-delay: 1s;   border-color: rgba(181, 228, 202, 0.45); }
body[data-section="reflect"] .lumen-identity__ripple:nth-child(3) { animation-delay: 2s;   border-color: rgba(189, 217, 242, 0.45); }
body[data-section="reflect"] .lumen-identity__ripple:nth-child(4) { animation-delay: 3s;   border-color: rgba(135, 168, 98, 0.45);  }
@keyframes reflect-ripple {
    0%   { transform: translateX(-50%) rotateX(72deg) scale(0.3); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: translateX(-50%) rotateX(72deg) scale(2.4); opacity: 0; }
}


/* ─── Hide the generic shapes when a page has its own identity ────────── */
body[data-section]:not([data-section="home-default"]) .lumen-page-shapes { opacity: 0.55; }