/* Splash screen.
   Shown before Angular boots, so everything here is plain CSS on markup that
   lives in index.html. The theme is not loaded yet either, but a small script
   in index.html reads the style and colour this browser last used and sets
   the same inputs ThemeService does (data-kyc-theme, --kyc-hue, --kyc-hue-2,
   --kyc-chroma), so the splash already wears the user's theme. Without them
   it falls back to aurora. Lightnesses follow src/styles/theme.scss.

   Layout, top to bottom: the mark on a soft halo, the wordmark, the tagline,
   and a thin indeterminate progress line. The mark is drawn with a mask of
   the logo rather than as an <img>, so it takes the ink colour exactly and a
   light sheen can sweep across it without spilling outside its shape.

   Entrance is staggered and short (under a second); after that only the sheen
   and the progress line move. prefers-reduced-motion keeps the fades and drops
   every movement. */

body fuse-splash-screen {
    --h: var(--kyc-hue, 295);
    --h2: var(--kyc-hue-2, 332);
    --c: var(--kyc-chroma, 1);
    --splash-bg: oklch(0.975 calc(0.018 * var(--c)) var(--h));
    --splash-ink: oklch(0.24 0.03 var(--h));
    --splash-muted: oklch(0.53 0.025 var(--h));
    --splash-violet: oklch(0.55 calc(0.24 * var(--c)) var(--h));
    --splash-magenta: oklch(0.63 calc(0.22 * var(--c)) var(--h2));
    --splash-track: oklch(0.92 calc(0.03 * var(--c)) var(--h));
    --splash-glow-a: oklch(0.7 calc(0.17 * var(--c)) var(--h) / 0.22);
    --splash-glow-b: oklch(0.72 calc(0.15 * var(--c)) var(--h2) / 0.18);
    --splash-halo-a: oklch(0.55 calc(0.24 * var(--c)) var(--h) / 0.16);
    --splash-halo-b: oklch(0.63 calc(0.22 * var(--c)) var(--h2) / 0.07);
    --splash-sheen-a: oklch(0.72 calc(0.17 * var(--c)) var(--h) / 0.55);
    --splash-sheen-b: oklch(0.74 calc(0.15 * var(--c)) var(--h2) / 0.55);
    --splash-mark: url('../images/logo/easykyc-mark.png');

    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(900px 520px at 12% -8%, var(--splash-glow-a), transparent 60%),
        radial-gradient(760px 560px at 105% 6%, var(--splash-glow-b), transparent 58%),
        radial-gradient(640px 420px at 50% 115%, var(--splash-halo-a), transparent 60%),
        var(--splash-bg);
    pointer-events: none;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 450ms cubic-bezier(0.4, 0, 0.2, 1),
        visibility 450ms;
    font-family: 'Bricolage Grotesque', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Neon: the dark style. */
:root[data-kyc-theme='neon'] body fuse-splash-screen {
    --splash-bg: oklch(0.15 0.032 var(--h));
    --splash-ink: oklch(0.96 0.008 var(--h));
    --splash-muted: oklch(0.72 0.025 var(--h));
    --splash-violet: oklch(0.72 calc(0.2 * var(--c)) var(--h));
    --splash-magenta: oklch(0.8 calc(0.15 * var(--c)) var(--h2));
    --splash-track: oklch(0.28 0.03 var(--h));
    --splash-glow-a: oklch(0.48 calc(0.22 * var(--c)) var(--h) / 0.5);
    --splash-glow-b: oklch(0.54 calc(0.16 * var(--c)) var(--h2) / 0.42);
}

/* Encre: one flat colour. */
:root[data-kyc-theme='encre'] body fuse-splash-screen {
    --splash-violet: oklch(0.47 calc(0.16 * var(--c)) var(--h));
    --splash-magenta: var(--splash-violet);
}

body fuse-splash-screen .splash {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 450ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- the mark ------------------------------------------------------------ */

body fuse-splash-screen .splash__mark {
    position: relative;
    width: 82px;
    height: 120px; /* the cropped mark is 328 × 480 */
    margin-bottom: 28px;
    animation: splash-rise 800ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

/* A soft halo behind the mark, breathing slowly. */
body fuse-splash-screen .splash__mark::before {
    content: '';
    position: absolute;
    inset: -46px -64px;
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--splash-halo-a), var(--splash-halo-b) 55%, transparent);
    animation: splash-breathe 3.2s ease-in-out 800ms infinite;
}

body fuse-splash-screen .splash__logo,
body fuse-splash-screen .splash__sheen {
    position: absolute;
    inset: 0;
    -webkit-mask: var(--splash-mark) center / contain no-repeat;
    mask: var(--splash-mark) center / contain no-repeat;
}

body fuse-splash-screen .splash__logo {
    background: var(--splash-ink);
}

/* A band of light crossing the mark, clipped to its shape. */
body fuse-splash-screen .splash__sheen {
    background: linear-gradient(
        115deg,
        transparent 40%,
        var(--splash-sheen-a) 46%,
        rgba(255, 255, 255, 0.75) 50%,
        var(--splash-sheen-b) 54%,
        transparent 60%
    );
    background-size: 300% 100%;
    background-position: 150% 0;
    animation: splash-sheen 2.4s cubic-bezier(0.45, 0, 0.25, 1) 700ms infinite;
}

/* ---- wordmark and tagline -------------------------------------------------- */

body fuse-splash-screen .splash__word {
    display: flex;
    gap: 0.32em;
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 0.14em;
    line-height: 1;
    color: var(--splash-ink);
    animation: splash-rise 800ms cubic-bezier(0.2, 0.8, 0.2, 1) 120ms both;
}

body fuse-splash-screen .splash__word b {
    font-weight: 700;
    background: linear-gradient(135deg, var(--splash-violet), var(--splash-magenta));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

body fuse-splash-screen .splash__tag {
    margin-top: 12px;
    font-family: 'Hanken Grotesk', 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--splash-muted);
    animation: splash-fade 700ms ease-out 260ms both;
}

/* ---- progress -------------------------------------------------------------- */

body fuse-splash-screen .splash__progress {
    position: relative;
    width: 148px;
    height: 3px;
    margin-top: 36px;
    border-radius: 3px;
    background: var(--splash-track);
    overflow: hidden;
    animation: splash-fade 600ms ease-out 400ms both;
}

body fuse-splash-screen .splash__progress::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 42%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--splash-violet), var(--splash-magenta));
    animation: splash-slide 1.35s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

/* ---- leaving ---------------------------------------------------------------- */

body.fuse-splash-screen-hidden fuse-splash-screen {
    opacity: 0;
    visibility: hidden;
}

body.fuse-splash-screen-hidden fuse-splash-screen .splash {
    transform: scale(1.03);
}

/* ---- keyframes ------------------------------------------------------------ */

@keyframes splash-rise {
    from {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

@keyframes splash-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes splash-breathe {
    0%, 100% { opacity: 0.75; transform: scale(0.96); }
    50%      { opacity: 1;    transform: scale(1.04); }
}

@keyframes splash-sheen {
    0%        { background-position: 150% 0; }
    60%, 100% { background-position: -50% 0; }
}

@keyframes splash-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(240%); }
}

@media (prefers-reduced-motion: reduce) {
    body fuse-splash-screen .splash__mark,
    body fuse-splash-screen .splash__word {
        animation: splash-fade 400ms ease-out both;
    }
    body fuse-splash-screen .splash__mark::before,
    body fuse-splash-screen .splash__sheen {
        animation: none;
    }
    body fuse-splash-screen .splash__sheen {
        display: none;
    }
    body fuse-splash-screen .splash__progress::after {
        width: 100%;
        animation: splash-fade 1.2s ease-in-out infinite alternate;
    }
    body.fuse-splash-screen-hidden fuse-splash-screen .splash {
        transform: none;
    }
}