/* Software KVM card, devices variant: a MacBook and a desktop monitor with the
 * cursor crossing the screen edge from one to the other.
 * Extends kvm-card.css (card shell, .kvm-visual, .kvm-stage). Same rule as there:
 * every number is a canvas unit on the 405 x 315 stage (`52em` == x = 52).
 * Styling follows the other feature cards: glass surfaces, white glyphs, and the
 * site indigo (#4933e9) as the single accent for "this machine has the cursor".
 * One loop is --kvm-loop; edit the keyframe percentages to retime the hand-off.
 */

.kvm-stage {
  --kvm-loop: 12s;
  --kvm-idle: #ffffff14;
  --kvm-active: #6a58ed;            /* --_colors---base--primary-lightened */
  --kvm-glow: #4933e9;              /* --_colors---base--primary */
}

/* Everything below is positioned on the stage; this just lifts the whole scene. */
.kvm-scene { position: absolute; inset: 0; transform: translateY(-16em); }

/* Shared glass look, same recipe as the clipboard satellites. */
.kvm-glass {
  position: absolute;
  box-sizing: border-box;
  border: 1em solid var(--kvm-idle);
  background: linear-gradient(#ffffff14, #ffffff0a), #080808;
  background-origin: border-box;
}

/* ---- Devices ----------------------------------------------------------- */

.kvm-device--laptop {              /* lid */
  left: 18em; top: 112em; width: 150em; height: 96em;
  border-radius: 10em 10em 0 0;
  animation: kvm-laptop-active var(--kvm-loop) infinite;
}

.kvm-device--desktop {             /* monitor */
  left: 190em; top: 82em; width: 202em; height: 126em;
  border-radius: 12em;
  animation: kvm-desktop-active var(--kvm-loop) infinite;
}

.kvm-laptop-base {
  left: 6em; top: 208em; width: 174em; height: 10em;
  border-top: 0;
  border-radius: 0 0 10em 10em;
}

.kvm-laptop-base::before {         /* thumb notch */
  content: "";
  position: absolute;
  left: 71em; top: 0; width: 32em; height: 4em;
  border-radius: 0 0 4em 4em;
  background: #ffffff1f;
}

.kvm-stand-neck { left: 280em; top: 208em; width: 22em; height: 38em; border-top: 0; border-bottom: 0; }
.kvm-stand-foot { left: 252em; top: 244em; width: 78em; height: 10em; border-radius: 4em 4em 6em 6em; }

/* ---- Screens ----------------------------------------------------------- */

.kvm-screen {
  position: absolute;
  overflow: hidden;                /* the cursor is clipped at each screen edge */
  border-radius: 5em;
  background:
    radial-gradient(90% 80% at 50% 115%, #4933e933, #4933e900 70%),
    linear-gradient(#ffffff0a, #ffffff00),
    #0b0b0b;
}

.kvm-device--laptop .kvm-screen  { inset: 5em; }               /* 138 x 84  */
.kvm-device--desktop .kvm-screen { inset: 5em 5em 13em 5em; }  /* 190 x 106 */

/* OS mark: glass circle that fills with the site indigo while it has the cursor. */
.kvm-os {
  position: absolute;
  left: 50%; top: 50%;
  width: 44em; height: 44em;
  margin: -22em 0 0 -22em;
  display: flex; align-items: center; justify-content: center;
  border: 1em solid #ffffff14;
  border-radius: 50%;
  background: linear-gradient(#ffffff14, #ffffff0a), #080808;
  isolation: isolate;
}
.kvm-os::before {
  content: "";
  position: absolute;
  inset: -1em;
  z-index: -1;
  border-radius: 50%;
  background: linear-gradient(90deg, #4933e9, #2f1cbe);
  box-shadow: 0 0 26em #4933e980;
  opacity: 0;
}
.kvm-os svg { display: block; width: 22em; height: 22em; }
.kvm-device--laptop  .kvm-os::before { animation: kvm-os-laptop  var(--kvm-loop) infinite; }
.kvm-device--desktop .kvm-os::before { animation: kvm-os-desktop var(--kvm-loop) infinite; }

/* Glow on the edge the cursor leaves / arrives through. */
.kvm-edge {
  position: absolute;
  top: 0; bottom: 0;
  width: 26em;
  opacity: 0;
  pointer-events: none;
}
.kvm-edge--out { right: 0; background: linear-gradient(to left,  #6a58edb3, #6a58ed00); animation: kvm-edge-out var(--kvm-loop) infinite; }
.kvm-edge--in  { left: 0;  background: linear-gradient(to right, #6a58edb3, #6a58ed00); animation: kvm-edge-in  var(--kvm-loop) infinite; }

/* Dashed hand-off line across the gap between the screens. */
.kvm-link {
  position: absolute;
  left: 162em; top: 158em; width: 34em; height: 0;
  border-top: 1.5em dashed #6a58edcc;
  opacity: 0;
  animation: kvm-link var(--kvm-loop) infinite;
}

/* ---- Cursor ------------------------------------------------------------ */

.kvm-pointer {
  position: absolute;
  left: 0; top: 0;
  width: 22em; height: 22em;
  opacity: 0;
  overflow: visible;
  filter: drop-shadow(0 2px 6px #00000080);
}
.kvm-pointer--laptop  { animation: kvm-move-laptop  var(--kvm-loop) infinite; }
.kvm-pointer--desktop { animation: kvm-move-desktop var(--kvm-loop) infinite; }

/* ---- Timeline ----------------------------------------------------------
 * A full round trip, seamless at the loop point (0% == 100% on the laptop):
 *   0-18%    cursor rests / glides on the laptop
 *   18-24%   slides off the laptop's right edge
 *   23-31%   slides in from the desktop's left edge
 *   31-66%   wanders on the desktop
 *   60-73%   heads back and slides off the desktop's left edge
 *   72-100%  slides in from the laptop's right edge and settles at the start
 * Each screen's highlight, OS circle and edge glow follow the same stops.
 */

@keyframes kvm-move-laptop {
  0%   { transform: translate(30em, 58em);  opacity: 1; animation-timing-function: ease-in-out; }
  16%  { transform: translate(104em, 42em); opacity: 1; animation-timing-function: ease-in; }
  24%  { transform: translate(146em, 40em); opacity: 1; }
  24.1%, 71.9% { transform: translate(150em, 44em); opacity: 0; }
  72%  { transform: translate(150em, 44em); opacity: 1; animation-timing-function: ease-out; }
  100% { transform: translate(30em, 58em);  opacity: 1; }
}

@keyframes kvm-move-desktop {
  0%, 22.9% { transform: translate(-26em, 70em); opacity: 0; }
  23%  { transform: translate(-26em, 70em); opacity: 1; animation-timing-function: ease-out; }
  32%  { transform: translate(36em, 74em);  opacity: 1; animation-timing-function: ease-in-out; }
  44%  { transform: translate(128em, 34em); opacity: 1; animation-timing-function: ease-in-out; }
  52%  { transform: translate(142em, 46em); opacity: 1; animation-timing-function: ease-in-out; }
  62%  { transform: translate(40em, 72em);  opacity: 1; animation-timing-function: ease-in; }
  72%  { transform: translate(-26em, 70em); opacity: 1; }
  72.1%, 100% { transform: translate(-26em, 70em); opacity: 0; }
}

/* Edge glow: each edge pulses once per crossing (twice per loop). */
@keyframes kvm-edge-out {
  0%, 14% { opacity: 0; }
  21%     { opacity: 1; }
  29%, 63% { opacity: 0; }
  71%     { opacity: 1; }
  79%, 100% { opacity: 0; }
}

@keyframes kvm-edge-in {
  0%, 20% { opacity: 0; }
  28%     { opacity: 1; }
  36%, 58% { opacity: 0; }
  66%     { opacity: 1; }
  74%, 100% { opacity: 0; }
}

@keyframes kvm-link {
  0%, 16% { opacity: 0; }
  22%, 27% { opacity: 1; }
  33%, 61% { opacity: 0; }
  67%, 72% { opacity: 1; }
  78%, 100% { opacity: 0; }
}

@keyframes kvm-laptop-active {
  0%, 20% { border-color: var(--kvm-active); box-shadow: 0 0 44em #4933e959; }
  27%, 66% { border-color: var(--kvm-idle); box-shadow: 0 0 0 #4933e900; }
  72%, 100% { border-color: var(--kvm-active); box-shadow: 0 0 44em #4933e959; }
}

@keyframes kvm-desktop-active {
  0%, 20% { border-color: var(--kvm-idle); box-shadow: 0 0 0 #4933e900; }
  27%, 66% { border-color: var(--kvm-active); box-shadow: 0 0 44em #4933e959; }
  72%, 100% { border-color: var(--kvm-idle); box-shadow: 0 0 0 #4933e900; }
}

@keyframes kvm-os-laptop {
  0%, 20% { opacity: 1; }
  27%, 66% { opacity: 0; }
  72%, 100% { opacity: 1; }
}

@keyframes kvm-os-desktop {
  0%, 20% { opacity: 0; }
  27%, 66% { opacity: 1; }
  72%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .kvm-device, .kvm-os::before, .kvm-edge, .kvm-link, .kvm-pointer { animation: none; }
  .kvm-device--desktop { border-color: var(--kvm-active); }
  .kvm-device--desktop .kvm-os::before { opacity: 1; }
  .kvm-pointer--desktop { transform: translate(120em, 76em); opacity: 1; }
}