/* Opening splash (index.html). Loaded after styles-optimized.css to use app tokens;
   the wordmark reuses .app-title, and body.dark-theme swaps the colors. */

body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    place-items: center;
    background: var(--bg-primary);
}

/* --s scales the whole lockup; transforms on the SVG parts are in viewBox units, so they scale with it */
.splash {
    --s: clamp(120px, 24vw, 220px);
    display: flex;
    align-items: center;
    gap: calc(var(--s) * 0.19);
}

.splash-mark {
    width: var(--s);
}

.splash-mark svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.splash-mark path {
    transform-box: fill-box;
    transform-origin: center;
}

.splash-mark .b { fill: var(--text-primary); }
.splash-mark .a { fill: var(--cyan-700); }
.splash-mark .c { fill: var(--mk-red); }
body.dark-theme .splash-mark .a { fill: var(--cyan-500); }

.splash-divider {
    width: 1px;
    height: calc(var(--s) * 0.31);
    background: var(--border-color);
}

.splash .app-title {
    display: flex;
    font-size: calc(var(--s) * 0.3);
}

.splash .app-title i {
    font-style: normal;
    display: inline-block;
}

/* Assemble: M slides in from the left, K from the right, the triangle pops and the dot drops with a bounce */
.splash-mark .b2 { animation: splashFromLeft 0.525s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.splash-mark .b1 { animation: splashFromRight 0.525s 0.09s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.splash-mark .a { animation: splashPop 0.375s 0.375s cubic-bezier(0.34, 1.8, 0.64, 1) both; }
.splash-mark .c { animation: splashDrop 0.6s 0.525s cubic-bezier(0.3, 0, 0.4, 1) both; }
.splash-divider { animation: splashGrow 0.3s 0.675s both; }
.splash .app-title i {
    animation: splashRise 0.375s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: calc(0.75s + var(--i) * 45ms);
}

@keyframes splashFromLeft { from { transform: translateX(-46px); opacity: 0; } }
@keyframes splashFromRight { from { transform: translateX(46px); opacity: 0; } }
@keyframes splashPop { from { transform: scale(0); opacity: 0; } }
@keyframes splashDrop {
    0% { transform: translateY(-60px); opacity: 0; }
    55% { transform: translateY(0); opacity: 1; }
    72% { transform: translateY(-9px); }
    88% { transform: translateY(0); }
    94% { transform: translateY(-2px); }
    100% { transform: translateY(0); }
}
@keyframes splashGrow { from { transform: scaleY(0); } }
@keyframes splashRise { from { opacity: 0; transform: translateY(0.4em); } }