/* ======================================================
   KING DAVID PRAYER EXPERIENCE
   Foundation Release 6.0

   A Scripture-centered prayer journey
   by Follow the Voice of God

====================================================== */


/* ======================================================
   1. RESET
====================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {

    min-height: 100vh;
    overflow-x: hidden;

    font-family: var(--font-body);
    color: var(--color-text);

    line-height: 1.8;

    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;

    background:
        linear-gradient(
            var(--current-overlay),
            var(--current-overlay)
        ),
        url("...")
        center center / cover
        no-repeat fixed;

    transition:
        background 3s ease,
        color .8s ease;

}

img {
    display: block;
    max-width: 100%;
}

button,
input,
textarea {
    font: inherit;
}

button {
    cursor: pointer;
}

textarea {
    resize: vertical;
}


/* ======================================================
   2. APPLICATION LAYOUT
====================================================== */

#app {

    position: relative;

    min-height: 100vh;

    width: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    padding: 2rem;

}

.screen {

    width: 100%;

    display: none;

}

.screen.active {

    display: flex;

    justify-content: center;

    align-items: center;

    min-height: 100vh;

}

.hidden {

    display: none;

}


/* ======================================================
   3. TYPOGRAPHY
====================================================== */

.intro-text {

    color: var(--color-secondary);

    font-size: 1.15rem;

    margin-bottom: 1rem;

}

.app-title {

    font-family: var(--font-heading);

    font-size: clamp(2.8rem, 6vw, 4rem);

    line-height: 1.1;

    color: var(--color-heading);

    margin-bottom: 2rem;

}

.scripture {

    margin: 2.5rem 0;

}

.scripture-text {

    max-width: 620px;

    margin: auto;

    font-family: var(--font-heading);

    font-size: clamp(1.8rem, 3vw, 2.3rem);

    font-style: italic;

}

.scripture footer {

    margin-top: .85rem;

    color: var(--color-secondary);

}

.welcome-message {

    margin: 2rem 0;

    font-size: 1.15rem;

    line-height: 1.9;

}


/* ======================================================
   4. BUTTONS
====================================================== */

.primary-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    margin-top: 2rem;

    padding: 1rem 2.75rem;

    border: none;

    border-radius: var(--radius);

    background: var(--color-button);

    color: white;

    font-weight: 600;

    letter-spacing: .03em;

    transition:
        transform .3s ease,
        background .3s ease,
        box-shadow .3s ease;

}

.primary-button:hover {

    background: var(--color-button-hover);

    transform: translateY(-3px);

    box-shadow: 0 12px 30px rgba(0,0,0,.18);

}


/* ======================================================
   5. WELCOME SCREEN
====================================================== */

#welcome-screen {

    max-width: 760px;

    padding: 4rem;

    background: rgba(255,255,255,.72);

    backdrop-filter: blur(12px);

    border-radius: 24px;

    box-shadow: 0 20px 60px rgba(0,0,0,.18);

    animation: fadeIn 1.5s ease;

}

/* ======================================================
   Returning Pilgrim — Saved Journal
====================================================== */

.saved-journal-return {

    margin-top: 2.25rem;

    padding-top: 1.75rem;

    border-top:
        1px solid
        rgba(107, 138, 120, 0.20);

    text-align: center;

}

.saved-journal-message {

    max-width: 460px;

    margin:
        0 auto
        1rem;

    color:
        var(--color-secondary);

    font-size: 0.95rem;

    line-height: 1.7;

}

.saved-journal-return
.secondary-button {

    margin-top: 0;

    padding:
        0.8rem
        1.6rem;

}


/* ======================================================
   6. JOURNEY SCREEN
====================================================== */

.journey-card {

    width: 100%;

    max-width: 760px;

    padding: 4.25rem;

    background:
        rgba(255,255,255,.74);

    backdrop-filter:
        blur(14px);

    border-radius: 28px;

    border:
        1px solid
        rgba(255,255,255,.35);

    box-shadow:
        0 10px 28px
            rgba(16,22,28,.08),

        0 28px 80px
            rgba(16,22,28,.18),

        inset 0 1px 0
            rgba(255,255,255,.35);

}

/* ======================================================
   7. JOURNAL COMPONENTS
====================================================== */

.invitation {

    margin: 2rem 0;

    text-align: left;

    font-size: 1.15rem;

    line-height: 1.9;

}

.invitation p {

    margin-bottom: 1.5rem;

}


/* ======================================================
   JOURNAL
====================================================== */

.journal {

    width: 100%;

    min-height: 320px;

    margin-top: 2rem;

    padding: 2rem;

    border: none;

    border-radius: 20px;

    background: var(--color-card);

    color: var(--color-text-dark);

    font-family: var(--font-body);

    font-size: 1.05rem;

    line-height: 1.9;

    box-shadow:
        inset 0 1px 4px rgba(255,255,255,.80),
        inset 0 -1px 6px rgba(0,0,0,.05),
        0 10px 30px rgba(0,0,0,.08);

    transition:
        box-shadow .3s ease,
        transform .3s ease;

}

.journal:focus {

    outline: none;

    transform: translateY(-2px);

    box-shadow:
        inset 0 1px 4px rgba(255,255,255,.80),
        inset 0 -1px 6px rgba(0,0,0,.05),
        0 0 0 4px rgba(107,138,120,.20),
        0 14px 36px rgba(0,0,0,.12);

}


/* ======================================================
   REFLECTION PROMPTS
====================================================== */

.prompt-section {

    margin-top: 3rem;

}

.prompt-title {

    margin-bottom: 1.25rem;

    font-family: var(--font-heading);

    font-size: 1.45rem;

    color: var(--color-secondary);

}

.prompt-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px,1fr));

    gap: 1.25rem;

}


/* ======================================================
   PROMPT CARDS
====================================================== */

.prompt-card {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    text-align: left;

    background: rgba(255,255,255,.82);

    border: none;

    border-radius: 18px;

    padding: 1.5rem;

    cursor: pointer;

    transition:
        transform .3s ease,
        box-shadow .3s ease;

    box-shadow: 0 8px 20px rgba(0,0,0,.08);

}

.prompt-card:hover {

    transform: translateY(-4px);

    box-shadow: 0 14px 28px rgba(0,0,0,.12);

}

/* ======================================================
   PREPARATION SELECTION
====================================================== */

.preparation-option.selected {

    background: rgba(245, 241, 226, 0.95);

    border: 2px solid rgba(186, 157, 92, 0.75);

    box-shadow:
        0 0 0 4px rgba(186, 157, 92, 0.15),
        0 12px 28px rgba(0,0,0,.12);

    transform: translateY(-2px);

}

.preparation-option.selected .preparation-name {

    color: var(--color-primary);

    font-weight: 600;

}

.preparation-option.selected .preparation-icon {

    transform: scale(1.15);

}

.preparation-icon {

    display: block;

    font-size: 2rem;

    margin-bottom: .75rem;

    transition: transform .3s ease;

}

.preparation-name {

    font-family: var(--font-heading);

    font-size: 1.2rem;

}

.prompt-card h3 {

    margin-bottom: .85rem;

    font-family: var(--font-heading);

    font-size: 1.35rem;

    color: var(--color-primary);

}

.prompt-card p {

    margin-bottom: 1rem;

    line-height: 1.8;

}

.reflection-question {

    margin-top: auto;

    font-style: italic;

    color: var(--color-secondary);

}


/* ======================================================
   EXPANDABLE COMPANION
====================================================== */

.companion-toggle {

    width: 100%;

    padding: .5rem 0;

    border: none;

    background: none;

    text-align: left;

    cursor: pointer;

    font-family: var(--font-heading);

    font-size: 1.2rem;

    color: var(--color-primary);

}

.companion-content {

    display: none;

    margin-top: 1rem;

}

.companion-content.open {

    display: block;

}

/* ======================================================
   8. STILLNESS COMPONENTS
====================================================== */

.stillness-message {

    margin: 3rem 0;

    text-align: center;

}

.stillness-message p {

    font-size: 1.25rem;

    line-height: 2;

}

.near-message {

    margin-top: 1rem;

    font-family: var(--font-heading);

    font-size: clamp(2rem, 4vw, 2.5rem);

    color: var(--color-secondary);

}


/* ======================================================
   GUIDED BREATHING
====================================================== */

.breathing-circle {

    width: 170px;
    height: 170px;

    margin: 3.5rem auto;

    border-radius: 50%;

    background: rgba(107,138,120,.18);

    border: 3px solid rgba(107,138,120,.55);

    box-shadow:
        0 0 30px rgba(107,138,120,.22),
        inset 0 0 18px rgba(255,255,255,.55);

}


/* ======================================================
   GUIDED BREATHING TEXT
====================================================== */

.breathing-guide {

    margin-top: 1.5rem;

    min-height: 2rem;

    text-align: center;

    font-style: italic;

    font-size: 1.15rem;

    letter-spacing: .04em;

    color: var(--color-secondary);

    opacity: .85;

    transition:
        opacity .8s ease,
        transform .8s ease;

}

.breathing-guide.fade {

    opacity: 0;

    transform: translateY(6px);

}


/* ======================================================
   BREATHING ANIMATION
====================================================== */

@keyframes breathe {

    0% {
        transform: scale(.70);
        opacity: .35;
    }

    50% {
        transform: scale(1.30);
        opacity: 1;
    }

    100% {
        transform: scale(.70);
        opacity: .35;
    }

}

/* ======================================================
   9. PRESENCE COMPONENTS
====================================================== */

.presence-message {

    width: 100%;

    max-width: 620px;

    margin: 3rem auto;

    text-align: center;

}

.presence-message p {

    margin-bottom: 1.5rem;

    font-size: 1.15rem;

    line-height: 1.9;

}

.near-message {

    margin-top: 2rem;

    font-family: var(--font-heading);

    font-size: clamp(2rem, 4vw, 2.5rem);

    color: var(--color-secondary);

}


/* ======================================================
   PRESENCE OPTIONS
====================================================== */

.presence-options {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 1.5rem;

    margin: 3rem 0;

}


/* ======================================================
   PRESENCE CARD
====================================================== */

.presence-card {

    display: flex;

    flex-direction: column;

    justify-content: flex-start;

    padding: 1.75rem;

    text-align: left;

    background: rgba(255,255,255,.82);

    border-radius: 18px;

    border: 1px solid rgba(255,255,255,.45);

    box-shadow: 0 10px 24px rgba(0,0,0,.08);

    transition:
        transform .3s ease,
        box-shadow .3s ease,
        border-color .3s ease;

}

.presence-card:hover {

    transform: translateY(-5px);

    border-color: rgba(107,138,120,.40);

    box-shadow: 0 18px 34px rgba(0,0,0,.12);

}

.presence-card h3 {

    margin-bottom: .85rem;

    font-family: var(--font-heading);

    font-size: 1.45rem;

    color: var(--color-primary);

}

.presence-card p {

    line-height: 1.8;

}

.presence-card strong {

    color: var(--color-secondary);

}

/* ======================================================
   10. UTILITY CLASSES
====================================================== */

.hidden {

    display: none !important;

}

.hidden-button {

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}

.visible-button {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;

}

#continue-button {

    transition:
        opacity 1.5s ease,
        visibility 1.5s ease;

}


/* ======================================================
   ACCESSIBILITY
====================================================== */

.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}


/* ======================================================
   REDUCED MOTION
====================================================== */

/* ======================================================
   11. ANIMATION LIBRARY
====================================================== */

/* Welcome Screen */

@keyframes fadeIn {

    from {

        opacity: 0;

        transform: translateY(24px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}


/* Gentle Lift */

@keyframes gentleLift {

    from {

        transform: translateY(10px);

        opacity: 0;

    }

    to {

        transform: translateY(0);

        opacity: 1;

    }

}


/* Gentle Glow */

@keyframes gentleGlow {

    0% {

        box-shadow:
            0 0 0 rgba(107,138,120,0);

    }

    50% {

        box-shadow:
            0 0 30px rgba(107,138,120,.30);

    }

    100% {

        box-shadow:
            0 0 0 rgba(107,138,120,0);

    }

}


/* Guided Breathing
   (CSS fallback only.
   Primary breathing animation will
   be controlled by animations.js.)
*/

@keyframes breathe {

    0% {

        transform: scale(.88);

        opacity: .55;

    }

    50% {

        transform: scale(1.12);

        opacity: 1;

    }

    100% {

        transform: scale(.88);

        opacity: .55;

    }

}

/* ======================================================
   SCREEN TRANSITIONS
====================================================== */

.journey-card {

    opacity: 1;

    transform: translateY(0);

    transition:
        opacity .9s ease,
        transform .9s ease;

}

.fade-out {

    opacity: 0;

    transform: translateY(18px);

}

.fade-in {

    opacity: 1;

    transform: translateY(0);

}

@media (prefers-reduced-motion: reduce) {

    * {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

        scroll-behavior: auto !important;

    }

}

/* ======================================================
   12. RESPONSIVE DESIGN
====================================================== */

@media (max-width: 992px) {

    #app {

        padding: 1.5rem;

    }

    #welcome-screen,
    .journey-card {

        padding: 3rem;

    }

}

@media (max-width: 768px) {

    body {

        font-size: 0.95rem;

    }

    #app {

        padding: 1rem;

    }

    #welcome-screen,
    .journey-card {

        padding: 2.25rem;

        border-radius: 20px;

    }

    .app-title {

        font-size: clamp(2.2rem, 8vw, 3rem);

    }

    .scripture-text {

        font-size: clamp(1.5rem, 5vw, 1.9rem);

    }

    .prompt-grid,
    .presence-options {

        grid-template-columns: 1fr;

    }

    .breathing-circle {

        width: 150px;

        height: 150px;

    }

}

@media (max-width: 480px) {

    #welcome-screen,
    .journey-card {

        padding: 1.75rem;

        border-radius: 16px;

    }

    .app-title {

        font-size: 2rem;

    }

    .primary-button {

        width: 100%;

        padding: 1rem;

    }

    .journal {

        min-height: 240px;

        padding: 1.5rem;

    }

    .scripture {

        margin: 2rem 0;

    }

}

/* ======================================================
   Presence Experience
====================================================== */

.presence-space {

    min-height: 340px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 3rem 2rem;

}

/* ======================================================
   Presence Experience
====================================================== */

.presence-space {

    min-height: 340px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    padding: 3rem 2rem;

}

.presence-thought {

    font-family: var(--font-heading);

    font-size: clamp(2rem, 4vw, 2.8rem);

    font-weight: 400;

    line-height: 1.5;

    letter-spacing: .02em;

    color: var(--color-heading);

    opacity: 0;

    transition: opacity .8s ease;

}

.presence-thought.visible {

    opacity: 1;

}

/* ======================================================
   Text Reveal
====================================================== */

.presence-thought {

    opacity: 0;

    transition: opacity .8s ease;

}

.presence-thought.visible {

    opacity: 1;

}

/* ======================================================
   Receiving Experience
   Foundation Release 9.8
====================================================== */

.receiving-space {

    min-height: 340px;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 3rem 2rem;

}

.receiving-lines {

    width: 100%;

    max-width: 560px;

    text-align: center;

}

.receiving-line {

    margin-bottom: 1.5rem;

    font-family: var(--font-heading);

    font-size: clamp(1.5rem, 3vw, 2rem);

    font-weight: 400;

    line-height: 1.6;

    color: var(--color-heading);

    opacity: 0;

    transform: translateY(12px);

    transition:
        opacity 1.4s ease,
        transform 1.4s ease;

}

.receiving-line.visible {

    opacity: 1;

    transform: translateY(0);

}

.receiving-final {

    margin-top: 3rem;

    font-size: clamp(2.2rem, 4vw, 3rem);

    letter-spacing: .04em;

}

/* ======================================================
   Step 1 — Worship and Honesty
   Craftsmanship Fade
====================================================== */

.step-one-group {

    margin-bottom: 2.75rem;

}

.step-one-group > p,
.step-one-rollout p {

    opacity: 0;

    transform: translateY(10px);

    transition:
        opacity 1.6s ease,
        transform 1.6s ease;

}

.step-one-group .step-one-visible {

    opacity: 1;

    transform: translateY(0);

}

.step-one-rollout {

    margin-top: 1.35rem;

}

.step-one-rollout p {

    margin-bottom: 0.7rem;

}

.honesty-group {

    margin-top: 3rem;

}

/* ======================================================
   Reflection and Blessing Experience
   Foundation Release 10.0
====================================================== */

.reflection-space {

    min-height: 420px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    padding: 3rem 2rem;

}

.reflection-lines {

    width: 100%;

    max-width: 620px;

    text-align: center;

}

.reflection-line {

    margin-bottom: 1.8rem;

    font-family: var(--font-heading);

    font-size: clamp(1.45rem, 3vw, 2rem);

    font-weight: 400;

    line-height: 1.65;

    color: var(--color-heading);

    opacity: 0;

    transform: translateY(10px);

    transition:
        opacity 1.5s ease,
        transform 1.5s ease;

}

.reflection-line.visible {

    opacity: 1;

    transform: translateY(0);

}

/* ======================================================
Reflection Exit
====================================================== */

.reflection-lines {

    transition:
        opacity 2.2s ease,
        transform 2.2s ease;

}

.reflection-fade {

    opacity: 0;

    transform: translateY(-12px);

    pointer-events: none;

}

/* ======================================================
   Final Blessing Layout
====================================================== */

.scripture-blessing {

    opacity: 0;

    width: 100%;

    max-width: 620px;

    margin: 0 auto;

    text-align: center;

    transition:
        opacity 1.8s ease,
        transform 1.8s ease;

    transform: translateY(12px);

}

.scripture-blessing.visible {

    opacity: 1;

    transform: translateY(0);

}

.scripture-blessing .journey-scripture {

    margin: 0 auto 2rem;

}

.scripture-blessing .journey-scripture p {

    font-family: var(--font-heading);

    font-size: clamp(1.55rem, 3vw, 2.15rem);

    line-height: 1.7;

}

.scripture-blessing .journey-scripture footer {

    margin-top: 1.25rem;

    color: var(--color-secondary);

}

.closing-message {

    margin-top: 2.5rem;

    font-family: var(--font-heading);

    font-size: clamp(1.35rem, 2.5vw, 1.8rem);

    line-height: 1.6;

}

/* ==================================================
Closing Pilgrim Actions
================================================== */

.closing-pilgrim-actions {

    opacity: 0.08;

    visibility: visible;

    transform: translateY(16px);

    pointer-events: auto;

    transition:
        opacity 8s ease,
        transform 8s ease;

}

.closing-pilgrim-actions.visible {

    opacity: 1;

    transform: translateY(0);

}

.closing-actions {

    opacity: 0;

    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1rem;

    margin-top: 2.75rem;

    transition:
        opacity 1.6s ease,
        transform 1.6s ease;

    transform: translateY(12px);

}

.closing-actions.visible {

    opacity: 1;

    transform: translateY(0);

}

.closing-actions .primary-button {

    width: min(100%, 320px);

    margin-top: 0;

}

/* ======================================================
   Pilgrim Controls
   Previous / Next Room Navigation
====================================================== */

.journey-shell {

    width: 100%;

    max-width: 760px;

    display: flex;

    flex-direction: column;

    align-items: center;

}

.journey-navigation {

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 1rem;

    padding: 0 0.5rem;

}

.room-navigation-button {

    border: none;

    background: transparent;

    color: rgba(255, 255, 255, 0.72);

    font-family: var(--font-body);

    font-size: 0.9rem;

    letter-spacing: 0.02em;

    padding: 0.65rem 0.5rem;

    transition:
        color 0.3s ease,
        opacity 0.3s ease;

}

.room-navigation-button:hover {

    color: rgba(255, 255, 255, 1);

}

.room-navigation-button:focus-visible {

    outline: 2px solid rgba(255, 255, 255, 0.8);

    outline-offset: 4px;

    border-radius: 6px;

}

.room-navigation-button:disabled {

    opacity: 0.25;

    cursor: default;

}

.journey-navigation.hidden-navigation {

    display: none;

}

@media (max-width: 480px) {

    .journey-navigation {

        padding: 0;

    }

    .room-navigation-button {

        font-size: 0.82rem;

    }

}

/* ======================================================
   Sanctuary Awakening
   Foundation Release 13.1
====================================================== */

.sanctuary-space {

    position: relative;

    width: 100%;

    min-height: 420px;

    overflow: hidden;

}


/*
Keep the unfolding invitation above the image
until the words gently yield.
*/

.sanctuary-space .presence-thought {

    position: relative;

    z-index: 2;

    transition:
        opacity 2.2s ease,
        transform 2.2s ease;

}

.sanctuary-space .presence-thought.presence-yield {

    opacity: 0;

    transform:
        translateY(-10px);

    pointer-events: none;

}


/*
The Sanctuary begins slightly distant,
softened, and dimmed.
*/

.sanctuary-image-frame {

    position: absolute;

    inset: 0;

    z-index: 1;

    margin: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transform:
        scale(0.975);

    pointer-events: none;

    transition:
        opacity 3.8s ease,
        transform 6s ease;

}


/*
The frame arrives first while the image itself
continues awakening into warmth and clarity.
*/

.sanctuary-image-frame.visible {

    opacity: 1;

    transform:
        scale(1);

}

.sanctuary-image-frame img {

    display: block;

    width: 100%;

    max-height: 430px;

    object-fit: cover;

    border-radius:
        var(--radius-large);

    filter:
        brightness(0.82)
        saturate(0.82)
        blur(2px);

    transform:
        scale(1.025);

    box-shadow:
        0 18px 45px
        rgba(20, 32, 36, 0.18);

    transition:
        filter 6.5s ease,
        transform 7s ease,
        box-shadow 6s ease;

}


/*
As the Sanctuary becomes visible,
light, color, and clarity gently return.
*/

.sanctuary-image-frame.visible img {

    filter:
        brightness(1)
        saturate(1)
        blur(0);

    transform:
        scale(1);

    box-shadow:
        0 22px 52px
        rgba(20, 32, 36, 0.22);

}


@media (max-width: 600px) {

    .sanctuary-space {

        min-height: 340px;

    }

    .sanctuary-image-frame img {

        max-height: 350px;

    }

}


/*
Respect visitors who prefer reduced motion.
*/

@media (prefers-reduced-motion: reduce) {

    .sanctuary-space .presence-thought,
    .sanctuary-image-frame,
    .sanctuary-image-frame img {

        transition-duration:
            0.01ms;

    }

    .sanctuary-image-frame img,
    .sanctuary-image-frame.visible img {

        filter:
            none;

        transform:
            none;

    }

}

/* ======================================================
   Receiving Room — Revelation Sequence
   Foundation Release 10.2
====================================================== */

.receiving-space {

    position: relative;

    isolation: isolate;

    overflow: hidden;

    min-height: 340px;

    border-radius: 22px;

    background: transparent;

    box-shadow:
        inset 0 0 0 rgba(0, 0, 0, 0);

    transition:
        background 2.8s ease,
        box-shadow 2.8s ease,
        transform 2.8s ease;

}

/*
Keep the text above every lighting layer.
*/

.receiving-space .presence-thought {

    position: relative;

    z-index: 3;

}

/*
Vertical beam.
It begins narrow and completely hidden.
*/

.receiving-space::before {

    content: "";

    position: absolute;

    z-index: 1;

    top: 5%;

    left: 50%;

    width: 24px;

    height: 88%;

    opacity: 0;

    transform:
        translateX(-50%)
        scaleY(0.45);

    background:
        linear-gradient(
            to bottom,
            rgba(255, 255, 244, 0),
            rgba(255, 252, 225, 0.96) 28%,
            rgba(255, 235, 166, 1) 50%,
            rgba(255, 214, 103, 0.78) 72%,
            rgba(255, 205, 76, 0)
        );

    filter: blur(10px);

    box-shadow:
        0 0 18px rgba(255, 239, 176, 0.65),
        0 0 50px rgba(255, 206, 90, 0.32);

    transition:
        opacity 2.2s ease,
        transform 2.8s ease,
        width 1.4s ease,
        filter 1.4s ease,
        box-shadow 1.8s ease;

}

/*
Horizontal beam.
*/

.receiving-space::after {

    content: "";

    position: absolute;

    z-index: 1;

    top: 48%;

    left: 50%;

    width: 70%;

    height: 20px;

    opacity: 0;

    transform:
        translate(-50%, -50%)
        scaleX(0.28);

    background:
        linear-gradient(
            to right,
            rgba(255, 211, 98, 0),
            rgba(255, 228, 145, 0.72) 22%,
            rgba(255, 253, 228, 1) 50%,
            rgba(255, 228, 145, 0.72) 78%,
            rgba(255, 211, 98, 0)
        );

    filter: blur(10px);

    box-shadow:
        0 0 18px rgba(255, 239, 176, 0.62),
        0 0 48px rgba(255, 204, 83, 0.30);

    transition:
        opacity 2.2s ease,
        transform 2.8s ease,
        height 1.4s ease,
        filter 1.4s ease,
        box-shadow 1.8s ease;

}

/*
Phase 1:
The final panel slowly emerges from the
lighter prayer card into a darker sacred space.
*/

.receiving-space.receiving-panel-arrival {

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(117, 86, 42, 0.35) 0%,
            rgba(39, 39, 37, 0.92) 54%,
            rgba(18, 23, 26, 0.98) 100%
        );

    box-shadow:
        inset 0 0 85px rgba(0, 0, 0, 0.52),
        0 16px 38px rgba(17, 24, 28, 0.20);

    transform: scale(1);

}

.receiving-space.receiving-panel-arrival::before {

    opacity: 0.48;

    transform:
        translateX(-50%)
        scaleY(0.78);

}

.receiving-space.receiving-panel-arrival::after {

    opacity: 0.42;

    transform:
        translate(-50%, -50%)
        scaleX(0.70);

}

/*
Phase 2:
The light resolves into a brighter,
more clearly defined cross.
*/

.receiving-space.receiving-cross-peak::before {

    opacity: 1;

    width: 18px;

    transform:
        translateX(-50%)
        scaleY(1);

    filter: blur(3px);

    box-shadow:
        0 0 12px rgba(255, 255, 235, 1),
        0 0 32px rgba(255, 231, 153, 0.88),
        0 0 76px rgba(255, 191, 55, 0.56);

}

.receiving-space.receiving-cross-peak::after {

    opacity: 1;

    height: 16px;

    transform:
        translate(-50%, -50%)
        scaleX(1);

    filter: blur(3px);

    box-shadow:
        0 0 12px rgba(255, 255, 235, 1),
        0 0 32px rgba(255, 231, 153, 0.84),
        0 0 72px rgba(255, 191, 55, 0.52);

}

/*
Phase 3:
The definition softens, but a warm cross
and illuminated room remain.
*/

.receiving-space.receiving-cross-settled {

    background:
        radial-gradient(
            circle at 50% 48%,
            rgba(219, 159, 64, 0.38) 0%,
            rgba(66, 50, 31, 0.88) 44%,
            rgba(18, 24, 27, 0.98) 100%
        );

    box-shadow:
        inset 0 0 78px rgba(0, 0, 0, 0.42),
        0 16px 38px rgba(17, 24, 28, 0.18);

}

.receiving-space.receiving-cross-settled::before {

    opacity: 0.68;

    width: 28px;

    transform:
        translateX(-50%)
        scaleY(0.96);

    filter: blur(12px);

    box-shadow:
        0 0 24px rgba(255, 234, 164, 0.62),
        0 0 58px rgba(255, 188, 61, 0.34);

}

.receiving-space.receiving-cross-settled::after {

    opacity: 0.62;

    height: 26px;

    transform:
        translate(-50%, -50%)
        scaleX(0.94);

    filter: blur(12px);

    box-shadow:
        0 0 24px rgba(255, 234, 164, 0.58),
        0 0 56px rgba(255, 188, 61, 0.30);

}

/*
The final invitation remains clear above
the strongest moment of light.
*/

.receiving-final-word {

    position: relative;

    z-index: 3;

    color: rgba(255, 249, 222, 1);

    font-size: clamp(2.2rem, 5vw, 3.3rem);

    text-shadow:
        0 2px 4px rgba(22, 18, 10, 0.75),
        0 0 12px rgba(255, 238, 178, 0.72),
        0 0 32px rgba(255, 196, 67, 0.34);

    transition:
        color 2.2s ease,
        font-size 2.2s ease,
        text-shadow 2.6s ease;

}

@media (prefers-reduced-motion: reduce) {

    .receiving-space,
    .receiving-space::before,
    .receiving-space::after,
    .receiving-final-word {

        transition-duration: 0.01ms !important;

    }

}

/*
Respect the user's reduced-motion preference.
*/

@media (prefers-reduced-motion: reduce) {

    .receiving-space .presence-thought.visible {

        animation: none;

        text-shadow:
            0 0 8px rgba(244, 226, 177, 0.18);

    }

}

/* ======================================================
   Native Hidden Safeguard
====================================================== */

#continue-button[hidden] {

    display: none !important;

}

/* ======================================================
   Final Blessing Re-centering
   Foundation Release 10.4
====================================================== */

.reflection-space {

    position: relative;

    transition:
        min-height 1.8s ease,
        padding 1.8s ease;

}

.reflection-space.blessing-centered {

    min-height: 680px;

    justify-content: center;

    padding-top: 4rem;

    padding-bottom: 4rem;

}

.reflection-space.blessing-centered
.reflection-lines {

    position: absolute;

    pointer-events: none;

}

.reflection-space.blessing-centered
.scripture-blessing {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;

    margin: auto;

}

.reflection-space.blessing-centered
.closing-actions {

    width: 100%;

    margin-top: 2.5rem;

}

@media (max-width: 600px) {

    .reflection-space.blessing-centered {

        min-height: 560px;

        padding:
            2.5rem
            1rem;

    }

}

/* ======================================================
   Arrival Experience
   Foundation Release 10.8
====================================================== */

.screen.active {

    opacity: 1;

    transform: translateY(0);

    transition:
        opacity 0.9s ease,
        transform 0.9s ease;

}

.screen.experience-leaving {

    opacity: 0;

    transform: translateY(-14px);

    pointer-events: none;

}

.screen.experience-entering {

    opacity: 0;

    transform: translateY(16px);

}

.screen.experience-entering {

    opacity: 0;

    transform: translateY(16px);

}

/* ======================================================
   Scripture Presentation
   Foundation Release 11.4
====================================================== */

/*
----------------------------------
Scripture Reference
----------------------------------
*/

#journey-reference {

    opacity: 0;

    transform: translateY(6px);

    transition:
        opacity 900ms ease,
        transform 900ms ease;

}

/*
----------------------------------
Scripture Text
----------------------------------
*/

#journey-scripture {

    opacity: 0;

    transform: translateY(10px);

    transition:
        opacity 1400ms ease,
        transform 1400ms ease;

}

/*
----------------------------------
Movement Invitation
----------------------------------
*/

#journey-content {

    opacity: 0;

    transform: translateY(14px);

    transition:
        opacity 1200ms ease,
        transform 1200ms ease;

}

/*
----------------------------------
Visible States
----------------------------------
*/

#journey-reference.scripture-reference-visible,
#journey-scripture.scripture-visible,
#journey-content.journey-content-visible {

    opacity: 1;

    transform: translateY(0);

}

/*
----------------------------------
Respect Reduced Motion
----------------------------------
*/

@media (prefers-reduced-motion: reduce) {

    #journey-reference,
    #journey-scripture,
    #journey-content {

        opacity: 1;

        transform: none;

        transition: none;

    }

}

/* ======================================================
   Room 3 — Presence Liturgy
   Foundation Release 12.5
====================================================== */

.room-three-experience {

    position: relative;

    width: 100%;

    min-height: 440px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

}

.room-three-presence {

    position: relative;

    z-index: 2;

    width: 100%;

    transition:
        opacity 1800ms ease,
        transform 1800ms ease;

}

.room-three-presence p {

    opacity: 0;

    transform: translateY(10px);

    transition:
        opacity 1200ms ease,
        transform 1200ms ease;

}

.room-three-presence p.presence-visible {

    opacity: 1;

    transform: translateY(0);

}

.room-three-presence.presence-yield {

    opacity: 0;

    transform: translateY(-10px);

    pointer-events: none;

}

.room-three-sanctuary {

    position: absolute;

    inset: 0;

    z-index: 1;

    margin: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    opacity: 0;

    transform: scale(0.985);

    transition:
        opacity 3000ms ease,
        transform 4000ms ease;

    pointer-events: none;

}

.room-three-sanctuary.visible {

    opacity: 1;

    transform: scale(1);

}

.room-three-sanctuary img {

    display: block;

    width: 100%;

    max-height: 430px;

    object-fit: cover;

    border-radius: var(--radius-large);

    box-shadow:
        0 18px 45px rgba(20, 32, 36, 0.18);

}

@media (max-width: 600px) {

    .room-three-experience {

        min-height: 350px;

    }

    .room-three-sanctuary img {

        max-height: 350px;

    }

}

/* ======================================================
Prayer Companions
Foundation Release 12.7
====================================================== */

#journey-content .companion-toggle {
    position: relative;
    overflow: hidden;
    text-align: left;

    border-color:
        rgba(107, 138, 120, 0.24);

    transition:
        transform 0.65s ease,
        border-color 0.65s ease,
        box-shadow 0.65s ease,
        background-color 0.65s ease;
}

#journey-content .companion-toggle::after {
    content: "";

    position: absolute;
    left: 12%;
    right: 12%;
    bottom: 0;

    height: 1px;

    background:
        rgba(107, 138, 120, 0.52);

    opacity: 0;
    transform: scaleX(0);

    transition:
        opacity 0.7s ease,
        transform 0.8s ease;
}

#journey-content .companion-title {
    margin: 0;

    transition:
        transform 0.65s ease,
        color 0.65s ease;
}

#journey-content .companion-guidance {
    max-height: 0;
    margin-top: 0;

    overflow: hidden;
    opacity: 0;

    transform:
        translateY(-6px);

    transition:
        max-height 1.1s ease,
        margin-top 0.9s ease,
        opacity 0.75s ease,
        transform 0.9s ease;
}

#journey-content .companion-introduction,
#journey-content .reflection-question {
    opacity: 0;

    transform:
        translateY(8px);

    transition:
        opacity 0.85s ease,
        transform 0.85s ease;
}

#journey-content .companion-toggle.active {
    transform:
        translateY(-3px);

    border-color:
        rgba(107, 138, 120, 0.52);

    background:
        rgba(255, 255, 255, 0.12);

    box-shadow:
        0 12px 30px
        rgba(42, 67, 58, 0.12);
}

#journey-content .companion-toggle.active::after {
    opacity: 1;

    transform:
        scaleX(1);
}

#journey-content .companion-toggle.active
.companion-title {
    transform:
        translateX(3px);
}

#journey-content .companion-toggle.active
.companion-guidance {
    max-height: 260px;
    margin-top: 1rem;

    opacity: 1;

    transform:
        translateY(0);
}

#journey-content .companion-toggle.show-introduction
.companion-introduction {
    opacity: 1;

    transform:
        translateY(0);
}

#journey-content .companion-toggle.show-reflection
.reflection-question {
    opacity: 1;

    transform:
        translateY(0);
}

@media (prefers-reduced-motion: reduce) {

    #journey-content .companion-toggle,
    #journey-content .companion-toggle::after,
    #journey-content .companion-title,
    #journey-content .companion-guidance,
    #journey-content .companion-introduction,
    #journey-content .reflection-question {
        transition-duration:
            0.01ms;
    }

}

/* ======================================================
Prayer Companion Invitation
Foundation Release 12.9
====================================================== */

#journey-content .companion-invitation {
    grid-column:
        1 / -1;

    margin:
        1.4rem 0 0;

    text-align:
        center;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size:
        1.08rem;

    font-style:
        italic;

    line-height:
        1.6;

    color:
        var(--color-secondary);

    opacity:
        0;

    transform:
        translateY(6px);

    pointer-events:
        none;

    transition:
        opacity 1.2s ease,
        transform 1.2s ease;
}

#journey-content .companion-invitation.visible {
    opacity:
        0.72;

    transform:
        translateY(0);
}

#journey-content .companion-invitation span {
    display: block;
}

#journey-content .companion-invitation span + span {
    margin-top: 0.35rem;
}

@media (max-width: 768px) {

    #journey-content .companion-invitation {
        margin-top:
            1.1rem;

        padding:
            0 0.75rem;

        font-size:
            1rem;
    }

}

@media (prefers-reduced-motion: reduce) {

    #journey-content .companion-invitation {
        transition-duration:
            0.01ms;
    }

}

/* =====================================================
Foundation Release 15.0
The Remembrance Room
===================================================== */

.remembrance-space {

    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    text-align: center;

}

.remembrance-lines {

    min-height: 9rem;
    display: flex;
    align-items: center;
    justify-content: center;

}

.remembrance-writing {

    width: 100%;
    max-width: 680px;
    margin: 1.5rem auto 0;

    transition:
        opacity 2.2s ease,
        transform 2.2s ease,
        visibility 2.2s ease;

}

.remembrance-writing-hidden {

    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    pointer-events: none;

}

.remembrance-writing-visible {

    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;

}

.remembrance-journal-invitation {

    margin: 0 auto 1.5rem;
    max-width: 520px;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: clamp(
        1.35rem,
        2.6vw,
        1.8rem
    );

    line-height: 1.5;

}

.remembrance-thought-complete {

    transition:
        opacity 1.5s ease;

    opacity: 0;

}

/* =====================================================
Foundation Release 16.0
The Blessing and Sending
===================================================== */

.blessing-room {

    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    text-align: center;

}

.blessing-lines {

    min-height: 11rem;

    display: flex;
    align-items: center;
    justify-content: center;

}

.blessing-thought-complete {

    opacity: 0;

    transition:
        opacity 1.2s ease;

}

.journey-complete {

    width: 100%;
    max-width: 680px;
    margin: 0 auto;

    transition:
        opacity 1.8s ease,
        transform 1.8s ease,
        visibility 1.8s ease;

}

.journey-complete-hidden {

    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    pointer-events: none;

}

.journey-complete-visible {

    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;

}

.journey-complete h2 {

    margin:
        0.6rem auto
        1rem;

}

.journey-complete-message {

    max-width: 520px;
    margin:
        0 auto
        2.2rem;

    font-family:
        "Cormorant Garamond",
        serif;

    font-size: clamp(
        1.3rem,
        2.5vw,
        1.75rem
    );

    line-height: 1.5;

}

.closing-actions {

    opacity: 0;

    width: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 1rem;

    margin-top: 2.75rem;

    transition:
        opacity 1.6s ease,
        transform 1.6s ease;

    transform: translateY(12px);

}

.closing-actions.visible {

    opacity: 1;

    transform: translateY(0);

}

.closing-actions .primary-button {

    width: min(
        100%,
        340px
    );

}

/* ======================================================
   Release 17.2
   Prayer Card Interior Rhythm
====================================================== */

/*
The movement label remains close to the title,
so they are perceived as one introduction.
*/

#step-number {

    margin-bottom: 0.35rem;

    letter-spacing: 0.06em;

}


/*
The movement title receives a little more room
before the visitor enters the Scripture.
*/

#journey-title {

    margin-bottom: 2.15rem;

    line-height: 1.15;

}


/*
The reference and Scripture remain connected,
while the space beneath Scripture creates a pause
before the movement invitation begins.
*/

#journey-reference {

    margin-bottom: 0.8rem;

}

#journey-scripture {

    max-width: 620px;

    margin:
        0 auto
        2.85rem;

    line-height: 1.65;

}


/*
Keep the prayer invitation comfortably readable
without allowing longer lines to spread too widely.
*/

#journey-content {

    width: 100%;

    max-width: 650px;

    margin-left: auto;

    margin-right: auto;

}


/*
Preserve comfortable proportions on smaller screens.
*/

@media (max-width: 768px) {

    #journey-title {

        margin-bottom: 1.75rem;

    }

    #journey-scripture {

        margin-bottom: 2.25rem;

    }

}

/* ======================================================
   Release 17.3
   Blessing Room — Quiet Closing Actions
====================================================== */

/*
Keep the Journey Complete words hidden while
the blessing is still being spoken.
*/

.journey-complete.completion-copy-pending
.closing-blessing {

    opacity: 0;

    visibility: hidden;

    transform: translateY(12px);

}

/*
Reveal the completion words only after the
blessing and sending have finished.
*/

.journey-complete
.closing-blessing {

    transition:
        opacity 2.4s ease,
        transform 2.4s ease,
        visibility 2.4s ease;

}

/* Final blessing navigation belongs to the
   larger pilgrim-action fade-in. */

.closing-pilgrim-actions .closing-actions {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

    pointer-events: auto;

    transition: none;

}

.journey-complete.completion-copy-visible
.closing-blessing {

    opacity: 1;

    visibility: visible;

    transform: translateY(0);

}


/*
The closing choices begin barely present and
slowly become clear throughout the blessing.
They remain available to returning visitors.
*/


/*
Keep keyboard focus clear even while the
buttons are still visually faint.
*/

#blessing-room .closing-actions
.primary-button:focus-visible {

    opacity: 1;

}

/* ======================================================
   New Journey Confirmation
====================================================== */

.new-journey-confirmation {

    position: fixed;

    inset: 0;

    z-index: 1000;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 1.5rem;

    background:
        rgba(16, 22, 28, 0);

    backdrop-filter:
        blur(0);

    opacity: 0;

    transition:
        opacity 0.5s ease,
        background 0.5s ease,
        backdrop-filter 0.5s ease;

}


.new-journey-confirmation[hidden] {

    display: none;

}


.new-journey-confirmation.visible {

    background:
        rgba(16, 22, 28, 0.46);

    backdrop-filter:
        blur(6px);

    opacity: 1;

}


.new-journey-confirmation-card {

    width: 100%;

    max-width: 540px;

    padding: 3rem;

    text-align: center;

    background:
        rgba(255, 255, 255, 0.94);

    border:
        1px solid rgba(255, 255, 255, 0.5);

    border-radius: 26px;

    box-shadow:
        0 24px 70px
        rgba(16, 22, 28, 0.24);

    transform:
        translateY(14px);

    transition:
        transform 0.6s ease;

}


.new-journey-confirmation.visible
.new-journey-confirmation-card {

    transform:
        translateY(0);

}


.new-journey-confirmation-message {

    margin-top: 1.25rem;

}


.new-journey-confirmation-note {

    margin-top: 0.75rem;

    font-size: 0.92rem;

    opacity: 0.72;

}


.new-journey-confirmation-actions {

    display: flex;

    justify-content: center;

    gap: 1rem;

    margin-top: 2rem;

    flex-wrap: wrap;

}


.new-journey-confirmation-actions button {

    min-width: 180px;

}


@media (max-width: 600px) {

    .new-journey-confirmation-card {

        padding:
            2.25rem 1.5rem;

    }

    .new-journey-confirmation-actions {

        flex-direction: column;

    }

    .new-journey-confirmation-actions button {

        width: 100%;

    }

}