/* ------------------------------------------------------------------
   Heavenly motion system
    Calm, slow, GPU-friendly animation layer for the Christ's Reach home
   experience. No bouncing, no spinning, no flashing.
   Everything degrades to a quiet static layout for
   prefers-reduced-motion users.
------------------------------------------------------------------- */

:root {
    --heavenly-cream:        #fdfaf3;
    --heavenly-white:        #ffffff;
    --heavenly-gold:         #c99a2e;
    --heavenly-gold-soft:    rgba(201, 154, 46, 0.18);
    --heavenly-gold-glow:    rgba(247, 231, 189, 0.55);
    --heavenly-bluegray:     rgba(120, 138, 150, 0.16);
    --heavenly-bluegray-ink: #4d5b66;
    --heavenly-card-border:  rgba(201, 154, 46, 0.28);
    --heavenly-card-bg:      rgba(255, 255, 255, 0.78);
    --heavenly-shadow:       0 1px 2px rgba(31,33,31,.05), 0 16px 36px rgba(77, 91, 102, .07);
}

/* ===================================================================
   HeavenlyHomeBackdrop
   - sits behind page content
   - radial gradients + blurred blobs simulate soft clouds
   - very slow drifts (28s–46s)
   =================================================================== */

/* The backdrop is a STATIC composition of the same layers used by the
   splash overlay (clouds.png + rcsully wings mark + soft gold halo).
   It paints the same image on every page so navigation doesn't reveal
   a different background underneath. No fade-in / drift animations on
   this layer — only the home splash uses motion. */
.heavenly-backdrop {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
    /* Force a compositor layer so iOS Safari keeps the layer pinned to
       the viewport during momentum scroll instead of briefly painting it
       in-flow with the page. */
    transform: translateZ(0);
    will-change: transform;
    background:
        radial-gradient(ellipse 120% 60% at 50% 22%, rgba(201, 154, 46, 0.10) 0%, transparent 60%),
        var(--achieve-bg);
    opacity: 1;
}
/* is-ready is kept for JS compatibility but has no visual effect; the
   backdrop is visible from the first paint. */
.heavenly-backdrop.is-ready { opacity: 1; }

.heavenly-backdrop__clouds {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}
.heavenly-backdrop__cloud {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%);
    filter: blur(1px);
    mix-blend-mode: lighten;
    opacity: 0.85;
}
.heavenly-backdrop__cloud--b {
    transform: translate(-48%, -48%) scale(1.15) rotate(8deg);
    opacity: 0.45;
}

/* Desktop-only: keep the marketing cloud artwork fluid on wide screens
   and add a subtle drift so the layer feels alive without distraction. */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
    .heavenly-backdrop__cloud,
    .heavenly-splash__cloud {
        width: clamp(1200px, 122vw, 2200px);
    }

    .heavenly-backdrop__cloud--a {
        animation: heavenlyDesktopCloudDriftA 85s ease-in-out infinite;
    }

    .heavenly-backdrop__cloud--b {
        animation: heavenlyDesktopCloudDriftB 120s ease-in-out infinite;
    }
}

@keyframes heavenlyDesktopCloudDriftA {
    0%   { transform: translate(-52%, -50%); }
    50%  { transform: translate(-48%, -52%); }
    100% { transform: translate(-52%, -50%); }
}

@keyframes heavenlyDesktopCloudDriftB {
    0%   { transform: translate(-48%, -48%) scale(1.15) rotate(8deg); }
    50%  { transform: translate(-52%, -50%) scale(1.18) rotate(8deg); }
    100% { transform: translate(-48%, -48%) scale(1.15) rotate(8deg); }
}

.heavenly-backdrop__mark {
    position: absolute;
    top: 50%; left: 50%;
    width: min(86vw, 720px);
    height: auto;
    transform: translate(-50%, -54%);
    opacity: 0.34;
    filter: drop-shadow(0 16px 40px rgba(77, 91, 102, 0.10));
    z-index: 1;
}

@keyframes heavenly-drift-a {
    0%   { transform: translate3d(0,    0,   0) scale(1); }
    100% { transform: translate3d(3vw,  2vw, 0) scale(1.06); }
}
@keyframes heavenly-drift-b {
    0%   { transform: translate3d(0,    0,    0) scale(1.04); }
    100% { transform: translate3d(-3vw, 1.5vw,0) scale(1); }
}
@keyframes heavenly-drift-c {
    0%   { transform: translate3d(0,   0,    0) scale(1); }
    100% { transform: translate3d(2vw, -1vw, 0) scale(1.05); }
}

/* Ensure page content sits above the backdrop */
.heavenly-stage {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; gap: 12px;
    /* When the splash dissolves the body class is removed and the stage
       returns to opacity 1; ease it in so the dashboard never "pops" in. */
    opacity: 1;
    transition: opacity 900ms ease-out;
}
/* No opacity manipulation on the stage during splash — the cards are
   always visible. The splash overlay plays its scripture reveal on top
   and removes itself when done. */

/* Greeting block above the scripture card */
.heavenly-greeting { display: flex; flex-direction: column; gap: 2px; padding: 2px 2px 0; }
.heavenly-greeting .calm-kicker { margin: 0; }
.heavenly-greeting .calm-title { margin: 0; font-size: 1.2rem; }
.heavenly-greeting .calm-subtitle { margin: 0; font-size: .85rem; }

/* ===================================================================
   HeavenlySplash
   Full-viewport intro shown on home load. The scripture animates in
   word-by-word at roughly half the regular speed, sitting over a
   large logo watermark. When the verse completes, the splash
   dissolves and the dashboard fades in with the verse already shown.
   =================================================================== */

.heavenly-splash {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow: hidden;
    /* Transparent: the global .heavenly-backdrop (clouds + wings + halo)
       is already painted underneath every page identically. Painting an
       opaque cream gradient here would briefly fade in over the backdrop
       and then fade out again, producing a visible "pulse". Keep this
       layer purely for the scripture reveal. */
    background: transparent;
    opacity: 0;
    transition: opacity 700ms ease-out;
}
.heavenly-splash.is-ready    { opacity: 1; }
.heavenly-splash.is-leaving  { opacity: 0; transition: opacity 1000ms ease-in; }

/* Hide page content while the splash is showing so the calm reveal
   has the stage to itself. dissolve() removes the body class. */
body.heavenly-splash-active .heavenly-stage {
    opacity: 0;
    pointer-events: none;
}

.heavenly-splash__mark {
    position: absolute;
    top: 50%; left: 50%;
    width: min(86vw, 720px);
    height: auto;
    transform: translate(-50%, -54%);
    opacity: 0;
    filter: drop-shadow(0 16px 40px rgba(77, 91, 102, 0.10));
    transition: opacity 1400ms ease-out 200ms;
    pointer-events: none;
    z-index: 1;
}
.heavenly-splash.is-ready .heavenly-splash__mark { opacity: 0; }

/* Drifting cloud layer behind the logo. Two copies drift in opposite
   directions for slow parallax. Pure decoration — pointer/aria off. */
.heavenly-splash__clouds {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 1800ms ease-out 100ms;
}
.heavenly-splash.is-ready .heavenly-splash__clouds { opacity: 0; }
.heavenly-splash__cloud {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    max-width: none;
    height: auto;
    transform: translate(-50%, -50%);
    filter: blur(1px);
    mix-blend-mode: lighten;
    opacity: 0.85;
}
.heavenly-splash__cloud--a {
    animation: heavenlyCloudDriftA 60s linear infinite;
}
.heavenly-splash__cloud--b {
    transform: translate(-50%, -50%) scale(1.15) rotate(8deg);
    opacity: 0.45;
    animation: heavenlyCloudDriftB 90s linear infinite;
}
@keyframes heavenlyCloudDriftA {
    0%   { transform: translate(-54%, -50%); }
    50%  { transform: translate(-46%, -52%); }
    100% { transform: translate(-54%, -50%); }
}
@keyframes heavenlyCloudDriftB {
    0%   { transform: translate(-48%, -48%) scale(1.15) rotate(8deg); }
    50%  { transform: translate(-52%, -50%) scale(1.18) rotate(8deg); }
    100% { transform: translate(-48%, -48%) scale(1.15) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
    .heavenly-splash__cloud--a,
    .heavenly-splash__cloud--b { animation: none; }
}

.heavenly-splash__scripture {
    position: relative;
    z-index: 2;
    max-width: min(720px, 92vw);
    text-align: center;
    color: #1a1c1a;
    font-size: clamp(1.5rem, 4.4vw, 2.25rem);
    line-height: 1.45;
    font-weight: 600;
}
/* Soft dark halo behind each word so the verse stays crisp over the
   cloud + logo backdrop without looking heavy. */
.heavenly-splash__scripture .scripture-reveal__word {
    text-shadow:
        0 1px 0 rgba(255, 255, 255, 0.75),
        0 0 6px rgba(255, 248, 231, 0.85),
        0 0 14px rgba(31, 33, 31, 0.18),
        0 1px 2px rgba(31, 33, 31, 0.22);
    -webkit-text-stroke: 0.4px rgba(31, 33, 31, 0.45);
}
.heavenly-splash__scripture .scripture-reveal__ref {
    display: block;
    text-align: right;
    margin: 24px 4px 0 auto;
    /* Move away from low-contrast gold-on-cream. Use a deep ink color
       with a soft gold accent underline so the reference reads at a
       glance without competing with the verse. */
    color: #1a1c1a;
    font-size: clamp(1.25rem, 3.6vw, 1.6rem);
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1.2;
    font-variant: small-caps;
    text-transform: none;
    padding: 4px 2px 6px;
    border-bottom: 2px solid var(--heavenly-gold);
    width: fit-content;
    text-shadow: 0 1px 0 rgba(255, 248, 231, 0.7);
    -webkit-text-stroke: 0;
}

@media (prefers-reduced-motion: reduce) {
    .heavenly-splash,
    .heavenly-splash__mark { transition: opacity 300ms ease-out; }
    .heavenly-stage { transition: opacity 300ms ease-out; }
}

/* ===================================================================
   The Reach — public prayer board
   =================================================================== */
.reach-list { display: flex; flex-direction: column; gap: 14px; }
.reach-card { position: relative; }
.reach-card__head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.reach-card__title { margin: 0; font-size: 1.1rem; color: #1f211f; }
.reach-card__meta { margin: 0; font-size: .85rem; }
.reach-card__body { margin: 0 0 10px; line-height: 1.55; color: #2a2d2a; }

/* ===================================================================
   Journal — FB-style scroll of the user's own tap-ins + reflections
   =================================================================== */
.journal-hero { display: flex; flex-direction: column; gap: 6px; padding: 4px 2px 0; }
.journal-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.journal-controls {
    margin-top: 14px;
    padding: 14px;
}
.journal-controls__details {
    border: 1px dashed rgba(31, 33, 31, 0.14);
    border-radius: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.36);
}
.journal-controls__summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}
.journal-controls__summary-title {
    font-weight: 700;
    color: #1f211f;
}
.journal-controls__summary-count {
    font-size: .86rem;
}
.journal-controls__form {
    display: grid;
    grid-template-columns: minmax(220px, 1.7fr) repeat(3, minmax(130px, 1fr)) auto;
    gap: 10px;
    align-items: end;
    margin-top: 10px;
}
.journal-controls__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.journal-controls__label {
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: rgba(31, 33, 31, 0.62);
    font-weight: 700;
}
.journal-controls__field .input {
    width: 100%;
    min-height: 42px;
}
.journal-controls__actions {
    display: inline-flex;
    gap: 8px;
    flex-wrap: wrap;
}
.journal-controls__actions .btn {
    min-height: 42px;
}
.journal-controls__summary {
    margin: 10px 0 0;
    font-size: .86rem;
}
.journal-controls__quick-actions {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.journal-feed {
    display: flex; flex-direction: column; gap: 14px;
    margin-top: 14px;
}
.journal-card {
    position: relative;
    background: #fffdf8;
    border: 1px solid var(--heavenly-card-border);
    border-radius: 18px;
    padding: 16px 18px 14px;
    box-shadow: var(--heavenly-shadow);
}
.journal-card--alert      { border-left: 3px solid var(--heavenly-gold); }
.journal-card--reflection { border-left: 3px solid var(--heavenly-bluegray-ink); }

.journal-card__head {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    margin-bottom: 6px;
}
.journal-card__kind {
    display: inline-flex; align-items: center;
    padding: 2px 10px; border-radius: 999px;
    font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    background: #fff8e7; color: var(--heavenly-gold); border: 1px solid rgba(201, 154, 46, 0.35);
}
.journal-card__kind--reflection {
    background: #eef3f0; color: #2e4a3f; border-color: rgba(46, 74, 63, 0.25);
}
.journal-card__time { font-size: .78rem; color: rgba(31, 33, 31, 0.55); white-space: nowrap; }
.journal-card__quick-actions {
    margin: 0 0 6px;
    text-align: right;
}
.btn-link {
    border: 0;
    background: transparent;
    color: rgba(31, 33, 31, 0.62);
    text-decoration: underline;
    font-size: .82rem;
    cursor: pointer;
    padding: 0;
}
.btn-link:hover,
.btn-link:focus-visible {
    color: #1f211f;
}
.journal-card__title { margin: 0 0 6px; font-size: 1.05rem; color: #1f211f; line-height: 1.3; }
.journal-card__title a { color: inherit; text-decoration: none; border-bottom: 1px dashed rgba(31,33,31,.18); }
.journal-card__body { margin: 0 0 10px; line-height: 1.55; color: #2a2d2a; font-size: .96rem; }

.journal-card__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.journal-tag {
    display: inline-flex; align-items: center;
    padding: 2px 9px; border-radius: 999px;
    font-size: .72rem; font-weight: 600;
    background: rgba(31, 33, 31, 0.05);
    color: rgba(31, 33, 31, 0.7);
    border: 1px solid rgba(31, 33, 31, 0.08);
}
.journal-tag--new {
    background: rgba(108, 161, 126, 0.15);
    color: #2e6d46;
    border-color: rgba(46, 109, 70, 0.32);
    font-weight: 700;
}
.journal-tag--reach { background: #fff8e7; color: var(--heavenly-gold); border-color: rgba(201,154,46,.35); }

/* Read-only reaction summary chips (FB-likes style) */
.reaction-summary {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px dashed rgba(31, 33, 31, 0.08);
}
.reaction-summary__details { width: 100%; }
.reaction-summary__toggle {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.reaction-summary__toggle::-webkit-details-marker { display: none; }
.reaction-summary__stack {
    display: inline-flex;
    align-items: center;
}
.reaction-summary__bubble {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #fff8e7 72%, #f7e7bd 100%);
    border: 1px solid rgba(201, 154, 46, 0.35);
    box-shadow: 0 1px 1px rgba(31,33,31,.05);
    margin-left: -6px;
}
.reaction-summary__bubble:first-child { margin-left: 0; }
.reaction-summary__bubble.is-mine { border-color: var(--heavenly-gold); background: #fff1cf; }
.reaction-summary__bubble--count {
    background: #eef3f0;
    border-color: rgba(46, 74, 63, 0.28);
    color: #2e4a3f;
    font-size: .72rem;
    font-weight: 800;
    padding: 0 4px;
    min-width: 28px;
}
.reaction-summary__glyph { font-size: 1rem; line-height: 1; }
.reaction-summary__label { font-size: .84rem; color: rgba(31, 33, 31, 0.72); }
.reaction-summary__counts { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.reaction-summary__count-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 248, 231, 0.6);
    border: 1px solid rgba(201, 154, 46, 0.22);
    font-size: .78rem;
    color: rgba(31,33,31,.78);
}
.reaction-summary__total { font-size: .85rem; color: rgba(31, 33, 31, 0.65); }

/* Per-reactor list (Journal): tiny chips showing first name + glyph for
   every soul who reacted to one of the viewer's own alerts. */
.reactor-list {
    list-style: none; margin: 8px 0 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 6px 8px;
}
.reactor-list__item {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px;
    background: rgba(255, 248, 231, 0.6);
    border: 1px solid rgba(201, 154, 46, 0.22);
    font-size: .78rem; line-height: 1; color: rgba(31,33,31,.78);
}
.reactor-list__glyph { font-size: .95rem; line-height: 1; }
.reactor-list__name { font-weight: 600; }

/* When a heavenly stage is on the page, suppress the app-shell wings
   watermark so the two backgrounds don't compete. */
.app-shell:has(.heavenly-stage)::before { display: none; }

@media (max-width: 980px) {
    .journal-controls__form {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 640px) {
    .journal-controls__form {
        grid-template-columns: 1fr;
    }
}


/* ===================================================================
   ScriptureReveal
   - word spans fade + lift + un-blur in staggered sequence
   - the visible spans are aria-hidden; an offscreen sibling carries
     the full readable sentence for assistive tech
   =================================================================== */

.scripture-reveal {
    position: relative;
}
.scripture-reveal__visual {
    display: block;
}
.scripture-reveal__word {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 6px, 0);
    filter: blur(3px);
    will-change: opacity, transform, filter;
}
.scripture-reveal__space {
    display: inline-block;
    width: 0.28em;
}
.scripture-reveal__ref {
    display: block;
    margin-top: 10px;
    color: var(--heavenly-gold);
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    opacity: 0;
    transform: translate3d(0, 4px, 0);
    will-change: opacity, transform;
}
.scripture-reveal__sr {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.heavenly-scripture-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--heavenly-card-border);
    border-radius: 18px;
    background: var(--heavenly-card-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 16px 18px 14px;
    box-shadow: var(--heavenly-shadow);
    /* Flex column so the actions row can be pinned to the bottom of the
       card regardless of verse length. */
    display: flex;
    flex-direction: column;
    min-height: 240px;
}
.heavenly-scripture-card.is-ready {
    /* card is visible from the start now; class kept for backwards-compat */
}
.heavenly-scripture-card__eyebrow {
    margin: 0 0 6px;
    color: var(--heavenly-bluegray-ink);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.heavenly-scripture-card__text {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.4;
    color: #1f211f;
    min-height: 2.4em; /* prevent layout jump during fetch */
}
.heavenly-scripture-card__actions {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    margin-top: auto; /* push to bottom of the flex column card */
    padding-top: 14px;
}
.heavenly-scripture-card__actions--end {
    justify-content: flex-end;
}
.heavenly-scripture-card__actions .btn-ghost {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    white-space: nowrap;
    padding-left: 8px;
    padding-right: 8px;
}
.heavenly-scripture-card__actions--end .btn-ghost {
    flex: 0 0 auto;
}

/* Cloud shimmer used during scripture fetch (in place of a spinner) */
.heavenly-scripture-card__shimmer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
    background:
        radial-gradient(ellipse 60% 50% at 30% 50%, rgba(255, 247, 225, 0.7) 0%, transparent 60%),
        radial-gradient(ellipse 60% 50% at 70% 50%, rgba(247, 231, 189, 0.6) 0%, transparent 60%);
    transition: opacity 600ms ease-out;
}
.heavenly-scripture-card.is-loading .heavenly-scripture-card__shimmer {
    opacity: 1;
    animation: heavenly-shimmer 3600ms ease-in-out infinite;
}
.heavenly-scripture-card__loading-copy {
    display: block;
    margin: 0;
    text-align: center;
    color: var(--heavenly-bluegray-ink);
    font-style: italic;
    font-size: .98rem;
    opacity: 0;
    transition: opacity 900ms ease-out;
}
.heavenly-scripture-card__loading-text {
    display: block;
}
.heavenly-scripture-card__loading-wings {
    display: block;
    margin: 14px auto 0;
    width: 96px;
    max-width: 60%;
    height: auto;
    opacity: 0.7;
    transform-origin: 50% 50%;
    will-change: opacity, transform;
}
.heavenly-scripture-card.is-loading .heavenly-scripture-card__loading-copy { opacity: 0.85; }
.heavenly-scripture-card.is-loading .heavenly-scripture-card__loading-wings {
    animation: heavenly-wings-pulse 1800ms ease-in-out infinite;
}
@keyframes heavenly-wings-pulse {
    0%, 100% { opacity: 0.45; transform: scale(0.96); }
    50%      { opacity: 0.95; transform: scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
    .heavenly-scripture-card.is-loading .heavenly-scripture-card__loading-wings {
        animation: none;
        opacity: 0.7;
    }
}

@keyframes heavenly-shimmer {
    0%, 100% { transform: translate3d(-4%, 0, 0); }
    50%      { transform: translate3d(4%,  0, 0); }
}


/* ===================================================================
   FloatingPrayerLayer + PrayerReactionBurst
   - fixed full-viewport layer
   - individual icons animate via Web Animations API (see heavenly.js)
   =================================================================== */

.floating-prayer-layer {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    overflow: hidden;
}
.floating-prayer-icon {
    position: absolute;
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #fff8e7 70%, #f7e7bd 100%);
    border: 1px solid rgba(201, 154, 46, 0.35);
    box-shadow:
        0 1px 2px rgba(31,33,31,.06),
        0 8px 20px rgba(77, 91, 102, 0.14),
        inset 0 0 0 4px rgba(255,255,255,0.65);
    transform: translate3d(0, 0, 0) scale(0.85);
    opacity: 0;
    will-change: transform, opacity;
    color: var(--heavenly-gold);
}
.floating-prayer-icon img,
.floating-prayer-icon svg {
    width: 38px;
    height: 38px;
    display: block;
    object-fit: contain;
}


/* ===================================================================
   Spiritual reaction buttons
   - restrained Facebook-like row, calm motion on press
   =================================================================== */

.spiritual-reactions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 6px;
    margin-top: 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}
.spiritual-reactions::-webkit-scrollbar { display: none; }
.spiritual-reaction {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 0;
    flex: 0 0 auto;
    padding: 6px 6px 4px;
    border-radius: 14px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--heavenly-bluegray-ink);
    font-size: .68rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 240ms ease-out, background 240ms ease-out, border-color 240ms ease-out;
}
.spiritual-reaction:hover,
.spiritual-reaction:focus-visible {
    background: #ffffff;
    border-color: var(--heavenly-gold);
    outline: none;
}
.spiritual-reaction.is-active {
    background: #fff8e7;
    border-color: var(--heavenly-gold);
    color: #1f211f;
}
.spiritual-reaction__icon {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #fff8e7 75%, #f7e7bd 100%);
    border: 1px solid rgba(201, 154, 46, 0.35);
    box-shadow:
        0 1px 2px rgba(31,33,31,.05),
        inset 0 0 0 2px rgba(255,255,255,0.7);
    color: var(--heavenly-gold);
    flex-shrink: 0;
}
.spiritual-reaction__icon img,
.spiritual-reaction__icon svg {
    width: 22px;
    height: 22px;
    display: block;
    object-fit: contain;
}
.spiritual-reaction.is-active .spiritual-reaction__icon {
    border-color: var(--heavenly-gold);
    box-shadow:
        0 1px 2px rgba(31,33,31,.05),
        0 0 0 3px rgba(247, 231, 189, 0.55),
        inset 0 0 0 2px rgba(255,255,255,0.8);
}


/* ===================================================================
   Prayer "covered" confirmation state
   =================================================================== */

.prayer-covered {
    text-align: center;
    padding: 18px 16px 20px;
    opacity: 0;
    transform: translate3d(0, 6px, 0);
    transition: opacity 900ms ease-out, transform 900ms ease-out;
}
.prayer-covered.is-ready { opacity: 1; transform: translate3d(0, 0, 0); }
.prayer-covered__title {
    margin: 0 0 6px;
    font-size: 1.25rem;
    color: #1f211f;
}
.prayer-covered__line {
    margin: 4px 0;
    color: var(--heavenly-bluegray-ink);
}


/* ===================================================================
   Reduced motion
   - skip all loops, drifts, blurs, staggers, floats
   - keep a tasteful fade-in only
   =================================================================== */

@media (prefers-reduced-motion: reduce) {
    .heavenly-backdrop,
    .heavenly-backdrop__cloud,
    .heavenly-backdrop__beam,
    .heavenly-backdrop__mark,
    .heavenly-scripture-card,
    .heavenly-scripture-card__actions,
    .prayer-covered {
        transition: opacity 300ms ease-out;
        animation: none !important;
    }
    .heavenly-backdrop.is-ready,
    .heavenly-backdrop.is-ready .heavenly-backdrop__cloud,
    .heavenly-backdrop.is-ready .heavenly-backdrop__beam,
    .heavenly-backdrop.is-ready .heavenly-backdrop__mark,
    .heavenly-scripture-card.is-ready,
    .heavenly-scripture-card.actions-ready .heavenly-scripture-card__actions,
    .prayer-covered.is-ready {
        transform: none;
    }
    .scripture-reveal__word,
    .scripture-reveal__ref {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .floating-prayer-layer { display: none; }
}