/* ============================================================
   Hero 3D keyboard — sculpted extruded keycaps on a contrasting
   case with a recessed plate, warm key-light, and underglow.
   Pure CSS 3D, no WebGL.
   ============================================================ */

.kb-hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; overflow:hidden; text-align:center; padding-top:84px; padding-bottom:40px; }

#kb-particles{ position:absolute; inset:0; z-index:0; }
.kb-spot{ position:absolute; left:50%; top:58%; transform:translate(-50%,-50%); width:min(120vw,1180px); height:min(120vw,1180px); z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(243,196,76,.2) 0%, rgba(246,210,122,.07) 38%, transparent 64%); }
.kb-grid{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:62px 62px;
  -webkit-mask-image:radial-gradient(112% 92% at 50% 56%, #000 14%, transparent 72%);
          mask-image:radial-gradient(112% 92% at 50% 56%, #000 14%, transparent 72%); opacity:.55; }

.kb-head{ position:relative; z-index:3; display:flex; flex-direction:column; align-items:center; gap:15px; margin-bottom:clamp(18px,2.6vw,30px); }
.kb-pill{ display:inline-flex; align-items:center; gap:9px; padding:7px 15px 7px 12px; border-radius:999px; background:var(--paper); border:1px solid var(--line-2); font-family:var(--mono); font-size:11.5px; letter-spacing:.04em; color:var(--ink-2); box-shadow:var(--shadow); white-space:nowrap; }
.kb-pill .live{ width:8px; height:8px; border-radius:50%; background:#3FAE6B; animation:blip 2.4s var(--ease) infinite; }
.kb-h1{ font-size:clamp(28px,4.2vw,52px); font-weight:600; line-height:1.04; letter-spacing:-.03em; max-width:16ch; padding-bottom:.08em; }
.kb-h1 .serif{ color:var(--butter-d); }
.kb-h1 .hl{ background:linear-gradient(transparent 58%, var(--butter) 58%); padding:0 .05em; border-radius:2px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.kb-sub{ max-width:50ch; color:var(--ink-2); font-size:clamp(15px,1.6vw,18px); line-height:1.55; }

/* ============== the keyboard ============== */
.kb-stage{ position:relative; z-index:2; width:100%; display:flex; justify-content:center; perspective:840px; perspective-origin:50% 28%; margin-top:8px; }

/* the case / chassis */
.kb-deck{
  --rx:42deg; --rz:-7deg;
  transform-style:preserve-3d;
  transform:rotateX(var(--rx)) rotateZ(var(--rz));
  transition:transform .3s var(--ease);
  padding:30px 30px 40px;
  border-radius:30px;
  background:
    linear-gradient(158deg, #3a342b 0%, #2a251e 46%, #211c16 100%);
  box-shadow:
    /* top brushed highlight */
    inset 0 2px 0 rgba(255,247,228,.16),
    inset 0 -3px 12px rgba(0,0,0,.5),
    /* chassis thickness (stacked front lip) */
    0 6px 0 #1c1812,
    0 10px 0 #171309,
    0 16px 0 #120f08,
    /* big soft ground shadow */
    0 96px 96px -40px rgba(40,28,6,.6),
    0 40px 60px -30px rgba(40,28,6,.45);
}
/* recessed plate that holds the keys */
.kb-deck::before{
  content:""; position:absolute; inset:16px; border-radius:18px; z-index:0;
  background:linear-gradient(158deg, #211d17, #15110b);
  box-shadow:inset 0 3px 10px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,247,228,.06);
}
.kb-row{ position:relative; z-index:1; display:flex; gap:12px; justify-content:center; transform-style:preserve-3d; }
.kb-row + .kb-row{ margin-top:12px; }

.key{
  --z:0px; --kh:30px;
  position:relative; width:clamp(54px,6.8vw,76px); aspect-ratio:1/1;
  transform-style:preserve-3d; transform:translateZ(var(--z));
  transition:transform .14s cubic-bezier(.2,.85,.3,1.25);
  cursor:pointer; border:0; background:none; padding:0; font:inherit;
}
/* contact shadow on the plate (ambient occlusion) */
.key::after{
  content:""; position:absolute; inset:5px; border-radius:13px;
  background:rgba(0,0,0,.55); filter:blur(8px);
  transform:translateZ(-2px) translateY(8px); z-index:-2;
  transition:opacity .16s, transform .14s;
}
/* colored underglow halo (revealed on hover/press) — uses the key's own hue */
.key::before{
  content:""; position:absolute; inset:-3px; border-radius:16px; z-index:-3;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--cap) 78%, transparent), transparent 75%);
  filter:blur(11px); opacity:0; transform:translateZ(2px);
  transition:opacity .2s var(--ease);
}

/* keycap top — vibrant candy cap, white legend */
.kcap{
  position:absolute; inset:0; transform:translateZ(var(--kh)); transform-style:preserve-3d;
  border-radius:11px; overflow:hidden;
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--cap) 70%, #fff) 0%,
    var(--cap) 50%,
    color-mix(in srgb, var(--cap) 80%, #000) 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4), inset 0 -5px 9px rgba(0,0,0,.3);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
/* glossy dished top surface (translucent sheen over the cap colour) */
.kcap::before{ content:""; position:absolute; inset:4px; border-radius:8px; z-index:0;
  background:radial-gradient(120% 120% at 50% 6%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.08) 44%, rgba(0,0,0,.18) 100%);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.4), inset 0 -3px 6px rgba(0,0,0,.3); }
.kcap > *{ position:relative; z-index:1; }

/* extruded walls — darker shades of the cap colour, light from top-left */
.kwall{ position:absolute; }
.kwall.f{ left:0; top:100%; width:100%; height:var(--kh); transform-origin:top center;    transform:rotateX(-90deg); background:linear-gradient(color-mix(in srgb,var(--cap) 84%,#000) 0%, color-mix(in srgb,var(--cap) 62%,#000) 100%); }
.kwall.b{ left:0; bottom:100%; width:100%; height:var(--kh); transform-origin:bottom center; transform:rotateX(90deg);  background:color-mix(in srgb,var(--cap) 50%,#000); }
.kwall.l{ top:0; right:100%; width:var(--kh); height:100%; transform-origin:right center;  transform:rotateY(90deg);  background:linear-gradient(90deg, color-mix(in srgb,var(--cap) 56%,#000), color-mix(in srgb,var(--cap) 76%,#000)); }
.kwall.r{ top:0; left:100%;  width:var(--kh); height:100%; transform-origin:left center;   transform:rotateY(-90deg); background:linear-gradient(90deg, color-mix(in srgb,var(--cap) 72%,#000), color-mix(in srgb,var(--cap) 52%,#000)); }

.kicon{ width:clamp(22px,2.7vw,30px); height:clamp(22px,2.7vw,30px); object-fit:contain; pointer-events:none; opacity:.96; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); transition:opacity .2s; }
.kicon-svg{ display:flex; align-items:center; justify-content:center; }
.kicon-svg svg{ width:clamp(22px,2.7vw,30px); height:clamp(22px,2.7vw,30px); filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.kfallback{ font-family:var(--mono); font-weight:600; font-size:clamp(14px,1.8vw,19px); color:#fff; }
.kk{ position:absolute; top:6px; right:8px; font-family:var(--mono); font-size:8.5px; color:rgba(255,255,255,.55); letter-spacing:.03em; }

/* hover + hot (physical press echo) — lift, brighten cap, reveal underglow */
.key:hover, .key.is-hot{ --z:18px; }
.key:hover::before, .key.is-hot::before, .key.pressed::before{ opacity:1; }
.key:hover .kcap, .key.is-hot .kcap{
  background:linear-gradient(165deg,
    color-mix(in srgb, var(--cap) 45%, #fff) 0%,
    color-mix(in srgb, var(--cap) 78%, #fff) 52%,
    var(--cap) 100%);
}
.key:hover .kcap::before, .key.is-hot .kcap::before{ background:radial-gradient(120% 120% at 50% 6%, rgba(255,255,255,.7) 0%, rgba(255,255,255,.18) 46%, rgba(0,0,0,.12) 100%); }

/* pressed — keycap travels down into the plate */
.key.pressed{ --z:calc(-1 * (var(--kh) - 6px)); transition:transform .045s ease-out; }
.key.pressed::after{ opacity:.4; transform:translateZ(-2px) translateY(2px); }

/* spacebar */
.key.space{ width:clamp(240px,34vw,400px); aspect-ratio:auto; height:clamp(50px,6.4vw,64px); }
.key.space .kcap{ border-radius:13px; }
.key.space .kfallback{ font-size:clamp(10px,1.2vw,13px); letter-spacing:.16em; text-transform:uppercase; color:rgba(255,255,255,.72); }
.key.space:hover .kfallback, .key.space.is-hot .kfallback{ color:#fff; }

/* ============== readout ============== */
.kb-readout{ position:relative; z-index:3; margin-top:clamp(26px,4vw,46px); min-height:104px; display:flex; flex-direction:column; align-items:center; gap:9px; }
.kb-r-cat{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--butter-d); display:inline-flex; align-items:center; gap:9px; }
.kb-r-cat::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--butter); }
.kb-r-name{ font-size:clamp(22px,3vw,34px); font-weight:600; letter-spacing:-.02em; transition:opacity .25s var(--ease), transform .25s var(--ease); }
.kb-r-desc{ max-width:44ch; color:var(--ink-2); font-size:15.5px; line-height:1.5; }
.kb-readout.flash .kb-r-name{ animation:rpop .3s var(--ease); }
@keyframes rpop{ 0%{ transform:translateY(7px); opacity:.35; } 100%{ transform:none; opacity:1; } }

.kb-cta{ position:relative; z-index:3; display:flex; gap:13px; flex-wrap:wrap; justify-content:center; margin-top:22px; }
.kb-hint{ position:relative; z-index:3; margin-top:18px; font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center; }
.kb-hint kbd{ font-family:var(--mono); background:var(--paper); border:1px solid var(--line-2); border-bottom-width:2px; border-radius:6px; padding:3px 8px; font-size:10px; color:var(--ink-2); }
.kb-sound{ background:none; border:0; cursor:pointer; color:inherit; font:inherit; display:inline-flex; align-items:center; gap:6px; }
.kb-sound .ico{ width:13px; height:13px; border-radius:50%; border:1px solid currentColor; display:inline-block; position:relative; }
.kb-sound.on .ico{ background:var(--butter-d); border-color:var(--butter-d); }

.scroll-hint{ position:absolute; left:var(--pad); bottom:24px; z-index:3; font-family:var(--mono); font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:center; gap:11px; }
.scroll-hint .bar{ position:relative; width:1px; height:42px; background:var(--line-2); overflow:hidden; }
.scroll-hint .bar::after{ content:""; position:absolute; top:-50%; left:0; width:100%; height:50%; background:var(--butter-d); animation:drip 2.2s var(--ease) infinite; }
@keyframes drip{ 0%{ transform:translateY(-100%);} 60%,100%{ transform:translateY(420%);} }

/* keys boot-in cascade on load (opacity/filter only — never the press transform) */
@keyframes keyboot{ from{ opacity:0; filter:blur(7px); } to{ opacity:1; filter:blur(0); } }
.kb-deck .key{ animation:keyboot .5s var(--ease) backwards; animation-delay:calc(var(--ki,0) * 26ms + .15s); }
@media (prefers-reduced-motion:reduce){ .kb-deck .key{ animation:none; } }

@media (max-width:760px){
  .kb-stage{ perspective:680px; }
  .kb-deck{ --rx:36deg; padding:18px 18px 26px; }
  .kb-row{ gap:9px; } .kb-row + .kb-row{ margin-top:9px; }
  .key{ --kh:24px; }
  .scroll-hint{ display:none; }
}