/* MAD Rehabit opening screen (W17), shown once per app launch.
 * v2 (W25, Amr 2026-10-26): the full #06 app tile (rehabit-icon.svg: navy
 * tile, soft-depth r, gold curve and dot) instead of the bare r, 128 px,
 * with a soft gold-tinted shadow so its edge reads on the navy. The
 * timeline is unchanged. v1 stays on disk for pages a phone still holds.
 * The page renders behind it; the timeline below is pure CSS, so the
 * overlay hides itself even if rehabit_splash_v1.js never runs, and it
 * never moves the page (position: fixed). rehabit_splash_v1.js adds tap to
 * skip and takes the overlay out of the page when it ends.
 * Timeline (about 1.4 s): the mark rises and fades in (0 - 0.6 s), the
 * words (0.45 s) and the tagline (0.6 s) follow, the overlay fades out
 * (1.05 - 1.4 s). Reduced motion: shown still for 0.6 s.
 * Shown only when the head script set html.rh-splash-go (once per
 * session: sessionStorage). */
.rh-splash { display: none; }
html.rh-splash-go .rh-splash {
    --rh-navy: #081a2f;
    --rh-navy-2: #12315a;
    --rh-gold: #cdb779;
    --rh-ink: #f4f1e6;
    --rh-ink-2: #bfc8d2;
    position: fixed; inset: 0; z-index: 2147483000;
    display: flex; align-items: center; justify-content: center;
    background-color: var(--rh-navy);
    background-image: radial-gradient(circle at 50% 42%, var(--rh-navy-2) 0%, var(--rh-navy) 72%);
    color: var(--rh-ink);
    font-family: "Outfit", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
    cursor: pointer;
    -webkit-user-select: none; user-select: none;
    animation: rh-splash-out 0.35s ease-in 1.05s forwards;
}
.rh-splash-in { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 24px 16px; }
.rh-splash-mark {
    width: 128px; height: 128px; max-width: 36vw; max-height: 36vw; object-fit: contain;
    filter: drop-shadow(0 12px 30px rgba(201, 169, 97, 0.2)) drop-shadow(0 3px 8px rgba(0, 0, 0, 0.38));
    animation: rh-splash-rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.rh-splash-words { display: flex; flex-direction: column; align-items: center; margin-top: 22px; animation: rh-splash-fade 0.4s ease-out 0.45s both; }
.rh-splash-kicker { color: var(--rh-gold); font-weight: 700; letter-spacing: 0.32em; font-size: calc(0.75rem * var(--tx, 1)); text-transform: uppercase; padding-inline-start: 0.32em; }
.rh-splash-name { font-weight: 600; font-size: calc(2.125rem * var(--tx, 1)); line-height: 1.1; letter-spacing: 0.01em; margin-top: 4px; }
.rh-splash-tag { margin-top: 12px; color: var(--rh-ink-2); font-size: calc(0.875rem * var(--tx, 1)); letter-spacing: 0.04em; animation: rh-splash-fade 0.4s ease-out 0.6s both; }
/* Tap to skip: a quick fade (rehabit_splash_v1.js). */
html.rh-splash-go .rh-splash.rh-skip { animation: rh-splash-out 0.18s ease-in forwards; }

@keyframes rh-splash-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes rh-splash-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rh-splash-out { from { opacity: 1; } to { opacity: 0; visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
    html.rh-splash-go .rh-splash { animation: rh-splash-out 0.01s linear 0.6s forwards; }
    .rh-splash-mark, .rh-splash-words, .rh-splash-tag { animation: none; }
    html.rh-splash-go .rh-splash.rh-skip { animation: rh-splash-out 0.01s linear forwards; }
}