/* ==================================================================
   11 — "Take the short way." CTA  (prefix .cta-, scoped to #cta)
   A full-width keyboard seen from above, faded by a radial mask,
   where ⌘ and the space bar light up red in a press loop.
   Key rendering is shared (by duplication) with css/03-timeback.css.
================================================================== */
#cta {
  --cta-key: 110px;
  --cta-gap: 12px;
  --k: 1; /* keyboard scale, set by js/11-cta.js from the viewport width */
  position: relative;
}

#cta .cta-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-3);
  max-width: 100%;
  padding-bottom: var(--s-13);
  overflow: hidden;
}

/* ---------- keyboard stage (wider than the viewport, centred) ---------- */
#cta .cta-stage {
  position: relative;
  flex: none;
  box-sizing: content-box;
  width: calc(1754px * var(--k));
  height: calc(720px * var(--k));
  padding-bottom: 50px;
  -webkit-mask-image: radial-gradient(43.1% 67.1% at 48.1% 80%, #000 0%, transparent 100%);
  mask-image: radial-gradient(43.1% 67.1% at 48.1% 80%, #000 0%, transparent 100%);
}
#cta .cta-kb {
  position: absolute;
  top: 0;
  left: calc(137px * var(--k));
  display: flex;
  flex-direction: column;
  gap: var(--cta-gap);
  width: 1754px;
  transform: scale(var(--k));
  transform-origin: 0 0;
}
#cta .cta-row {
  position: relative;
  display: flex;
  flex-wrap: nowrap;
  gap: var(--cta-gap);
  height: var(--cta-key);
}
#cta .cta-row:last-child { z-index: 1; } /* glow spills over the row above */

/* ---------- one key ---------- */
#cta .cta-key {
  --d: 0s;
  position: relative;
  flex: none;
  width: var(--cta-key);
  height: 100%;
}
#cta .cta-cap {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  padding: 14.5px 15px;
  border-radius: 11px;
  color: #f4f4f6;
  font-family: var(--font);
  font-size: 23.75px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.1);
  user-select: none;
  -webkit-user-select: none;
  background: radial-gradient(75% 75% at 50% 92%, #121212 0%, #0d0d0d 100%);
  box-shadow:
    0 1.5px 0.5px 2.5px rgba(0, 0, 0, 0.4),
    0 0 0.5px 1px #000,
    inset 0 2px 1px 1px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px 1px rgba(255, 255, 255, 0.2);
  transition:
    transform 0.2s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.2s cubic-bezier(0.23, 1, 0.32, 1),
    color 0.2s;
}
/* lit layer: fades in over the base cap (backgrounds can't transition) */
#cta .cta-cap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: linear-gradient(180deg, #161616 0%, #222 100%);
  opacity: 0;
  transition: opacity 1.5s var(--d) cubic-bezier(0.23, 1, 0.32, 1);
}
/* lit rim: the inset highlights of a lit key, painted above the lit gradient
   (inset shadows of .cta-cap itself sit underneath ::before) */
#cta .cta-cap::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 1px 0.5px 0.5px 0.5px rgba(255, 118, 118, 0.25),
    inset 0 0 1px 1px rgba(255, 255, 255, 0.45),
    inset 0 2px 1px 1px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 1.5s var(--d) cubic-bezier(0.23, 1, 0.32, 1);
}
#cta .cta-key.is-glow .cta-cap::after { opacity: 1; }
#cta .cta-cap { isolation: isolate; z-index: 1; } /* caps above every halo in the row */

#cta .cta-key:hover .cta-cap,
#cta .cta-key.is-down .cta-cap {
  transform: translate3d(0, 2px, 0);
  background: radial-gradient(75% 75% at 50% 92%, #151515 0%, #0d0d0d 100%);
  box-shadow:
    0 0 0 transparent,
    0 0 0.5px 1px #000,
    inset 0 2px 1px 1px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
}
#cta .cta-key:hover:not(.is-glow) .cta-cap { transform: translate3d(0, 1px, 0); }

/* ---------- legends ---------- */
#cta .cta-alt { grid-row: 1; display: flex; align-items: flex-start; }
#cta .cta-pri { grid-row: 2; display: flex; align-items: flex-end; }
#cta .cta-c { justify-content: center; }
#cta .cta-r { justify-content: flex-end; }
#cta .cta-st { grid-row: 1 / span 2; justify-content: center; align-items: center; }
#cta .cta-cap svg {
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: color 1.5s var(--d) cubic-bezier(0.23, 1, 0.32, 1);
}
#cta .cta-cap svg .f { fill: currentColor; stroke: none; }
#cta .cta-alt > svg { color: #d3d3d6; }
#cta .cta-fk > svg { margin-top: 15.5px; }

/* ---------- red glow (⌘ + space) ---------- */
#cta .cta-glow,
#cta .cta-shine {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 1s calc(var(--d) + 0.2s) cubic-bezier(0.23, 1, 0.32, 1),
    transform 1s calc(var(--d) + 0.2s) cubic-bezier(0.23, 1, 0.32, 1);
}
#cta .cta-glow {
  left: -10%;
  top: -15%;
  width: 120%;
  height: 130%;
  border-radius: 40%;
  background: radial-gradient(56% 65% at 50% 50%, #fa7e7e 0%, rgba(249, 112, 112, 0) 100%);
  filter: blur(15px);
}
#cta .cta-shine {
  z-index: 2;
  left: -5%;
  top: -1%;
  width: 70%;
  height: 4%;
  background: radial-gradient(56% 65% at 50% 50%, #fff 0%, rgba(249, 112, 112, 0) 100%);
  filter: blur(5px);
  mix-blend-mode: overlay;
}

#cta .cta-key.is-glow .cta-cap {
  color: #ffcdcd;
  text-shadow: 0 0 4.3px #ff6363;
  box-shadow:
    0 0 10px 5px rgba(255, 67, 7, 0.1),
    0 0 3px 2px rgba(255, 67, 7, 0.1),
    inset 1px 0.5px 0.5px 0.5px rgba(255, 118, 118, 0.25),
    inset 0 0 1px 1px rgba(255, 255, 255, 0.45),
    inset 0 2px 1px 1px rgba(0, 0, 0, 0.25);
  transition:
    transform 0.25s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 1.5s var(--d) cubic-bezier(0.23, 1, 0.32, 1),
    color 1.5s var(--d) cubic-bezier(0.23, 1, 0.32, 1);
}
#cta .cta-key.is-glow .cta-cap::before { opacity: 1; }
#cta .cta-key.is-glow .cta-cap svg { color: #ffcdcd; }
#cta .cta-key.is-glow .cta-glow {
  opacity: 1;
  transform: scale(var(--gs, 1.08));
}
#cta .cta-key.is-glow .cta-shine { opacity: 1; transform: none; }

/* pressed while lit: the key sinks, the halo flares */
#cta .cta-key.is-glow.is-down .cta-cap {
  transform: translate3d(0, 2px, 0);
  box-shadow:
    0 0 14px 6px rgba(255, 67, 7, 0.16),
    0 0 3px 2px rgba(255, 67, 7, 0.14),
    inset 1px 0.5px 0.5px 0.5px rgba(255, 118, 118, 0.3),
    inset 0 0 1px 1px rgba(255, 255, 255, 0.5),
    inset 0 2px 1px 1px rgba(0, 0, 0, 0.3);
  transition-delay: 0s;
}
#cta .cta-key.is-glow.is-down .cta-glow {
  --gs: 1.16;
  transition-duration: 0.35s;
  transition-delay: 0s;
}

#cta .cta-glow-wrap { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* ---------- action block ---------- */
#cta .cta-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-9);
  max-width: 400px;
  padding: 0 var(--s-2);
  text-align: center;
}
#cta .cta-download { display: flex; flex-direction: column; align-items: center; }
#cta .cta-req {
  margin: var(--s-2) 0 0;
  font-family: var(--mono-geist);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.2px;
  color: #fff;
  opacity: 0.4;
  mix-blend-mode: plus-lighter;
}
#cta .cta-sub {
  display: flex;
  gap: 25px;
  margin-top: var(--s-1);
  font-family: var(--mono-geist);
  font-size: 12px;
  line-height: 1.6;
  letter-spacing: 0.2px;
  color: var(--grey-200);
}
#cta .cta-sub > * { position: relative; }
#cta .cta-sub > * + *::before {
  content: "";
  position: absolute;
  top: 4px;
  left: -12px;
  height: 10px;
  border-right: 1px solid var(--grey-200);
}
#cta .cta-link {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  border-radius: 4px;
  transition: color 0.2s;
}
#cta .cta-link:hover { color: #fff; }
#cta .cta-link:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  #cta .cta-cap,
  #cta .cta-cap::before,
  #cta .cta-cap::after,
  #cta .cta-glow,
  #cta .cta-shine { transition: none; }
}

@media (max-width: 719px) {
  #cta .cta-inner { padding-bottom: var(--s-11); }
  #cta .cta-action { gap: var(--s-6); }
}