.vision .kinetic {
  --kinetic-paper: #e5eee0;
  --kinetic-ink: #15392d;
  --kinetic-accent: #116344;
  --kinetic-glow: #6fbf82;
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding: clamp(65px, 9vw, 146px) 6%;
  background: var(--kinetic-paper);
  color: var(--kinetic-ink);
}
html[data-theme="dark"] .vision .kinetic {
  --kinetic-paper: #0c211c;
  --kinetic-ink: #e3f4e6;
  --kinetic-accent: #a3e8b9;
  --kinetic-glow: #378d64;
}
.kinetic-contours {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: .26;
  color: var(--kinetic-accent);
  pointer-events: none;
}
.kinetic-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(20px, 5vw, 90px);
  max-width: 1460px;
  margin: auto;
}
.kinetic-copy { min-width: 0; }
.kinetic .kinetic-kicker {
  display: block;
  color: var(--kinetic-accent);
  font: 600 11px/1.4 monospace;
  letter-spacing: .15em;
}
.vision .kinetic h2 {
  margin: 18px 0;
  max-width: 12ch;
  color: var(--kinetic-ink);
  font-size: clamp(44px, 6.3vw, 100px);
  line-height: .98;
  letter-spacing: -.075em;
  overflow-wrap: break-word;
}
.vision .kinetic p {
  max-width: 43ch;
  color: var(--kinetic-ink);
  opacity: .85;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.65;
}
.kinetic-drum {
  --drum-radius: clamp(36px, 5.5vw, 78px);
  display: grid;
  align-items: center;
  min-height: clamp(74px, 10vw, 148px);
  perspective: 850px;
}
.kinetic-face {
  grid-area: 1 / 1;
  color: var(--kinetic-accent);
  font-size: clamp(38px, 6.1vw, 92px);
  line-height: 1.1;
  letter-spacing: -.07em;
  font-weight: 550;
  opacity: 0;
  transform: rotateX(calc((var(--face) - var(--kinetic-turn, 0)) * 54deg)) translateZ(var(--drum-radius));
}
.kinetic-face:first-child { opacity: 1; }
.kinetic-replay {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 15px;
  border: 1px solid currentColor;
  border-radius: 9px;
  color: var(--kinetic-accent);
  background: var(--kinetic-paper);
  cursor: pointer;
  font: 650 14px/1.3 system-ui, sans-serif;
}
.kinetic-replay:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.kinetic-button-label { display: inline-flex; flex-wrap: wrap; gap: .34em; }
.kinetic-flip { display: inline-flex; perspective: 180px; }
.kinetic-flip > span { position: relative; display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  body:not(.visuals-paused) .kinetic-replay:is(:hover, :focus-visible) .kinetic-flip > span {
    animation: kinetic-letter-turn 550ms cubic-bezier(.2,.65,.25,1) both;
    animation-delay: calc(var(--letter) * 20ms);
  }
}
@keyframes kinetic-letter-turn {
  0% { transform: rotateX(0); }
  48% { transform: rotateX(-90deg) translateY(-.25em); }
  50% { transform: rotateX(90deg) translateY(.25em); }
  100% { transform: rotateX(0); }
}
.kinetic-stage {
  display: grid;
  position: relative;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--kinetic-accent) 32%, transparent);
  border-radius: clamp(16px, 3vw, 38px);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--kinetic-glow) 25%, transparent), transparent 69%);
}
.kinetic-stage canvas {
  display: block;
  width: 100%;
  height: clamp(280px, 37vw, 560px);
  color: var(--kinetic-accent);
  touch-action: pan-y;
}
.kinetic-signal {
  position: absolute;
  top: 19px;
  left: 23px;
  color: var(--kinetic-accent);
  font: 700 13px/1 monospace;
  letter-spacing: .33em;
  text-shadow: 0 0 14px var(--kinetic-glow);
  pointer-events: none;
}
.kinetic-sign-glyphs > span { display: inline-block; }
@media (max-width: 760px) {
  .kinetic-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .kinetic-stage canvas { height: clamp(250px, 80vw, 400px); }
}
body.visuals-paused .kinetic-replay { display: none; }
@media (prefers-reduced-motion: reduce) {
  .kinetic-replay { display: none; }
  .kinetic-face { transform: none; }
}