/*
 * PromisePrayer Prayer Stream
 * Phase 5 Visual Engine
 *
 * Authored Moment content is not stored here.
 * These layers are decorative and aria-hidden.
 */

.pp-visual {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 0;
}

.pp-moment__content {
    position: relative;
    z-index: 2;
}


/* =========================================================
   Visual-specific content contrast
   ========================================================= */

.pp-moment[data-visual] {
    background: transparent;
}

.pp-moment[data-visual="warm-bloom-v1"],
.pp-moment[data-visual="dawn-horizon-v1"],
.pp-moment[data-visual="mist-light-v1"],
.pp-moment[data-visual="water-ripples-v1"] {
    color: #2d4258;
}

.pp-moment[data-visual="night-stars-v1"],
.pp-moment[data-visual="quiet-candle-v1"] {
    color: #f5f1e8;
}

.pp-moment[data-visual="presence-stars-v1"] {
    color: #17324f;
}


/* =========================================================
   Animation lifecycle
   ========================================================= */

.pp-visual,
.pp-visual * {
    animation-play-state: paused !important;
}

.pp-moment.is-active .pp-visual,
.pp-moment.is-active .pp-visual * {
    animation-play-state: running !important;
}


/*
 * Phase 4 ambient layers and genuine presence lights also obey
 * the unified Phase 5 active-Moment lifecycle.
 */
.pp-moment .pp-moment__ambient,
.pp-moment .pp-moment__ambient::before,
.pp-moment .pp-moment__ambient::after,
.pp-moment .pp-presence-light,
.pp-moment .pp-presence-star,
.pp-moment .pp-presence-star::before,
.pp-moment .pp-presence-star::after,
.pp-moment .pp-presence-star-distant,
.pp-moment .pp-presence-star-distant::before,
.pp-moment .pp-presence-star-distant::after {
    animation-play-state: paused !important;
}

.pp-moment.is-active .pp-moment__ambient,
.pp-moment.is-active .pp-moment__ambient::before,
.pp-moment.is-active .pp-moment__ambient::after,
.pp-moment.is-active .pp-presence-light,
.pp-moment.is-active .pp-presence-star,
.pp-moment.is-active .pp-presence-star::before,
.pp-moment.is-active .pp-presence-star::after,
.pp-moment.is-active .pp-presence-star-distant,
.pp-moment.is-active .pp-presence-star-distant::before,
.pp-moment.is-active .pp-presence-star-distant::after {
    animation-play-state: running !important;
}


/* =========================================================
   Warm Bloom
   ========================================================= */

.pp-visual[data-visual="warm-bloom-v1"] {
    background:
        radial-gradient(
            circle at 76% 20%,
            rgba(244, 224, 164, 0.30),
            transparent 33%
        ),
        linear-gradient(
            145deg,
            #f5f0df 0%,
            #eef0df 52%,
            #ece6d2 100%
        );
}

.pp-visual__bloom {
    position: absolute;

    width: 48vmax;
    height: 48vmax;

    border-radius: 44% 56% 57% 43% / 48% 42% 58% 52%;

    filter: blur(42px);

    opacity: 0.24;

    transform: translate3d(0, 0, 0);

    animation:
        pp-visual-bloom-drift
        20s
        ease-in-out
        infinite
        alternate;
}

.pp-visual__bloom--1 {
    left: -20vmax;
    top: -18vmax;

    background: rgba(255, 242, 194, 0.78);

    animation-duration: 24s;
}

.pp-visual__bloom--2 {
    right: -24vmax;
    top: 20%;

    background: rgba(206, 218, 181, 0.72);

    animation-duration: 19s;
    animation-delay: -7s;
}

.pp-visual__bloom--3 {
    left: 22%;
    bottom: -30vmax;

    background: rgba(239, 215, 157, 0.62);

    animation-duration: 22s;
    animation-delay: -11s;
}

.pp-visual__glow-point {
    position: absolute;

    width: 4px;
    height: 4px;

    border-radius: 50%;

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

    box-shadow:
        0 0 9px rgba(255, 242, 194, 0.72),
        0 0 22px rgba(255, 226, 147, 0.28);

    animation:
        pp-visual-soft-pulse
        13s
        ease-in-out
        infinite
        alternate;
}

.pp-visual__glow-point--1 {
    left: 15%;
    top: 24%;
}

.pp-visual__glow-point--2 {
    right: 18%;
    top: 39%;

    animation-delay: -4s;
}

.pp-visual__glow-point--3 {
    left: 31%;
    bottom: 18%;

    animation-delay: -8s;
}


/* =========================================================
   Dawn Horizon
   ========================================================= */

.pp-visual[data-visual="dawn-horizon-v1"] {
    background:
        linear-gradient(
            to bottom,
            #dce7ec 0%,
            #edf0e9 48%,
            #eee2c7 100%
        );
}

.pp-visual__dawn-horizon {
    position: absolute;

    left: -10%;
    right: -10%;
    bottom: 11%;

    height: 32%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 225, 165, 0.65),
            rgba(244, 220, 178, 0.20) 46%,
            transparent 73%
        );

    filter: blur(20px);

    animation:
        pp-visual-dawn-rise
        24s
        ease-in-out
        infinite
        alternate;
}

.pp-visual__dawn-light {
    position: absolute;

    left: 50%;
    bottom: -22vmax;

    width: 58vmax;
    height: 58vmax;

    transform: translateX(-50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 242, 202, 0.58) 0%,
            rgba(255, 221, 153, 0.20) 42%,
            transparent 70%
        );

    filter: blur(26px);

    animation:
        pp-visual-dawn-breathe
        20s
        ease-in-out
        infinite
        alternate;
}

.pp-visual__dawn-haze {
    position: absolute;

    left: -20%;

    width: 140%;
    height: 20%;

    border-radius: 50%;

    background:
        linear-gradient(
            to right,
            transparent,
            rgba(255, 255, 255, 0.23),
            transparent
        );

    filter: blur(18px);

    animation:
        pp-visual-haze-drift
        28s
        ease-in-out
        infinite
        alternate;
}

.pp-visual__dawn-haze--1 {
    top: 30%;
}

.pp-visual__dawn-haze--2 {
    top: 55%;

    opacity: 0.65;

    animation-delay: -13s;
}


/* =========================================================
   Mist Light
   ========================================================= */

.pp-visual[data-visual="mist-light-v1"] {
    background:
        linear-gradient(
            155deg,
            #eef0eb 0%,
            #e3eaed 50%,
            #f4efe3 100%
        );
}

.pp-visual__mist {
    position: absolute;

    left: -35%;

    width: 170%;
    height: 26%;

    border-radius: 50%;

    background:
        linear-gradient(
            to right,
            transparent 0%,
            rgba(255, 255, 255, 0.08) 18%,
            rgba(255, 255, 255, 0.39) 50%,
            rgba(255, 255, 255, 0.08) 82%,
            transparent 100%
        );

    filter: blur(24px);

    opacity: 0.72;

    animation:
        pp-visual-mist-drift
        24s
        ease-in-out
        infinite
        alternate;
}

.pp-visual__mist--1 {
    top: 5%;
}

.pp-visual__mist--2 {
    top: 28%;

    animation-duration: 30s;
    animation-delay: -9s;
}

.pp-visual__mist--3 {
    top: 55%;

    animation-duration: 21s;
    animation-delay: -14s;
}

.pp-visual__mist--4 {
    top: 76%;

    animation-duration: 27s;
    animation-delay: -5s;
}

.pp-visual__mist-light {
    position: absolute;

    right: -15vmax;
    top: -15vmax;

    width: 48vmax;
    height: 48vmax;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(255, 255, 247, 0.54),
            transparent 68%
        );

    filter: blur(26px);

    animation:
        pp-visual-soft-pulse
        22s
        ease-in-out
        infinite
        alternate;
}


/* =========================================================
   Night Stars
   ========================================================= */

.pp-visual[data-visual="night-stars-v1"] {
    background:
        radial-gradient(
            circle at 72% 26%,
            rgba(88, 104, 146, 0.30),
            transparent 34%
        ),
        linear-gradient(
            165deg,
            #111a30 0%,
            #1b2742 50%,
            #202f4d 100%
        );
}

.pp-visual__night-star {
    position: absolute;

    left: var(--star-x);
    top: var(--star-y);

    width: var(--star-size);
    height: var(--star-size);

    border-radius: 50%;

    background: rgba(255, 252, 226, 0.92);

    box-shadow:
        0 0 5px rgba(255, 252, 226, 0.65),
        0 0 12px rgba(213, 224, 255, 0.22);

    animation:
        pp-visual-star-breathe
        8s
        ease-in-out
        var(--star-delay)
        infinite
        alternate;
}

.pp-visual__night-glow {
    position: absolute;

    right: 4%;
    top: 9%;

    width: 28vmax;
    height: 28vmax;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(177, 193, 229, 0.16),
            transparent 70%
        );

    filter: blur(20px);

    animation:
        pp-visual-soft-pulse
        19s
        ease-in-out
        infinite
        alternate;
}


/* =========================================================
   Water Ripples
   ========================================================= */

.pp-visual[data-visual="water-ripples-v1"] {
    background:
        radial-gradient(
            ellipse at 50% 68%,
            rgba(255, 255, 255, 0.64) 0%,
            rgba(226, 240, 241, 0.40) 28%,
            transparent 62%
        ),
        linear-gradient(
            to bottom,
            #e9efec 0%,
            #dce9e9 52%,
            #c4dadd 100%
        );
}

.pp-visual__ripple {
    position: absolute;

    left: 50%;
    bottom: 19%;

    width: min(76vw, 760px);
    height: min(24vw, 220px);

    transform:
        translateX(-50%)
        scale(0.58);

    border:
        2px solid
        rgba(255, 255, 255, 0.90);

    border-radius: 50%;

    box-shadow:
        0 0 16px rgba(255, 255, 255, 0.38),
        0 0 30px rgba(185, 221, 226, 0.20),
        inset 0 0 18px rgba(255, 255, 255, 0.18);

    opacity: 0;

    animation:
        pp-visual-ripple
        18s
        ease-out
        infinite;
}

.pp-visual__ripple--1 {
    animation-delay: 0s;
}

.pp-visual__ripple--2 {
    animation-delay: -4.5s;
}

.pp-visual__ripple--3 {
    animation-delay: -9s;
}

.pp-visual__ripple--4 {
    animation-delay: -13.5s;
}


/* =========================================================
   Quiet Candle
   ========================================================= */

.pp-visual[data-visual="quiet-candle-v1"] {
    background:
        radial-gradient(
            ellipse at 72% 56%,
            rgba(176, 118, 55, 0.13),
            transparent 34%
        ),
        linear-gradient(
            160deg,
            #111827 0%,
            #182237 55%,
            #201d25 100%
        );
}

.pp-visual__candle-halo {
    position: absolute;

    right: 7%;
    top: 23%;

    width: 38vmax;
    height: 52vmax;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(242, 179, 90, 0.22),
            rgba(202, 127, 53, 0.08) 48%,
            transparent 72%
        );

    filter: blur(22px);

    animation:
        pp-visual-candle-halo
        7s
        ease-in-out
        infinite
        alternate;
}

.pp-visual__candle-column {
    position: absolute;

    right: 22%;
    top: 27%;

    width: 8vmax;
    height: 38vmax;

    border-radius: 50%;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 214, 144, 0.18),
            rgba(221, 151, 75, 0.04),
            transparent
        );

    filter: blur(14px);

    animation:
        pp-visual-candle-flicker
        5.8s
        ease-in-out
        infinite
        alternate;
}

.pp-visual__candle-flame {
    position: absolute;

    right: 25%;
    top: 37%;

    width: 11px;
    height: 24px;

    border-radius:
        60% 40% 58% 42% /
        72% 68% 32% 28%;

    background:
        radial-gradient(
            ellipse at 50% 65%,
            rgba(255, 247, 205, 0.95),
            rgba(245, 181, 81, 0.72) 52%,
            rgba(220, 133, 46, 0.12) 78%,
            transparent 100%
        );

    filter: blur(1px);

    box-shadow:
        0 0 11px rgba(255, 200, 114, 0.38),
        0 0 28px rgba(222, 145, 60, 0.18);

    animation:
        pp-visual-candle-flame
        4.2s
        ease-in-out
        infinite
        alternate;
}


/* =========================================================
   Presence Stars
   ========================================================= */

.pp-visual[data-visual="presence-stars-v1"] {
    background:
        radial-gradient(
            circle at 68% 30%,
            rgba(98, 126, 171, 0.22),
            transparent 37%
        ),
        linear-gradient(
            160deg,
            #455c79 0%,
            #657c98 48%,
            #8193a7 100%
        );
}

.pp-visual__presence-haze {
    position: absolute;

    inset: -15%;

    background:
        radial-gradient(
            ellipse at 50% 45%,
            rgba(219, 230, 239, 0.14),
            transparent 62%
        );

    filter: blur(22px);

    animation:
        pp-visual-soft-pulse
        18s
        ease-in-out
        infinite
        alternate;
}


/* =========================================================
   Keyframes
   ========================================================= */

@keyframes pp-visual-bloom-drift {
    from {
        transform:
            translate3d(-1.5%, -1%, 0)
            rotate(-1deg)
            scale(0.98);
    }

    to {
        transform:
            translate3d(2%, 1.5%, 0)
            rotate(2deg)
            scale(1.04);
    }
}

@keyframes pp-visual-soft-pulse {
    from {
        opacity: 0.58;
        transform: scale(0.96);
    }

    to {
        opacity: 0.94;
        transform: scale(1.04);
    }
}

@keyframes pp-visual-dawn-rise {
    from {
        opacity: 0.62;
        transform: translateY(8px);
    }

    to {
        opacity: 0.88;
        transform: translateY(-9px);
    }
}

@keyframes pp-visual-dawn-breathe {
    from {
        opacity: 0.58;
        transform:
            translateX(-50%)
            translateY(8px)
            scale(0.98);
    }

    to {
        opacity: 0.84;
        transform:
            translateX(-50%)
            translateY(-8px)
            scale(1.04);
    }
}

@keyframes pp-visual-haze-drift {
    from {
        transform: translateX(-2%);
    }

    to {
        transform: translateX(2%);
    }
}

@keyframes pp-visual-mist-drift {
    from {
        transform: translateX(-4%);
    }

    to {
        transform: translateX(4%);
    }
}

@keyframes pp-visual-star-breathe {
    from {
        opacity: 0.42;
        transform: scale(0.90);
    }

    to {
        opacity: 0.95;
        transform: scale(1.13);
    }
}

@keyframes pp-visual-ripple {
    0% {
        opacity: 0;
        transform:
            translateX(-50%)
            scale(0.55);
    }

    16% {
        opacity: 0.50;
    }

    78% {
        opacity: 0.18;
    }

    100% {
        opacity: 0;
        transform:
            translateX(-50%)
            scale(1.58);
    }
}

@keyframes pp-visual-candle-halo {
    from {
        opacity: 0.67;
        transform: scale(0.98);
    }

    to {
        opacity: 0.85;
        transform: scale(1.03);
    }
}

@keyframes pp-visual-candle-flicker {
    0% {
        opacity: 0.52;
        transform: translateX(0) scaleX(0.96);
    }

    35% {
        opacity: 0.65;
        transform: translateX(2px) scaleX(1.02);
    }

    70% {
        opacity: 0.57;
        transform: translateX(-1px) scaleX(0.99);
    }

    100% {
        opacity: 0.69;
        transform: translateX(1px) scaleX(1.03);
    }
}

@keyframes pp-visual-candle-flame {
    0% {
        opacity: 0.76;
        transform:
            rotate(-1deg)
            scale(0.95, 0.98);
    }

    33% {
        opacity: 0.92;
        transform:
            rotate(1.5deg)
            scale(1.03, 1.02);
    }

    68% {
        opacity: 0.82;
        transform:
            rotate(-0.8deg)
            scale(0.98, 1.04);
    }

    100% {
        opacity: 0.94;
        transform:
            rotate(0.7deg)
            scale(1.02, 1.00);
    }
}


/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
    /*
     * Static Water Ripples for reduced motion.
     * Atmosphere remains visible; only motion stops.
     */
    .pp-visual__ripple--1 {
        opacity: 0.68 !important;
        transform:
            translateX(-50%)
            scale(0.62) !important;
    }

    .pp-visual__ripple--2 {
        opacity: 0.56 !important;
        transform:
            translateX(-50%)
            scale(0.86) !important;
    }

    .pp-visual__ripple--3 {
        opacity: 0.44 !important;
        transform:
            translateX(-50%)
            scale(1.10) !important;
    }

    .pp-visual__ripple--4 {
        opacity: 0.32 !important;
        transform:
            translateX(-50%)
            scale(1.34) !important;
    }




    .pp-visual,
    .pp-visual * {
        animation: none !important;
        animation-play-state: paused !important;
    }
}