.hero-scroll { height: min(1160px, calc(100svh + 388px)); }
.intro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  column-gap: 18px;
  align-items: start;
  max-width: 1240px;
  min-height: 620px;
  height: min(700px, calc(100svh - 72px));
  padding-block: 16px 70px;
}
.hero-scroll .intro { position: sticky; top: 72px; }
.intro-copy { position: relative; z-index: 2; height: 285px; margin-top: 164px; }
.intro-greeting, .intro-identity { position: absolute; top: 0; left: 0; width: 100%; }
.intro-greeting {
  color: var(--text);
  font-size: clamp(56px, 5.1vw, 72px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -.05em;
  will-change: transform, opacity;
}
.intro-identity { opacity: 0; transform: translateY(70px); will-change: transform, opacity; }
.intro h1 {
  font-size: clamp(72px, 5.8vw, 92px);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.066em;
}
.intro-discipline {
  margin-top: 24px;
  color: var(--muted);
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.4;
  opacity: 0;
  transform: translateY(18px);
  will-change: transform, opacity;
}
.intro-object { min-width: 0; display: flex; flex-direction: column; align-items: center; }
.work-section { padding-top: 32px; border-top: 1px solid var(--border); }

.keycap-scene {
  position: relative;
  width: 100%;
  height: 540px;
  perspective: 1200px;
  overflow: visible;
  isolation: isolate;
}
.keycap-object {
  --key-scale: 1.5;
  position: absolute;
  top: 0;
  left: calc(50% - 160px);
  width: 320px;
  height: 320px;
  transform-style: preserve-3d;
  transform: rotateX(-36deg) rotateY(-20deg) rotateZ(-3deg) scale(var(--key-scale));
  transform-origin: 50% 58%;
  will-change: transform;
}
.keycap-face, .keycap-top { position: absolute; backface-visibility: hidden; }
.keycap-face {
  left: 10px;
  top: 171px;
  width: 300px;
  height: 136px;
  clip-path: polygon(7% 0, 93% 0, 100% 100%, 0 100%);
  border-radius: 0 0 11px 11px;
}
.keycap-front {
  display: grid;
  place-items: center;
  transform: translateZ(134px) rotateX(10deg);
  background: #e7e2d7;
  box-shadow: inset 18px 0 26px #fff5, inset -28px 0 32px #817a6b40, inset 0 8px 10px #fff6, inset 0 -24px 32px #6e68594d;
}
.keycap-back {
  transform: rotateY(180deg) translateZ(134px) rotateX(10deg);
  background: #c8c4b8;
}
.keycap-left {
  display: grid;
  place-items: center;
  transform: rotateY(-90deg) translateZ(134px) rotateX(10deg);
  background: #cbc5b9;
  box-shadow: inset 18px 0 24px #f8f4e866, inset -22px 0 27px #817a6d38, inset 0 7px 10px #fff4, inset 0 -16px 20px #69645624;
}
.keycap-right {
  transform: rotateY(90deg) translateZ(134px) rotateX(10deg);
  background: #c7c1b5;
  box-shadow: inset 19px 0 24px #f8f4e866, inset -24px 0 28px #746d6040, inset 0 7px 10px #fff5, inset 0 -16px 20px #69645630;
}
.keycap-top {
  top: 43px;
  left: 31px;
  width: 258px;
  height: 258px;
  display: grid;
  place-items: center;
  border: 1px solid #f5f1e8;
  border-radius: 15px;
  background: #ede9df;
  box-shadow: 0 1px 2px #837f7230, inset 0 0 0 2px #ded9cd;
  transform: rotateX(90deg);
}
.keycap-top::before {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 10px;
  background: #e7e3d8;
  box-shadow: inset 0 8px 15px #716b5c55, inset 0 -7px 13px #fff9;
}
.keycap-legend {
  position: relative;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 65px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.06em;
  color: #292925;
  transform: translateX(-2px);
}
.keycap-side-legend {
  position: relative;
  margin-top: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.055em;
  color: #292925;
}
.keycap-front-legend {
  position: relative;
  margin-top: 8px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.055em;
  color: #292925;
}
.keycap-shadow {
  position: absolute;
  left: 50%;
  bottom: 54px;
  transform: translateX(-50%);
  width: min(76%, 420px);
  height: 44px;
  border-radius: 50%;
  background: #0007;
  filter: blur(22px);
  pointer-events: none;
}
@media (max-width: 1100px) and (min-width: 901px) {
  .intro { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); column-gap: 12px; }
  .intro-copy { margin-top: 150px; }
  .keycap-object { --key-scale: 1.2; }
}
@media (max-width: 900px) {
  .hero-scroll { height: calc(100svh + 288px); }
  .intro { display: block; height: calc(100svh - 72px); min-height: 0; max-height: none; padding-block: 44px 40px; }
  .intro-copy { height: 170px; margin-top: 0; }
  .intro-greeting { font-size: clamp(48px, 7vw, 58px); }
  .intro-identity { transform: translateY(42px); }
  .intro h1 { font-size: clamp(48px, 7vw, 58px); }
  .intro-discipline { margin-top: 15px; font-size: 15px; }
  .intro-object { margin-top: 0; }
  .keycap-scene { width: min(100%, 550px); height: 470px; }
  .keycap-object { top: -50px; --key-scale: 1.3; }
  .keycap-shadow { bottom: 36px; }
}
@media (max-width: 600px) {
  .intro { padding-block: 30px 40px; }
  .intro-copy { height: 135px; }
  .intro-greeting { font-size: clamp(47px, 11vw, 56px); }
  .intro-identity { transform: translateY(36px); }
  .intro h1 { font-size: clamp(40px, 10.2vw, 48px); }
  .intro-discipline { margin-top: 14px; font-size: 14px; }
  .keycap-scene { width: 100%; height: 325px; }
  .keycap-object { top: -90px; --key-scale: .82; }
  .keycap-shadow { width: 72%; height: 30px; bottom: 26px; filter: blur(15px); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll { height: auto; }
  .hero-scroll .intro { position: relative; top: auto; }
  .keycap-object { will-change: auto; }
  .intro-greeting { opacity: 0; }
  .intro-identity, .intro-discipline { opacity: 1; }
  .intro-identity, .intro-discipline { transform: none; }
}