/*
    App-launch splash for the installed PWA — cinematic "tudum"-style
    reveal inspired by Netflix. Two colored light streaks sweep in from
    opposite corners, converge at centre in a white flash, and the brand
    mark stamps in with a glowing ring. The wordmark then reveals via a
    shimmer mask-wipe. Total on-screen time ~1.5s before splash.js fades
    it out.

    The layout's inline head script sets html.sf-show-splash only when
    the app is running in standalone mode (display-mode: standalone or
    iOS's navigator.standalone) AND the session is fresh, so browser
    tabs and in-session navigations never see the splash.
*/

#sf-splash {
    position: fixed;
    inset: 0;
    z-index: 2100;
    display: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #06091a;
    color: #fff;
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
    transition: opacity 420ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
    isolation: isolate;
}

html.sf-show-splash #sf-splash { display: flex; }
html.sf-show-splash body { overflow: hidden; }

#sf-splash.is-hiding {
    opacity: 0;
    pointer-events: none;
}

/* Vignette that ramps in as the mark lands, pulling focus to centre. */
.sf-splash__bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at center, rgba(37, 99, 235, 0.18) 0%, transparent 55%),
        radial-gradient(ellipse at center, rgba(124, 58, 237, 0.14) 0%, transparent 65%),
        radial-gradient(ellipse at center, #0b1028 0%, #06091a 75%);
    opacity: 0;
    animation: sf-splash-bg 1200ms cubic-bezier(0.4, 0, 0.2, 1) 450ms forwards;
    z-index: 0;
}
@keyframes sf-splash-bg {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Two diagonal light streaks that converge at centre. Each is a skewed
   rectangle with a gradient head, translated across the viewport. */
.sf-splash__sweep {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 220vmax;
    height: 6px;
    transform-origin: center;
    pointer-events: none;
    filter: blur(1px);
    z-index: 1;
}
.sf-splash__sweep--a {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(37, 99, 235, 0) 30%,
        rgba(37, 99, 235, 0.5) 60%,
        #60a5fa 78%,
        #ffffff 92%,
        transparent 100%);
    box-shadow: 0 0 24px 2px rgba(96, 165, 250, 0.55);
    transform: translate(-50%, -50%) rotate(-22deg) translateX(-110vmax);
    animation: sf-splash-sweep-a 820ms cubic-bezier(0.22, 1, 0.36, 1) 120ms forwards;
}
.sf-splash__sweep--b {
    background: linear-gradient(270deg,
        transparent 0%,
        rgba(124, 58, 237, 0) 30%,
        rgba(124, 58, 237, 0.5) 60%,
        #a78bfa 78%,
        #ffffff 92%,
        transparent 100%);
    box-shadow: 0 0 24px 2px rgba(167, 139, 250, 0.55);
    transform: translate(-50%, -50%) rotate(22deg) translateX(110vmax);
    animation: sf-splash-sweep-b 820ms cubic-bezier(0.22, 1, 0.36, 1) 260ms forwards;
}
@keyframes sf-splash-sweep-a {
    0%   { transform: translate(-50%, -50%) rotate(-22deg) translateX(-110vmax); opacity: 0; }
    30%  { opacity: 1; }
    70%  { transform: translate(-50%, -50%) rotate(-22deg) translateX(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(-22deg) translateX(40vmax); opacity: 0; }
}
@keyframes sf-splash-sweep-b {
    0%   { transform: translate(-50%, -50%) rotate(22deg) translateX(110vmax); opacity: 0; }
    30%  { opacity: 1; }
    70%  { transform: translate(-50%, -50%) rotate(22deg) translateX(0); opacity: 1; }
    100% { transform: translate(-50%, -50%) rotate(22deg) translateX(-40vmax); opacity: 0; }
}

/* Impact flash — sits behind the mark, bursts outward when the sweeps
   meet. Kept short so the lift lands crisp, not washed out. */
.sf-splash__flash {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(167, 139, 250, 0.45) 40%, transparent 70%);
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
    animation: sf-splash-flash 520ms cubic-bezier(0.22, 1, 0.36, 1) 780ms forwards;
    z-index: 2;
    filter: blur(2px);
}
@keyframes sf-splash-flash {
    0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
    25%  { transform: translate(-50%, -50%) scale(6);   opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(18);  opacity: 0; }
}

.sf-splash__content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.1rem;
    z-index: 3;
}

/* Brand mark stamps in from the flash with a small rotation, then settles. */
.sf-splash__mark {
    position: relative;
    width: 104px;
    height: 104px;
    border-radius: 24px;
    background-image: linear-gradient(135deg, #ffffff 0%, #eef2ff 100%);
    display: grid;
    place-items: center;
    color: #1e3a8a;
    font-weight: 800;
    font-size: 2.6rem;
    letter-spacing: -0.04em;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    box-shadow:
        0 0 0 0 rgba(99, 102, 241, 0),
        0 20px 48px -12px rgba(0, 0, 0, 0.55),
        0 10px 20px -6px rgba(37, 99, 235, 0.35);
    opacity: 0;
    transform: scale(0.5) rotate(-8deg);
    animation: sf-splash-mark 720ms cubic-bezier(0.22, 1, 0.36, 1) 920ms forwards;
}

/* Subtle inner highlight on the mark, mimicking a glossy badge. */
.sf-splash__mark > span {
    position: relative;
    background: linear-gradient(135deg, #1e3a8a 0%, #7c3aed 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

@keyframes sf-splash-mark {
    0%   { opacity: 0; transform: scale(0.5) rotate(-8deg); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0), 0 20px 48px -12px rgba(0, 0, 0, 0.55), 0 10px 20px -6px rgba(37, 99, 235, 0.35); }
    40%  { opacity: 1; transform: scale(1.12) rotate(4deg); box-shadow: 0 0 0 24px rgba(99, 102, 241, 0.25), 0 20px 48px -12px rgba(0, 0, 0, 0.55), 0 10px 20px -6px rgba(37, 99, 235, 0.45); }
    70%  { transform: scale(0.97) rotate(-1deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); box-shadow: 0 0 0 0 rgba(99, 102, 241, 0), 0 20px 48px -12px rgba(0, 0, 0, 0.55), 0 10px 20px -6px rgba(37, 99, 235, 0.35); }
}

/* Pulsing glow ring around the mark after it lands. */
.sf-splash__mark::after {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 32px;
    border: 2px solid rgba(167, 139, 250, 0.55);
    opacity: 0;
    animation: sf-splash-ring 1.8s cubic-bezier(0.4, 0, 0.6, 1) 1400ms infinite;
    pointer-events: none;
}
@keyframes sf-splash-ring {
    0%   { opacity: 0;   transform: scale(0.9); }
    40%  { opacity: 0.6; }
    100% { opacity: 0;   transform: scale(1.3); }
}

/* Wordmark revealed via a shimmer mask that sweeps left→right, then a
   second metallic sheen for polish. */
.sf-splash__brand {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: linear-gradient(90deg, #ffffff 0%, #c7d2fe 50%, #ffffff 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 0%, #000 100%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 0%, #000 100%, transparent 100%);
    -webkit-mask-size: 220% 100%;
    mask-size: 220% 100%;
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
    animation:
        sf-splash-brand-reveal 700ms cubic-bezier(0.22, 1, 0.36, 1) 1240ms both,
        sf-splash-brand-shine 1600ms linear 1900ms infinite;
    opacity: 0;
}
@keyframes sf-splash-brand-reveal {
    0%   { opacity: 0; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
    30%  { opacity: 1; }
    100% { opacity: 1; -webkit-mask-position: 0% 0; mask-position: 0% 0; }
}
@keyframes sf-splash-brand-shine {
    0%   { background-position: -100% 0; }
    100% { background-position: 200% 0; }
}

.sf-splash__dots {
    position: absolute;
    bottom: calc(15% + env(safe-area-inset-bottom, 0));
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    opacity: 0;
    z-index: 3;
    animation: sf-splash-dots-in 360ms cubic-bezier(0.22, 1, 0.36, 1) 2000ms both;
}
.sf-splash__dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    animation: sf-splash-dot 1.1s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
.sf-splash__dots span:nth-child(2) { animation-delay: 160ms; }
.sf-splash__dots span:nth-child(3) { animation-delay: 320ms; }
@keyframes sf-splash-dots-in {
    from { opacity: 0; transform: translate(-50%, 6px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes sf-splash-dot {
    0%, 80%, 100% { opacity: 0.35; transform: scale(0.85); }
    40%           { opacity: 1;    transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
    /* Collapse the cinematic sequence into a simple fade so nobody who
       opts out gets a 1.5s show they didn't ask for. */
    .sf-splash__sweep,
    .sf-splash__flash,
    .sf-splash__mark::after { display: none; }
    .sf-splash__bg { animation-duration: 200ms; animation-delay: 0ms; }
    .sf-splash__mark {
        animation: sf-splash-mark-flat 280ms ease-out both;
    }
    @keyframes sf-splash-mark-flat {
        from { opacity: 0; } to { opacity: 1; }
    }
    .sf-splash__brand { animation: sf-splash-mark-flat 240ms ease-out 120ms both; }
    .sf-splash__dots span { animation: none; opacity: 0.85; }
    .sf-splash__dots { animation: sf-splash-mark-flat 200ms ease-out 240ms both; }
    #sf-splash { transition-duration: 160ms; }
}