/* v2_app/assets/splash.css
   Welcome splash (load-in) — WP6.

   A pure client-side, full-screen overlay that plays ONCE on the first fresh
   app open per session (session-gating lives in splash.js). Forest-green ground
   carries the taupe brand mark: the mark springs in (overshoots ~125% and
   settles to 100% in one motion), holds a beat, then fades + shrinks as the
   ground begins to dissolve (both at 60%) to reveal the live map already
   rendered underneath. No text — the mark carries it.

   Values/keyframes translated verbatim from the design source of truth
   (reference/supabase_stripe_set-up/assets/Welcome Splash (hi-fi).dc.html,
   the "Option B" grow+pop variant), retimed from the design file's looping
   5.2s preview to a single ~4.9s play (no loop). The extra time vs the prior
   round went to a longer green-only intro (0–15%) and a longer grow-in
   (15–36%); the mark still starts fading at 60%, the same instant the ground
   begins to dissolve. The forest vignette is the design's deep-forest ground,
   anchored on the brand forest (#3d4c41 family). */


/*########################################################################*/
/*##### The overlay shell — fixed above everything                   #####*/
/*########################################################################*/

.ms-splash {
    position: fixed;
    inset: 0;
    z-index: 2147483647;   /* above modals, sheets, ad strips — everything */
    overflow: hidden;
    /* Captures taps during the play so stray touches don't hit the map
       underneath; the whole node is removed by splash.js once it completes. */
    pointer-events: auto;
}


/*########################################################################*/
/*##### Forest ground — cross-dissolves to reveal the live map        #####*/
/*########################################################################*/

.ms-splash-ground {
    position: absolute;
    inset: 0;
    /* Deep-forest vignette (design source of truth), brand-forest family. */
    background: radial-gradient(120% 90% at 50% 44%, #3a4740, #2c352e 62%, #232b25);
    animation: ms-splash-ground 4.9s cubic-bezier(.55, 0, .1, 1) forwards;
}


/*########################################################################*/
/*##### The taupe brand mark — spring grow-in, hold, fade + shrink    #####*/
/*########################################################################*/

.ms-splash-mark {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;   /* above the ground within the overlay */
    will-change: transform, opacity;
    /* The spring: cubic-bezier overshoots past 1 so scale pops to ~125% and
       settles to 100% in one continuous motion (design's ms-duckB curve). */
    animation: ms-splash-mark 4.9s cubic-bezier(.2, 2.1, .5, 1) forwards;
}

.ms-splash-mark img {
    display: block;
    width: clamp(140px, 40vw, 190px);   /* design: 150px mobile / 190px desktop */
    height: auto;
    filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .35));
}


/*########################################################################*/
/*##### Keyframes (percentages verbatim from the design source)       #####*/
/*########################################################################*/

/* Ground holds solid, then cross-dissolves out over its final third to reveal
   the map underneath. Fully transparent by 88%, holds clear to the end. */
@keyframes ms-splash-ground {
    0%, 60% { opacity: 1; }
    88%, 100% { opacity: 0; }
}

/* Mark grows from nothing (scale 0) after a longer green-only intro (0–15%),
   springs up and overshoots, settles to 100%, holds, then fades + shrinks as
   the ground begins to dissolve (both at 60%). */
@keyframes ms-splash-mark {
    0%, 15% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
    17%     { opacity: 1; }
    36%     { opacity: 1; transform: translate(-50%, -50%) scale(1);
              animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
    60%     { opacity: 1; transform: translate(-50%, -50%) scale(1);
              animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
    74%     { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
    100%    { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
}


/*########################################################################*/
/*##### Mobile — drop the mark's shadow (it read as a faint box)      #####*/
/*########################################################################*/

/* On phones the mark renders smaller (clamp floor ~140-150px), so the fixed
   drop-shadow (18px offset, 30px blur) spread wide and soft against the forest
   gradient and read as a faint rectangular box around the logo. Desktop's larger
   mark keeps the shadow subtle (no box), so we scope the shadow OFF on mobile
   only — the taupe mark then sits cleanly on the green. Desktop is untouched. */
@media (max-width: 768px) {
    .ms-splash-mark img { filter: none; }
}


/*########################################################################*/
/*##### Reduced motion — calm fade, no spring                         #####*/
/*########################################################################*/

/* Honor users who ask for less motion: the mark simply fades in and out with
   the ground, no scale spring/overshoot. splash.js still removes the overlay
   on the same timers, so entry is never blocked either way. */
@media (prefers-reduced-motion: reduce) {
    .ms-splash-mark {
        animation: ms-splash-mark-calm 4.9s ease forwards;
    }
    @keyframes ms-splash-mark-calm {
        0%, 15% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
        20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        60%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
        74%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
    }
}