/* =========================================================================
   SmartPay Energy — splash screen
   =========================================================================
   Palette and face are the journey's own (_quote-legacy-skin.scss :root).
   Hard-coded here because this stylesheet loads BEFORE Angular, so the
   CSS custom properties do not exist yet:

     --sp-primary        #1a3f4e   deep teal
     --sp-primary-light  #2d6c83
     --sp-primary-lighter#e8f2f5
     --sp-accent         #f3f08b   pale yellow-green
     --sp-bg             #faf6e9   warm cream  <- the app's ground
     --sp-font-sans      DM Sans

   The old splash sat on #ffffff in Inter, so it neither matched the app's
   face nor its ground: handing over flashed white -> cream. Sitting on the
   same cream makes the transition read as one continuous surface.

   The wordmark is the header's own SVG asset, not re-typeset — identical by
   construction.

   Restraint: the accent is spent in exactly two places — the hairline under
   the wordmark and the travelling highlight in the loader. Everything else
   is teal on cream.
   ========================================================================= */

body fuse-splash-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    inset: 0;
    z-index: 999999;
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    overflow: hidden;

    /* Cream ground with an off-centre teal wash. Offset, not centred, so it
       reads as light falling across a surface rather than a vignette. */
    background:
        radial-gradient(
            120% 90% at 50% 38%,
            rgba(45, 108, 131, 0.07) 0%,
            rgba(45, 108, 131, 0.02) 42%,
            rgba(250, 246, 233, 0) 72%
        ),
        #faf6e9;
}

/* One column, one rhythm — the gaps set the spacing, not per-element margins. */
body fuse-splash-screen .splash-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 0 24px;
}

/* ---- wordmark ----------------------------------------------------------
   The header's own SVG (assets/images/logo/smartpay-wordmark.svg, shown at
   24px in .sp-topbar__logo). Using the same asset rather than re-setting the
   name in type means the splash and the header can never drift apart. Larger
   here because the splash has the whole viewport to itself. */
body fuse-splash-screen .logo {
    height: clamp(34px, 7vw, 54px);
    width: auto;
    display: block;
    opacity: 0;
    animation: splashRise 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.08s forwards;
}

/* ---- hairline ----------------------------------------------------------
   Draws itself out from the centre. Teal core, accent bloom at the ends —
   the single decorative move on the page, and the only warm note until the
   loader picks the same colour up. */
body fuse-splash-screen .rule {
    width: min(190px, 46vw);
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(
        90deg,
        rgba(243, 240, 139, 0) 0%,
        #f3f08b 18%,
        #1a3f4e 50%,
        #f3f08b 82%,
        rgba(243, 240, 139, 0) 100%
    );
    transform: scaleX(0);
    transform-origin: center;
    opacity: 0;
    animation: splashDrawRule 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.42s forwards;
}

/* ---- tagline -----------------------------------------------------------
   The journey's micro-label treatment: small, uppercase, wide tracking. */
body fuse-splash-screen .tagline {
    font-family: 'DM Sans', 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    color: rgba(26, 63, 78, 0.52);
    margin: 0;
    text-align: center;
    opacity: 0;
    animation: splashFade 0.6s ease-out 0.62s forwards;
}

/* ---- loader ------------------------------------------------------------
   An indeterminate rail: a teal bar crosses a faint track, trailing the
   accent behind it. Deliberately narrower and slower than the wordmark's
   rule so it reads as activity, not as a second headline. */
body fuse-splash-screen .loader {
    margin-top: 14px;
    opacity: 0;
    animation: splashFade 0.5s ease-out 0.86s forwards;
}

body fuse-splash-screen .loader-track {
    position: relative;
    width: 128px;
    height: 3px;
    border-radius: 999px;
    background: rgba(26, 63, 78, 0.1);
    overflow: hidden;
}

body fuse-splash-screen .loader-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 45%;
    border-radius: 999px;
    background: linear-gradient(90deg, #f3f08b 0%, #1a3f4e 55%, #2d6c83 100%);
    animation: splashTravel 1.45s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* ---- entrance keyframes ------------------------------------------------ */
@keyframes splashRise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes splashDrawRule {
    from { opacity: 0; transform: scaleX(0); }
    to   { opacity: 1; transform: scaleX(1); }
}

@keyframes splashFade {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes splashTravel {
    0%   { transform: translateX(-105%); }
    100% { transform: translateX(325%); }
}

/* ---- handover ----------------------------------------------------------
   The app sits on the same cream, so the splash only needs to lift away —
   no cross-fade through white, and no scale/blur flourish on the way out. */
body:not(.fuse-splash-screen-hidden) {
    overflow: hidden;
}

body:not(.fuse-splash-screen-hidden) app-root {
    opacity: 0;
}

body.fuse-splash-screen-hidden app-root {
    animation: splashAppIn 0.45s ease-out 0.1s forwards;
}

@keyframes splashAppIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

body.fuse-splash-screen-hidden fuse-splash-screen {
    animation: splashExit 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes splashExit {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-10px); visibility: hidden; }
}

/* ---- reduced motion ----------------------------------------------------
   Everything lands in its final state; only the loader keeps a gentle pulse
   so the screen still reads as "working" rather than frozen. */
@media (prefers-reduced-motion: reduce) {
    body fuse-splash-screen .logo,
    body fuse-splash-screen .rule,
    body fuse-splash-screen .tagline,
    body fuse-splash-screen .loader {
        animation: none;
        opacity: 1;
        transform: none;
    }

    body fuse-splash-screen .loader-fill {
        animation: splashPulse 1.6s ease-in-out infinite;
        transform: none;
        width: 100%;
    }

    body.fuse-splash-screen-hidden fuse-splash-screen {
        animation: splashFadeOut 0.3s linear forwards;
    }

    @keyframes splashPulse {
        0%, 100% { opacity: 0.35; }
        50%      { opacity: 1; }
    }

    @keyframes splashFadeOut {
        to { opacity: 0; visibility: hidden; }
    }
}