/* Four impacts, one mark, a diagonal opening. Homepage only. */
.kv-intro { display: none; --intro-ready: 1; }
.kv-intro-active { overflow: hidden; }
/* This programmatically focused dialog contains no interactive controls. */
.kv-intro:focus { outline: none; }
.kv-intro-active .kv-intro {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  color: var(--cream);
  isolation: isolate;
}
.kv-intro__panel {
  position: absolute;
  inset: 0;
  background: var(--ink);
  will-change: clip-path;
}
/* The cut follows the 45-degree connector in the actual logo. A tiny overlap
   prevents an antialiased seam before the panels separate. */
.kv-intro__panel--left {
  clip-path: polygon(0 0, calc(50% + 50vh + 1px) 0, calc(50% - 50vh + 1px) 100%, 0 100%);
  --split: -72vmax;
}
.kv-intro__panel--right {
  clip-path: polygon(calc(50% + 50vh - 1px) 0, 100% 0, 100% 100%, calc(50% - 50vh - 1px) 100%);
  --split: 72vmax;
}
.kv-intro__symbol {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(240px, 29vw, 380px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}
.kv-intro__symbol svg { width: 100%; height: 100%; overflow: visible; }
.kv-intro__piece { opacity: 0; transform-origin: 512px 512px; }
.kv-intro__piece--1 { --x: -620px; --y: 100px; --turn: -22deg; --hit: 80ms; fill: var(--cream); }
.kv-intro__piece--2 { --x: 80px; --y: -640px; --turn: 18deg; --hit: 440ms; fill: var(--signal); }
.kv-intro__piece--3 { --x: 620px; --y: -80px; --turn: 22deg; --hit: 800ms; fill: var(--cream); }
.kv-intro__piece--4 { --x: -480px; --y: 480px; --turn: -14deg; --hit: 1160ms; fill: var(--signal); }
.kv-intro__wordmark {
  position: absolute;
  top: calc(50% + clamp(148px, 18vw, 230px));
  left: 0;
  width: 100%;
  text-align: center;
  font: 650 clamp(27px, 3.2vw, 40px)/1 var(--font-display);
  letter-spacing: -.055em;
  opacity: 0;
}
.kv-intro__wordmark span { color: var(--signal); }
.kv-intro__beats {
  position: absolute;
  bottom: max(40px, env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  gap: 10px;
  transform: translateX(-50%);
}
.kv-intro__beats i { width: 27px; height: 3px; background: var(--cream); opacity: .16; }
.kv-intro__beats i:nth-child(1) { --beat: 185ms; }
.kv-intro__beats i:nth-child(2) { --beat: 545ms; }
.kv-intro__beats i:nth-child(3) { --beat: 905ms; }
.kv-intro__beats i:nth-child(4) { --beat: 1265ms; }
.is-playing .kv-intro__piece {
  animation: kv-intro-impact 190ms linear var(--hit) both;
}
.is-playing .kv-intro__symbol {
  animation: kv-intro-push 440ms cubic-bezier(.7, 0, .9, .35) 1740ms forwards,
    kv-intro-symbol-exit 360ms cubic-bezier(.6, 0, .7, .35) 1820ms both;
}
/* Landings are spaced 360ms apart; each strike itself stays sharp at 190ms.
   Recoil lives on the SVG; the outer symbol can then zoom independently.
   Every landing gets a kick. After the last recoil settles at 1390ms,
   hold the assembled logo for 350ms before the unchanged fast exit. */
.is-playing .kv-intro__symbol svg { animation: kv-intro-recoil 1500ms linear both; }
.is-playing .kv-intro__wordmark { animation: kv-intro-name 600ms var(--ease-soft) 1290ms both; }
.is-playing .kv-intro__beats i { animation: kv-intro-beat 1ms steps(1, start) var(--beat) forwards; }
.is-playing .kv-intro__beats { animation: kv-intro-clear 90ms linear 1750ms forwards; }
.is-playing .kv-intro__panel--left { animation: kv-intro-open-left 360ms cubic-bezier(.6, 0, .7, .35) 1820ms both; }
.is-playing .kv-intro__panel--right { animation: kv-intro-open-right 360ms cubic-bezier(.6, 0, .7, .35) 1820ms both; }
.kv-intro-replay {
  color: inherit;
  background: none;
  border: 0;
  padding: 12px 0;
  min-height: 44px;
  font: inherit;
  cursor: pointer;
}
.kv-intro-replay:hover { color: var(--signal); }
.kv-intro-replay[hidden] { display: none; }
@keyframes kv-intro-impact {
  0% { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--turn)) scale(1.85); animation-timing-function: cubic-bezier(.76, 0, 1, .35); }
  8% { opacity: 1; }
  55% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(.86); animation-timing-function: var(--ease-soft); }
  76% { transform: translate(0, 0) rotate(0deg) scale(1.08); animation-timing-function: var(--ease-soft); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
}
@keyframes kv-intro-recoil {
  0%, 12.333%, 18%, 36.333%, 42%, 60.333%, 66%, 84.333%, 92.667%, 100% { transform: translate(0, 0) scale(1); }
  13% { transform: translate(6px, -3px) scale(1.045); }
  14.667% { transform: translate(-3px, 1px) scale(.99); }
  37% { transform: translate(-3px, 6px) scale(1.045); }
  38.667% { transform: translate(1px, -3px) scale(.99); }
  61% { transform: translate(-7px, 3px) scale(1.055); }
  62.667% { transform: translate(3px, -1px) scale(.99); }
  85% { transform: translate(9px, -6px) scale(1.075); }
  87.333% { transform: translate(-4px, 3px) scale(.98); }
}
@keyframes kv-intro-push {
  0% { transform: translate(-50%, -50%) scale(1); }
  15% { transform: translate(-50%, -50%) scale(.94); }
  100% { transform: translate(-50%, -50%) scale(4.8); }
}
@keyframes kv-intro-name {
  0% { opacity: 0; transform: translateY(10px); }
  18%, 85% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes kv-intro-beat { to { opacity: 1; background: var(--signal); } }
@keyframes kv-intro-clear { to { opacity: 0; } }
/* Move the cut, not the rectangular background: its outer edges must never
   become visible during the exit. The mark follows the same diagonal vector. */
@keyframes kv-intro-symbol-exit { to { translate: var(--split) var(--split); } }
@keyframes kv-intro-open-left {
  to { clip-path: polygon(0 0, calc(50% + 50vh - 144vmax) 0, calc(50% - 50vh - 144vmax) 100%, 0 100%); }
}
@keyframes kv-intro-open-right {
  to { clip-path: polygon(calc(50% + 50vh + 144vmax) 0, 100% 0, 100% 100%, calc(50% - 50vh + 144vmax) 100%); }
}
@media (max-height: 500px) {
  .kv-intro__symbol { width: 190px; }
  .kv-intro__wordmark { top: calc(50% + 100px); font-size: 25px; }
  .kv-intro__beats { bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .kv-intro-active { overflow: initial; }
  .kv-intro-active .kv-intro, .kv-intro-replay { display: none; }
}