/* ================================================================
   MISSIONARY-FLYBY.CSS - "MISSIONARIES" SCREENSAVER
   ================================================================
   Styles for the screensaver mode where missionary cards fly across
   the screen and one at a time zooms up into the spotlight
   (js/missionaryFlyby.js). screensaver.js switches modes by adding
   .is-missionary-mode to #screensaver-screen; the two modes cross-fade.

   Layers (bottom to top): temple photos → missionary backdrop and
   cards → "Touch Anywhere To Explore" prompt.
   ================================================================ */


/* ================================================================
   SECTION 1: THE MISSIONARY LAYER
   ================================================================ */

.screensaver-flyby {
    position: absolute;
    inset: 0;
    z-index: 2;                     /* above temple photos (1), below prompt (3) */
    overflow: hidden;
    pointer-events: none;           /* taps go to the screensaver (wake the kiosk) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.2s ease, visibility 0s linear 1.2s;

    /* Deep evening blue with a soft gold light behind the spotlight */
    background:
        radial-gradient(ellipse 55% 50% at 50% 45%, rgba(201, 162, 39, 0.22) 0%, rgba(201, 162, 39, 0) 70%),
        radial-gradient(ellipse at 50% 120%, #1e3a8a 0%, rgba(30, 58, 138, 0) 60%),
        linear-gradient(160deg, #0f1b36 0%, #142850 55%, #0b1428 100%);
}

.is-missionary-mode .screensaver-flyby {
    opacity: 1;
    visibility: visible;
    transition: opacity 1.2s ease, visibility 0s linear 0s;
}

/* Temple photos fade out underneath and stop their slow zoom */
#screensaver-screen .screensaver-bg,
#screensaver-screen .temple-name-overlay {
    transition: opacity 1.2s ease;
}

.is-missionary-mode .screensaver-bg,
.is-missionary-mode .temple-name-overlay {
    opacity: 0 !important;          /* beats the crossfade's inline opacity */
    animation-play-state: paused;
}


/* ================================================================
   SECTION 2: CARDS IN FLIGHT
   ================================================================
   Each card is the carousel's own card (missionary-carousel.css)
   inside a wrapper sized by missionaryFlyby.js. Only transform and
   opacity animate.
   ================================================================ */

.fly-card {
    --mv-radius: calc(var(--mv-card-w) * 0.075);

    position: absolute;
    left: 0;
    top: 0;
    border-radius: var(--mv-radius);
    box-shadow: 0 calc(var(--mv-card-h) * 0.05) calc(var(--mv-card-h) * 0.09) rgba(0, 0, 0, 0.45);
    transform-origin: 50% 50%;
    will-change: transform, opacity;
    backface-visibility: hidden;
    opacity: 0;
}

.fly-card .mv-card {
    pointer-events: none;
    cursor: default;
}

/* The spotlight card gets a warm gold edge */
.fly-card--spot {
    box-shadow:
        0 0 0 2px rgba(201, 162, 39, 0.55),
        0 calc(var(--mv-card-h) * 0.06) calc(var(--mv-card-h) * 0.14) rgba(0, 0, 0, 0.55);
}


/* ================================================================
   SECTION 3: THE PROMPT IN MISSIONARY MODE
   ================================================================
   The spotlight owns the middle of the screen, so "Touch Anywhere To
   Explore" moves to the bottom. Its frosted-glass blur is dropped:
   blurring moving cards behind it would be recalculated every frame.
   ================================================================ */

.is-missionary-mode .screensaver-prompt {
    align-items: flex-end;
    padding-bottom: 4vh;
}

.is-missionary-mode .prompt-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(10, 18, 40, 0.78);
    border-color: rgba(201, 162, 39, 0.45);
    padding: var(--spacing-md) var(--spacing-2xl);
}

.is-missionary-mode .prompt-text {
    font-size: var(--text-2xl);
}

/* Phones: a smaller prompt so it doesn't crowd the spotlight card */
@media screen and (max-width: 600px), screen and (max-height: 500px) and (orientation: landscape) {
    /* Fly-by cards are small on a phone: photo only. The name/mission
       panel (and its dark fade) would cover most of the picture. The
       spotlight card keeps its text. */
    .fly-card--flyer .mv-card__info,
    .fly-card--flyer .mv-card__bell {
        display: none;
    }

    .is-missionary-mode .screensaver-prompt {
        padding-bottom: max(3vh, env(safe-area-inset-bottom));
    }

    .is-missionary-mode .prompt-card {
        padding: var(--spacing-sm) var(--spacing-lg);
    }

    .is-missionary-mode .prompt-text {
        font-size: var(--text-lg);
    }
}