/* landing-overture.css — the Vault-level overture on a member's first five visits.
 * ============================================================================
 * Joe, 2026-10-20 walk (L-3): "the full overture should play before anything
 * else the first 5 times a family member visits the vault." Painted by
 * js/core/landing-overture.js before the visit's landing; the look is the
 * About's own opening (app/about/cues/prelude/co_prelude.html — the July film
 * whole, contain on black, and Joe's two held signs, 2026-07-08 wording).
 *
 * Above the landing (z 30500) and below the PWA wall (z 2147483600): a wall
 * always outranks it, and nothing else may paint over it while it plays.
 * Linked from index.html's head (home-nudge, 2026-11-04: on a slow phone the on-demand load left
 * the first screen unstyled); the module still loads it itself on a page that lacks the link.
 */
.ffa-overture {
    position: fixed; inset: 0; z-index: 30600; background: #000; color: #f4ede2; overflow: hidden;
    font-family: 'Source Sans 3', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased;
    opacity: 1; transition: opacity .5s ease;
}
.ffa-overture.is-leaving { opacity: 0; pointer-events: none; }
.ffa-overture__film { position: absolute; inset: 0; }
.ffa-overture__film img,
.ffa-overture__film video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000;
}
.ffa-overture__film video { opacity: 0; }
.ffa-overture__film video.is-ready { opacity: 1; }
.ffa-overture__scrim {
    position: absolute; inset: 0; pointer-events: none; opacity: 0;
    background: radial-gradient(ellipse at 50% 55%, rgba(4, 14, 16, 0.55) 20%, rgba(2, 8, 10, 0.94) 100%);
}
.ffa-overture__signs {
    position: absolute; left: 0; right: 0; bottom: 11%; display: flex; flex-direction: column; align-items: center;
    gap: 2.2vh; pointer-events: none;
}
.ffa-overture__sign {
    opacity: 0; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; text-align: center; line-height: 1.22;
    font-size: clamp(13px, 2.55vh, 27px); padding: 1.15vh 2.6vw; max-width: 86%;
    background: rgba(8, 22, 22, 0.74); border: 1.5px solid rgba(212, 163, 115, 0.66); border-radius: 9px;
    box-shadow: 0 6px 26px rgba(0, 0, 0, 0.5);
}
.ffa-overture__sign .no { color: #d4a373; }

/* Skip — always there (a skip counts toward the five; the server counted the visit already). */
.ffa-overture__skip {
    position: absolute; top: max(14px, env(safe-area-inset-top)); right: max(14px, env(safe-area-inset-right));
    min-width: 44px; min-height: 44px; padding: 0 18px; border-radius: 22px;
    background: rgba(8, 22, 22, 0.66); color: #f4ede2; border: 1px solid rgba(244, 237, 226, 0.4);
    font: 600 16px/1 'Source Sans 3', system-ui, -apple-system, sans-serif; letter-spacing: .04em; cursor: pointer;
}
.ffa-overture__skip:focus-visible, .ffa-overture__begin:focus-visible { outline: 3px solid #d4a373; outline-offset: 3px; }

/* Tap to begin — only when the browser refused sound without a tap (Safari's default).
 * home-nudge (Joe 2026-11-04 06:40 "FIX THIS"): this is the first screen a new member sees on an
 * iPhone, and it has to be unmistakable for a 70- or 80-year-old: ONE large gold Play disc in the
 * middle, the plain words "Tap to play your story" under it, the poster dimmed behind, and Skip
 * quiet in its corner. The whole button (disc + words) is the tap target. */
.ffa-overture__begin {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    display: none; flex-direction: column; align-items: center; gap: 18px;
    padding: 12px 16px; background: none; border: 0; color: #f4ede2; cursor: pointer;
    -webkit-tap-highlight-color: transparent; z-index: 3;
}
.ffa-overture.is-waiting .ffa-overture__begin { display: flex; }
.ffa-overture__disc {
    position: relative; display: block; width: clamp(132px, 38vmin, 190px); height: clamp(132px, 38vmin, 190px);
    border-radius: 50%; background: #d4a373; box-shadow: 0 0 0 10px rgba(212, 163, 115, 0.22), 0 14px 40px rgba(0, 0, 0, 0.6);
    animation: ffa-overture-breathe 2.6s ease-in-out infinite;
}
.ffa-overture__disc::after {
    content: ''; position: absolute; left: 50%; top: 50%; width: 0; height: 0;
    transform: translate(-36%, -50%); border-style: solid;
    border-width: calc(clamp(132px, 38vmin, 190px) * 0.19) 0 calc(clamp(132px, 38vmin, 190px) * 0.19) calc(clamp(132px, 38vmin, 190px) * 0.31);
    border-color: transparent transparent transparent #10201f;
}
.ffa-overture__label {
    font: 700 clamp(22px, 3.4vh, 30px)/1.2 'Source Sans 3', system-ui, -apple-system, sans-serif;
    letter-spacing: .01em; text-align: center; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); white-space: nowrap;
}
.ffa-overture__begin:active .ffa-overture__disc { transform: scale(0.96); }
/* The module focuses the button for keyboards; the ring belongs on the round disc, not a square box. */
.ffa-overture__begin:focus, .ffa-overture__begin:focus-visible { outline: none; }
.ffa-overture__begin:focus-visible .ffa-overture__disc { outline: 3px solid #f4ede2; outline-offset: 6px; }
@keyframes ffa-overture-breathe {
    0%, 100% { box-shadow: 0 0 0 10px rgba(212, 163, 115, 0.22), 0 14px 40px rgba(0, 0, 0, 0.6); }
    50% { box-shadow: 0 0 0 20px rgba(212, 163, 115, 0.10), 0 14px 40px rgba(0, 0, 0, 0.6); }
}
@media (prefers-reduced-motion: reduce) { .ffa-overture__disc { animation: none; } }
/* While waiting, the poster sits dimmed behind the disc: nothing else competes. */
.ffa-overture.is-waiting .ffa-overture__scrim { opacity: 0.72 !important; }
.ffa-overture.is-waiting .ffa-overture__skip { opacity: 0.55; font-size: 15px; }
/* The gentle hint after a linger (HINT_AFTER_MS in the module). */
.ffa-overture__hint {
    position: absolute; left: 0; right: 0; bottom: max(12%, calc(env(safe-area-inset-bottom) + 48px)); margin: 0;
    padding: 0 24px; text-align: center; color: #f4ede2; opacity: 0; transition: opacity .8s ease; pointer-events: none;
    font: 500 clamp(18px, 2.6vh, 22px)/1.35 'Source Sans 3', system-ui, -apple-system, sans-serif; z-index: 3;
}
.ffa-overture.is-hinting .ffa-overture__hint { opacity: 0.92; }