/* Approved identity substitutions. All rules are confined to the intro. */
#intro .framer-n9rdip { left: 137px; }

#intro .personal-role {
  display: block;
  height: auto;
  min-height: 24px;
}

#intro .personal-role-copy {
  margin: 0;
  color: var(--token-3175e621-00d0-4a31-966e-23433a978eb9, rgba(12, 19, 27, .6));
  font: 500 22px/1.55 "Inter Display", "Inter Display Placeholder", sans-serif;
  letter-spacing: 0;
}

#intro .personal-project-badge {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 35px;
  padding: 2px 8px 2px 6px;
  border: 2px solid #fff;
  border-radius: 12px;
  background: #fff;
  color: #242428;
  box-shadow: 0 1px 2px rgba(12, 19, 27, .18), 0 2px 0 #d9dadb;
  font: 600 22px/1 "Inter Display", sans-serif;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  transform-origin: center;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

#intro .personal-canvo-badge { transform: rotate(4deg); }
#intro .personal-bduck-badge {
  padding-inline: 0;
  transform: rotate(-3deg);
}

#intro .personal-bduck-logo {
  position: relative;
  display: block;
  aspect-ratio: 690 / 190;
}

#intro .personal-bduck-badge img {
  display: block;
  width: 116px;
  height: auto;
  clip-path: inset(0 65% 0 0);
}

/* Keep the original yellow duck; display the official white wordmark in dark ink. */
#intro .personal-bduck-logo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/personal/bduck-official-logo.png") center / 100% 100% no-repeat;
  clip-path: inset(0 0 0 35%);
  filter: brightness(0) invert(14%);
  pointer-events: none;
}

#intro .personal-canvo-mark {
  flex: none;
  display: block;
  color: #3f3f46;
}

#intro .personal-project-badge:hover {
  transform: rotate(0deg) translateY(-1px);
  box-shadow: 0 2px 4px rgba(12, 19, 27, .16), 0 2px 0 #d9dadb;
}

#intro .personal-project-badge:focus-visible {
  outline: 2px solid #0c131b;
  outline-offset: 4px;
}

#intro .framer-1bqf5w2 { height: auto; min-height: 36px; }

#intro .personal-hero-visual {
  overflow: visible;
}

/* 电脑可见部分的高度约为左侧文字块的 1.2 倍。文字块固定约 226px 高；
   图里四周有透明留白，可见高度只占框宽的 0.82，所以框宽 330px 时电脑约 271px 高。
   右栏更窄时按 100% 收。 */
#intro .personal-hero-image-frame {
  flex: none;
  width: min(100%, 330px);
}

/* 并排布局时，电脑和左侧文字块垂直居中。
   文字块可见部分的中线在这一行顶部往下约 129px；电脑可见部分的中线在框高的 49.6%
   （图上下的透明留白不一样多）。用 translate 挪，不改动布局，也不会把文字往下推。 */
@media (min-width: 810px) {
  #intro .personal-hero-image-frame { transform: translateY(calc(129px - 49.6%)); }
}
/* 810–1399 这两档 Framer 版式里文字块的中线低 5px。 */
@media (min-width: 810px) and (max-width: 1399.98px) {
  #intro .personal-hero-image-frame { transform: translateY(calc(134px - 49.6%)); }
}

#intro .personal-hero-image {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: multiply;
}

/* 电脑图的屏幕是透明的，视频垫在图后面、从屏幕里透出来。
   位置按原图量的透明区域（1952×2048 里的 242,287 起，1468×977），
   四边各多放 4px，让边框压住视频边缘，不留缝。 */
#intro .personal-hero-screen { position: relative; }
#intro .personal-hero-screen .personal-hero-image { position: relative; z-index: 1; }
#intro .personal-hero-video {
  position: absolute;
  z-index: 0;
  left: 12.193%;
  top: 13.818%;
  width: 75.615%;
  height: 48.096%;
  object-fit: cover;
  /* 视频是 4:3，屏幕接近 3:2，要裁掉一些上下。往上偏，保住头发，裁的是衣服。 */
  object-position: 50% 20%;
  background: #fafafa;
}

#intro .personal-projects {
  position: relative;
  inset: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  width: 100%;
  height: auto;
  min-height: 36px;
}

#intro .personal-projects-label {
  margin: 0;
  flex: none;
  color: var(--token-3175e621-00d0-4a31-966e-23433a978eb9, rgba(12, 19, 27, .6));
  font: 500 22px/1.3 "Inter Display", sans-serif;
}

#intro .personal-project-badges {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

@media (max-width: 809.98px) {
  #intro .personal-hero-image-frame { width: min(100%, 360px); }
  #intro .personal-role-copy { font-size: 21px; }
  #intro .personal-project-badge { height: 32px; font-size: 20px; }
  #intro .personal-bduck-badge img { width: 106px; }
  #intro .personal-projects-label { font-size: 20px; }
  #intro .personal-projects { column-gap: 8px; }
  #intro .personal-project-badges { gap: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  #intro .personal-project-badge { transition: none; }
}