/* ================= Hero punch line + 3D tool keyboard ================= */

/* punch line: 3 short lines, sized to the column (desktop column = viewport minus the video) */
.hero__name.hero__punch { font-size: clamp(2.7rem, 12.2vw, 9rem); line-height: .9; margin: 24px 0 22px; }
.hero__sub strong { color: var(--text); font-weight: 600; }
@media (min-width: 1024px) {
  .hero__name.hero__punch { font-size: min(9rem, calc((100vw - var(--reel-w)) * .102)); }
}

/* keyboard */
.tk { position: relative; margin-top: 40px; max-width: 980px; }
.tk__cap { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); }
.tk__now {
  margin-left: auto; font-weight: 500; color: var(--tk-now, var(--accent));
  padding: 4px 10px; border: 1px solid currentColor; border-radius: 99px; min-width: 9ch; text-align: center;
  transition: color .2s;
}

.tk__stage {
  --k: clamp(40px, 9.6vw, 70px);
  perspective: 1500px; perspective-origin: 50% 30%;
  display: flex; justify-content: center; align-items: center;
  height: calc(var(--k) * 4.3); margin-top: 4px;
}
.tk__board {
  --rx: 52deg; --rz: -24deg;
  display: grid; grid-template-columns: repeat(8, var(--k)); gap: calc(var(--k) * .2);
  padding: calc(var(--k) * .3); border-radius: calc(var(--k) * .36);
  background: linear-gradient(150deg, #1a1a21 0%, #0f0f13 60%, #0b0b0e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 0 0 1px #26262e,
    0 calc(var(--k) * .22) 0 #060608,
    0 calc(var(--k) * .22) 0 1px #1c1c22,
    0 calc(var(--k) * .9) calc(var(--k) * 1.2) rgba(0,0,0,.65),
    0 0 calc(var(--k) * 2) rgba(198,255,61,.05);
  transform: rotateX(var(--rx)) rotateZ(var(--rz));
  transform-style: preserve-3d;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}

.tk__key {
  --lift: calc(var(--k) * .13);
  position: relative; width: var(--k); aspect-ratio: 1; border-radius: calc(var(--k) * .22);
  display: grid; place-items: center; cursor: default;
  background: linear-gradient(160deg, #2b2b34 0%, #1b1b22 55%, #15151a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -2px 6px rgba(0,0,0,.35),
    0 var(--lift) 0 #0d0d11,
    0 var(--lift) 0 1px #24242c,
    0 calc(var(--lift) + 6px) 14px rgba(0,0,0,.55);
  transform: translateY(0);
  transition: transform .14s ease-out, box-shadow .14s ease-out, background .2s;
}
.tk__key i {
  display: block; width: 46%; aspect-ratio: 1;
  background: var(--c);
  -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 45%, transparent));
  transition: filter .2s, transform .2s;
}
.tk__key span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* pressed: key travels down into the board and lights up in its brand colour */
.tk__key.is-down {
  transform: translateY(calc(var(--lift) * .8));
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 30%, #2b2b34) 0%, #1b1b22 70%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 18px color-mix(in srgb, var(--c) 35%, transparent),
    0 calc(var(--lift) * .2) 0 #0d0d11,
    0 calc(var(--lift) * .2) 0 1px #24242c,
    0 0 calc(var(--k) * .5) color-mix(in srgb, var(--c) 45%, transparent);
}
.tk__key.is-down i { filter: drop-shadow(0 0 10px var(--c)) brightness(1.15); }

/* phones: 6 × 4 board */
@media (max-width: 640px) {
  .tk__stage { --k: clamp(30px, 10vw, 48px); height: calc(var(--k) * 6); }
  .tk__board { grid-template-columns: repeat(6, var(--k)); --rx: 50deg; --rz: -14deg; }
  .tk__now { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tk__board { transition: none; }
}