/* Linkivo v2.1.3 - splash (docs/DESIGN.md section 6). The v1 logo-creation animation (ripple, ring pop, shackle lock with sparkles,
   background reveal, bar, second ring, typed wordmark) WITHOUT the url badges. js/features/splash/splash.js runs the timeline.
   v2.1.3: no grid, a smaller logo, no blur filters, and a CSS-only boot ring so the very first paint is never an empty background.
   data-mode: pending (before splash.js runs: only the boot ring) | full (default) | short (finished logo fades in) | still (reduced motion) */
.splash { position: fixed; inset: 0; z-index: var(--z-splash); display: grid; place-items: center; overflow: hidden; background: var(--bg); }
.splash.out { animation: sp-out 480ms var(--ease) forwards; pointer-events: none; }
@keyframes sp-out { to { opacity: 0; transform: scale(1.03); } }

/* background: a tinted disc grows from the left ring, plus one soft static glow (no animation: a big moving gradient costs frames) */
.sp-expand { position: absolute; inset: 0; background: var(--bg-tint); clip-path: circle(0 at 50% 50%); will-change: clip-path; }
.sp-orb { position: absolute; left: 50%; top: 50%; width: min(110vw, 720px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, color-mix(in srgb, var(--brand-a) 13%, transparent) 0%, transparent 66%); opacity: 0; }
/* v2.5.4 (owner): no glow under the logo at the start. It fades in WITH the background disc (splash.js), and is simply there in the finished states (short, still). */

/* boot ring: shown only until the script starts the real animation. It is the same ring-and-ripple idea, so the hand-over is not a jump. */
.sp-boot { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; border: 3px solid var(--brand-a); opacity: 0; animation: sp-boot 1.1s ease-out infinite; }
.splash:not([data-mode='pending']) .sp-boot { display: none; }
@keyframes sp-boot { 0% { transform: scale(0.35); opacity: 0.9; } 100% { transform: scale(1.5); opacity: 0; } }

.splash-stage { position: relative; z-index: 2; display: grid; justify-items: center; gap: 8px; transform: translateY(-2%); }
.splash-mark { width: min(38vw, 232px); min-width: 126px; height: auto; overflow: visible; }
.splash-word { display: flex; align-items: baseline; font-size: clamp(32px, 8.6vw, 48px); color: var(--text); min-height: 1em; letter-spacing: -0.03em; }
.t-char { position: relative; display: inline-block; }
.idot-wrap .idot { position: absolute; top: 0.16em; left: 50%; width: 0.16em; height: 0.16em; border-radius: 50%; transform: translateX(-50%) scale(1); background: linear-gradient(135deg, var(--brand-a), var(--brand-b)); }
.splash-tag { font: 400 clamp(0.8rem, 3.2vw, 0.95rem) var(--font-brand); color: var(--sub); min-height: 1.4em; }
.splash-dots { min-height: 14px; opacity: 0; transition: opacity 200ms; }
.splash-dots.show { opacity: 1; }
.splash-fail { max-width: 32ch; text-align: center; color: var(--sub); display: grid; gap: 12px; justify-items: center; }
.splash-fail .btn { text-decoration: none; }

/* base state: drawn parts hidden until the timeline (or the finished state) shows them */
.sp-ring { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; }
.sp-mask { stroke-dasharray: 1; stroke-dashoffset: 1; }
#sp-lring-g { transform-origin: 353px 648px; transform: scale(0); }
.splash[data-mode='full'] .t-char, .splash[data-mode='full'] .idot, .splash[data-mode='full'] .splash-tag { opacity: 0; }
.splash[data-mode='pending'] .splash-stage { opacity: 0; }

/* finished state (short and still): everything drawn, wordmark visible, background revealed */
.splash[data-mode='short'] .sp-ring, .splash[data-mode='still'] .sp-ring { stroke-dashoffset: 0; fill-opacity: 1; }
.splash[data-mode='short'] .sp-mask, .splash[data-mode='still'] .sp-mask { stroke-dashoffset: 0; }
.splash[data-mode='short'] #sp-lring-g, .splash[data-mode='still'] #sp-lring-g { transform: scale(1); }
.splash[data-mode='short'] .sp-expand, .splash[data-mode='still'] .sp-expand { clip-path: circle(150vmax at 50% 50%); }
.splash[data-mode='short'] .sp-orb, .splash[data-mode='still'] .sp-orb { opacity: 1; }
.splash[data-mode='short'] .splash-stage { animation: lk-fade 520ms var(--ease) both; }

/* v2.2.3: short version badge at the bottom of the splash (text is set by splash.js) */
.splash-ver { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 22px); translate: -50% 0; z-index: 2; padding: 3px 11px; border-radius: 999px; border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 70%, transparent); color: var(--sub); font: 600 11px/1.4 var(--font-mono); letter-spacing: 0.02em; }
.splash-ver:empty, .splash[data-mode='pending'] .splash-ver { display: none; }