/* =========================================================
   Phase 7 — Illustrated & Cinematic Moments
   ========================================================= */

.pp-illustrated-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease;
}

.pp-illustrated-media--ready {
    opacity: 1;
}

.pp-illustrated-media img,
.pp-illustrated-media video {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position:
        var(--pp-media-position, center center);

    transform: scale(1.01);

    animation-play-state: paused !important;
    will-change: transform;
}

.pp-moment.is-active
.pp-illustrated-media img {
    animation-play-state: running !important;
}


/* =========================================================
   Generic visual fallback

   Generic visuals remain available underneath until the
   image successfully loads. Once illustrated media is ready,
   generic animation is hidden and paused. If the image fails,
   JS removes the illustrated state and the generic visual
   becomes visible again.
   ========================================================= */

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


/* =========================================================
   Cinematic motion presets
   ========================================================= */

.pp-motion--cinematic-push-v1 img {
    animation:
        pp-cinematic-push
        28s
        ease-in-out
        infinite
        alternate;
}

.pp-motion--cinematic-drift-left-v1 img {
    animation:
        pp-cinematic-drift-left
        32s
        ease-in-out
        infinite
        alternate;
}

.pp-motion--cinematic-drift-right-v1 img {
    animation:
        pp-cinematic-drift-right
        32s
        ease-in-out
        infinite
        alternate;
}

.pp-motion--cinematic-breathe-v1 img {
    animation:
        pp-cinematic-breathe
        30s
        ease-in-out
        infinite
        alternate;
}

@keyframes pp-cinematic-push {
    from {
        transform: scale(1.01);
    }

    to {
        transform: scale(1.055);
    }
}

@keyframes pp-cinematic-drift-left {
    from {
        transform:
            scale(1.05)
            translate3d(1.25%, 0, 0);
    }

    to {
        transform:
            scale(1.05)
            translate3d(-1.25%, 0, 0);
    }
}

@keyframes pp-cinematic-drift-right {
    from {
        transform:
            scale(1.05)
            translate3d(-1.25%, 0, 0);
    }

    to {
        transform:
            scale(1.05)
            translate3d(1.25%, 0, 0);
    }
}

@keyframes pp-cinematic-breathe {
    from {
        transform: scale(1.01);
    }

    to {
        transform: scale(1.03);
    }
}


/* =========================================================
   Readability overlays
   ========================================================= */

.pp-illustrated-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.pp-overlay--none {
    background: transparent;
}

.pp-overlay--soft {
    background:
        linear-gradient(
            to bottom,
            rgba(10, 18, 28, 0.10),
            rgba(10, 18, 28, 0.24)
        );
}

.pp-overlay--warm-dark {
    background:
        linear-gradient(
            to bottom,
            rgba(38, 25, 16, 0.18),
            rgba(24, 16, 10, 0.48)
        );
}

.pp-overlay--cool-dark {
    background:
        linear-gradient(
            to bottom,
            rgba(12, 24, 36, 0.15),
            rgba(9, 18, 30, 0.50)
        );
}

.pp-overlay--bottom-dark {
    background:
        linear-gradient(
            to bottom,
            transparent 30%,
            rgba(10, 16, 24, 0.68) 100%
        );
}

.pp-overlay--side-dark-left {
    background:
        linear-gradient(
            to right,
            rgba(8, 14, 22, 0.66) 0%,
            rgba(8, 14, 22, 0.28) 48%,
            transparent 82%
        );
}

.pp-overlay--side-dark-right {
    background:
        linear-gradient(
            to left,
            rgba(8, 14, 22, 0.66) 0%,
            rgba(8, 14, 22, 0.28) 48%,
            transparent 82%
        );
}


/* =========================================================
   Illustrated text presentation
   ========================================================= */

.pp-moment.pp-moment--illustrated {
    color: #fff;
}

.pp-moment.pp-moment--illustrated
.pp-moment__content {
    position: absolute;
    inset: 0;

    z-index: 2;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;

    width: 100%;
    max-width: none;

    padding:
        max(72px, calc(env(safe-area-inset-top) + 44px))
        clamp(24px, 7vw, 72px)
        max(78px, calc(env(safe-area-inset-bottom) + 44px));

    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.36),
        0 4px 20px rgba(0, 0, 0, 0.22);
}


/* =========================================================
   Five responsive text zones
   ========================================================= */

.pp-text-zone--center
.pp-moment__content {
    justify-content: center;
    align-items: center;
    text-align: center;
}

.pp-text-zone--upper
.pp-moment__content {
    justify-content: flex-start;
    align-items: center;
    text-align: center;
}

.pp-text-zone--lower
.pp-moment__content {
    justify-content: flex-end;
    align-items: center;
    text-align: center;
}

.pp-text-zone--upper-left
.pp-moment__content {
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
}

.pp-text-zone--upper-right
.pp-moment__content {
    justify-content: flex-start;
    align-items: flex-end;
    text-align: right;
}

[dir="rtl"]
.pp-text-zone--upper-left
.pp-moment__content {
    text-align: right;
}

[dir="rtl"]
.pp-text-zone--upper-right
.pp-moment__content {
    text-align: right;
}


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

@media (prefers-reduced-motion: reduce) {
    .pp-illustrated-media {
        transition: none;
    }

    .pp-illustrated-media img,
    .pp-moment.is-active
    .pp-illustrated-media img {
        animation: none !important;
        transform: scale(1.02) !important;
    }
}


/* =========================================================
   MP4 VIDEO MEDIA
   Videos provide their own natural motion. They intentionally
   do not inherit the image-only cinematic transform presets.
   Audio is always muted by the Stream renderer so Prayer
   Stream music remains the only soundtrack.
   ========================================================= */

.pp-illustrated-media video {
    display: block;
    background: #07111d;
    pointer-events: none;
}