/* ===================================================================
   Sokolink intro splash — a short branded animation that plays once
   per visit when the app first opens, then fades smoothly into the
   landing page. Pure CSS 3D transforms (no libraries). It is a
   self-contained position:fixed overlay removed from the DOM by
   js/splash.js after it finishes, so it never affects the app layout.
   ------------------------------------------------------------------- */

/* Repeat visits in the same tab, or users who prefer reduced motion:
   the splash is hidden before the first paint (no flash). */
html.sl-splash-skip #sl-splash { display: none !important; }

/* Lock background scroll only while the splash is on screen. */
html.sl-splash-active, html.sl-splash-active body { overflow: hidden; }

#sl-splash {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background:
        radial-gradient(circle at 50% 38%, #163a86 0%, #0b2258 55%, #061436 100%);
    cursor: pointer; /* tap/click to skip */
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
}

/* Teardown state applied by js/splash.js just before removal. */
#sl-splash.sl-splash-done {
    opacity: 0;
    transform: scale(1.07);
    pointer-events: none;
}

/* ---- the shield badge (gets the 3D fly-in) ---- */
.sl-splash-badge {
    width: 150px;
    height: 174px;
    filter: drop-shadow(0 20px 42px rgba(0, 0, 0, .5));
    animation: slBadgeIn .85s cubic-bezier(.22, .9, .3, 1) both;
}
.sl-splash-badge svg { width: 100%; height: 100%; display: block; }

@keyframes slBadgeIn {
    0%   { opacity: 0; transform: perspective(820px) rotateY(-78deg) scale(.55); }
    55%  { opacity: 1; }
    100% { opacity: 1; transform: perspective(820px) rotateY(0deg) scale(1); }
}

/* ---- checkmark draws itself on ---- */
.sl-splash-check {
    stroke-dasharray: 72;
    stroke-dashoffset: 72;
    animation: slDraw .5s ease .58s forwards;
}
@keyframes slDraw { to { stroke-dashoffset: 0; } }

/* ---- the two party nodes pop in with a little overshoot ---- */
.sl-splash-node {
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    opacity: 0;
    animation: slPop .45s cubic-bezier(.2, 1.35, .4, 1) forwards;
}
.sl-node-1 { animation-delay: .98s; }
.sl-node-2 { animation-delay: 1.14s; }
@keyframes slPop { to { transform: scale(1); opacity: 1; } }

/* ---- wordmark + tagline rise up ---- */
.sl-splash-word {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: #ffffff;
    opacity: 0;
    transform: translateY(16px);
    animation: slRise .6s ease 1.12s forwards;
}
.sl-splash-tag {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #aebee2;
    opacity: 0;
    transform: translateY(14px);
    animation: slRise .6s ease 1.34s forwards;
    margin-top: -10px;
}
@keyframes slRise { to { opacity: 1; transform: translateY(0); } }

/* Safety net: if JS is disabled the splash would otherwise stay forever,
   so CSS alone fades it out and lets clicks through after it plays. */
#sl-splash { animation: slAutoHide .6s ease 3s forwards; }
@keyframes slAutoHide { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* Respect users who ask the OS for reduced motion. */
@media (prefers-reduced-motion: reduce) {
    #sl-splash { display: none !important; }
}