/* ANIMA — power-on sequence. * * Overlay is generated entirely by boot.js; this file only styles it. Colours * are declared here rather than inherited, so the sequence renders identically * no matter which page it loads over. * * Gate contract (set by the inline script, before first paint): * html.kb-run the pure-CSS cover — kept separate from kb-lock on purpose, * because the cover has to come off BEFORE the iris closes or * the collapse reveals a black lid instead of the page. * html.kb-lock scroll lock only. */ html.kb-run::before, html.kb-run::after { content: ''; position: fixed; left: 0; right: 0; z-index: 9998; pointer-events: none; } /* the CSS lid: covers the page from the first paint until JS takes over */ html.kb-run::before { inset: 0; background: #0a0c15; } /* the seam — a glowing slit, visible while the eye is shut */ html.kb-run::after { top: 50%; height: 2px; margin-top: -1px; background: linear-gradient(90deg, transparent, #8b7cff 22%, #e9eaf0 50%, #8b7cff 78%, transparent); box-shadow: 0 0 18px rgba(139,124,255,0.75), 0 0 60px rgba(139,124,255,0.35); } html.kb-lock, html.kb-lock body { overflow: hidden; } /* ── overlay ─────────────────────────────────────────────────────────────── */ .kboot { --kb-bg: #0a0c15; --kb-fg: #e9eaf0; --kb-muted: #7a7e91; --kb-dim: #414455; --kb-violet: #8b7cff; --kb-ember: #ff9a62; --kb-live: #e0574f; --kb-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace; /* one knob for the whole composition — the stage scales with the viewport instead of sitting as a small island in the middle of a 1440px screen */ --kb-mark: clamp(150px, 16vw, 224px); --kb-col: clamp(272px, 27vw, 392px); position: fixed; inset: 0; z-index: 9999; display: none; background: radial-gradient(58% 44% at 12% 6%, rgba(139,124,255,0.20), transparent 64%), radial-gradient(50% 40% at 90% 82%, rgba(255,154,98,0.12), transparent 66%), var(--kb-bg); color: var(--kb-fg); font-family: var(--kb-mono); /* opens from a slit; JS animates this to inset(0) */ clip-path: inset(50% 0 50% 0); will-change: clip-path; } html.kb-run .kboot { display: grid; place-items: center; } .kboot.kb-open { clip-path: inset(0 0 0 0); transition: clip-path .72s cubic-bezier(.16,.84,.3,1); } .kboot.kb-exit { clip-path: inset(49.9% 0 49.9% 0); transition: clip-path .62s cubic-bezier(.7,0,.3,1); } /* faint scanline grid, tuned for a dark ground */ .kboot::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(255,255,255,0.014) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.014) 1px, transparent 1px); background-size: 46px 46px; mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, #000 0%, transparent 78%); } /* ── stage ───────────────────────────────────────────────────────────────── */ .kb-stage { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; transform: translateZ(0); } .kb-mark { position: relative; width: var(--kb-mark); height: var(--kb-mark); } .kb-mark svg { width: 100%; height: 100%; display: block; overflow: visible; } .kb-arc { fill: none; stroke: var(--kb-fg); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; } /* transform-box:fill-box makes transform-origin:center mean each shape's own centre — without it the scale pivots on the SVG's origin and the core flies off toward the corner. */ .kb-core { fill: var(--kb-fg); transform-box: fill-box; transform-origin: center; transform: scale(0); } .kb-bead { fill: var(--kb-live); transform-box: fill-box; transform-origin: center; transform: scale(0); } /* the halo that pulses behind the mark */ .kb-halo { position: absolute; inset: -34%; border-radius: 50%; background: radial-gradient(circle, rgba(139,124,255,0.36), transparent 62%); opacity: 0; pointer-events: none; } /* ── wordmark ────────────────────────────────────────────────────────────── */ .kb-word { margin-top: 34px; font-size: clamp(24px, 2.5vw, 34px); font-weight: 800; letter-spacing: 16px; text-indent: 16px; opacity: 0; } .kb-sub { margin-top: 13px; font-size: clamp(9px, 0.82vw, 11px); letter-spacing: 5px; text-indent: 5px; color: var(--kb-muted); opacity: 0; } /* ── POST log ────────────────────────────────────────────────────────────── */ .kb-log { margin-top: 38px; width: var(--kb-col); min-height: 92px; font-size: clamp(10px, 0.85vw, 11.5px); line-height: 1.9; letter-spacing: 1.2px; color: var(--kb-muted); } /* ── the sequence ──────────────────────────────────────────────────────────── Everything below is a CSS keyframe with a delay, NOT a JS-triggered transition. The page underneath is busy loading a 16MB VRM for the hero demo, which starves requestAnimationFrame — a rAF-driven timeline visibly lagged (the ring was half-drawn when it should have finished). Keyframes run on the compositor and stay on schedule regardless. JS now only opens the eye, types the percentages, and schedules the exit. */ @keyframes kb-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes kb-pop { to { transform: scale(1); } } @keyframes kb-halo { to { opacity: .85; } } @keyframes kb-word-in { from { opacity: 0; letter-spacing: 15px; text-indent: 15px; } to { opacity: 1; letter-spacing: 9px; text-indent: 9px; } } @keyframes kb-sub-in { to { opacity: 1; } } @keyframes kb-bar-in { from { right: 100%; } to { right: 0; } } .kboot.kb-open .kb-arc { animation: kb-draw 1s cubic-bezier(.4,0,.2,1) .43s forwards; } .kboot.kb-open .kb-halo { animation: kb-halo .8s ease 1.08s forwards; } .kboot.kb-open .kb-core { animation: kb-pop .62s cubic-bezier(.2,1.5,.4,1) 1.08s forwards; } .kboot.kb-open .kb-bead { animation: kb-pop .45s cubic-bezier(.2,1.8,.4,1) 1.33s forwards; } .kboot.kb-open .kb-word { animation: kb-word-in .85s cubic-bezier(.2,.8,.3,1) 1.42s forwards; } .kboot.kb-open .kb-sub { animation: kb-sub-in .6s ease 1.62s forwards; } .kboot.kb-open .kb-bar i { animation: kb-bar-in 2.5s cubic-bezier(.3,.6,.35,1) .12s forwards; } /* POST log — each row slides in on its own delay */ .kboot.kb-open .kb-line:nth-child(1) { animation: kb-line-in .3s ease 1.56s forwards; } .kboot.kb-open .kb-line:nth-child(2) { animation: kb-line-in .3s ease 1.77s forwards; } .kboot.kb-open .kb-line:nth-child(3) { animation: kb-line-in .3s ease 1.98s forwards; } .kboot.kb-open .kb-line:nth-child(4) { animation: kb-line-in .3s ease 2.19s forwards; } .kboot.kb-open .kb-line:nth-child(5) { animation: kb-line-in .3s ease 2.40s forwards; } .kb-log .kb-line { display: flex; justify-content: space-between; gap: 12px; opacity: 0; } @keyframes kb-line-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } /* ignition ring — delayed to land on the core pop */ .kboot.kb-open .kb-pulse { animation: kb-pulse-out .95s cubic-bezier(.2,.7,.3,1) 1.08s both; } .kb-log .kb-ok { color: var(--kb-fg); } .kb-log .kb-live-tag { color: var(--kb-live); } /* ── progress ────────────────────────────────────────────────────────────── */ .kb-bar { margin-top: 28px; width: var(--kb-col); height: 2px; background: rgba(255,255,255,0.09); position: relative; overflow: hidden; } .kb-bar i { position: absolute; inset: 0 100% 0 0; background: linear-gradient(90deg, var(--kb-violet), var(--kb-fg)); box-shadow: 0 0 12px rgba(139,124,255,0.7); }.kb-pct { margin-top: 10px; font-size: 9.5px; letter-spacing: 3px; color: var(--kb-dim); width: var(--kb-col); display: flex; justify-content: space-between; } /* ── skip hint ───────────────────────────────────────────────────────────── */ .kb-skip { position: absolute; bottom: 34px; left: 0; right: 0; z-index: 2; text-align: center; font-size: 9.5px; letter-spacing: 3px; color: var(--kb-dim); opacity: 0; animation: kb-skip-in .5s ease 1.1s both; } @keyframes kb-skip-in { to { opacity: 1; } } /* ── expanding ring on ignition ──────────────────────────────────────────── */ .kb-pulse { position: absolute; top: 50%; left: 50%; width: var(--kb-mark); height: var(--kb-mark); margin: calc(var(--kb-mark) / -2) 0 0 calc(var(--kb-mark) / -2); border-radius: 50%; border: 1px solid rgba(139,124,255,0.55); opacity: 0; pointer-events: none; } .kb-pulse.kb-go { animation: kb-pulse-out .95s cubic-bezier(.2,.7,.3,1) both; } @keyframes kb-pulse-out { from { transform: scale(.6); opacity: .8; } to { transform: scale(2.5); opacity: 0; } } /* ── particles ───────────────────────────────────────────────────────────── */ .kb-dust { position: absolute; inset: 0; z-index: 1; pointer-events: none; } /* ── reduced motion: no sequence, just a clean fade ──────────────────────── */ @media (prefers-reduced-motion: reduce) { .kboot { clip-path: inset(0 0 0 0) !important; transition: opacity .3s !important; } .kboot.kb-exit { opacity: 0; } .kb-pulse.kb-go { animation: none; } .kb-mark svg * { transition: none !important; } } @media (max-width: 520px) { .kboot { --kb-mark: 128px; --kb-col: min(268px, 78vw); } .kb-log { min-height: 78px; } }