.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.preloader--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 768px) {
  html.preloader-active,
  body.preloader-active {
    overflow: hidden !important;
    overscroll-behavior: none;
  }

  .preloader {
    width: 100%;
    min-height: 100dvh;
    height: 100dvh;
  }
}

.preloader__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: min(420px, calc(100% - 48px));
}

.preloader__type {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(1.4rem, 4vw, 2.2rem);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
}

.preloader__type-text {
  display: inline-block;
  min-width: 1ch;
}

.preloader__type-text::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 8px;
  vertical-align: -0.08em;
  background: #ffffff;
  animation: preloaderCaretBlink 0.85s steps(1, end) infinite;
}

.preloader__type-caret {
  display: none;
}

.preloader__progress {
  width: min(240px, 100%);
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}

.preloader__bar {
  width: 0%;
  height: 100%;
  background: #ffffff;
  border-radius: 2px;
  transition: width 0.08s linear;
}

.preloader__text {
  font-family: "Orbitron", sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.2em;
}

@keyframes preloaderPulse {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

@keyframes preloaderCaretBlink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

@font-face {
  font-family: "Luckiest Guy Local";
  src:
    local("LuckiestGuy-Regular"),
    local("Luckiest Guy"),
    url("./LuckiestGuy-Regular-D4vvJGjA.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Archivo Black Local";
  src:
    local("ArchivoBlack-Regular"),
    local("Archivo Black"),
    url("./ArchivoBlack-Regular-tbdNt7Qg.otf") format("opentype"),
    url("./ArchivoBlack-Regular-VQMpfpnl.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}

.liquid-glass-filter {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
}

body {
  --title-font: "Luckiest Guy Local", "Archivo Black Local", "DM Sans",
    "PingFang SC", "Microsoft YaHei", sans-serif;
  --body-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --mono-font: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
  --color-text: #000000;
  --color-title: var(--color-text);
  --color-muted: #737373;
  --color-soft-text: #525252;
  --color-surface: #ffffff;
  --color-surface-soft: #fafafa;
  --color-line: #e5e5e5;
  --color-line-strong: #d4d4d4;
  --color-on-dark: #ffffff;
  --color-on-dark-muted: rgba(255, 255, 255, 0.7);
  --color-accent: #000000;
  --nav-theme-color: #ff6a2a;
  --nav-theme-color-soft: rgba(255, 106, 42, 0.2);
  --color-dark-surface: #171717;
  --focus-ring: rgba(59, 130, 246, 0.5);
  --sprite-stage-bg: #ffffff;
  --page-max-width: 1200px;
  --page-frame-gutter: 24px;
  --page-content-gutter: 120px;
  --page-frame-width: min(
    var(--page-max-width),
    calc(100% - (var(--page-frame-gutter) * 2))
  );
  --page-content-width: min(
    var(--page-max-width),
    calc(100% - (var(--page-content-gutter) * 2))
  );
  --screen-module-height: 100svh;
  --screen-module-pad-y: 88px;
  --module-title-gap: 32px;
  --portfolio-title-size: clamp(52px, 7vw, 84px);
  --radius-card: 12px;
  --radius-pill: 9999px;
  --radius-panel: 40px;
  --module-content-space: calc(
    var(--screen-module-height) - (var(--screen-module-pad-y) * 2)
  );
  --module-media-space: calc(
    var(--module-content-space) - (var(--portfolio-title-size) * 0.88) -
      var(--module-title-gap)
  );
  margin: 0;
  font-family: var(--body-font);
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-surface);
  overflow-x: hidden;
}

.section-title {
  margin: 0;
  font-family: var(--title-font);
  font-weight: 400;
  line-height: 0.88;
  letter-spacing: 0;
  color: var(--color-title);
  text-align: center;
  text-transform: uppercase;
}

body.menu-open {
  overflow: hidden;
}

body.portfolio-featured-dragging,
body.portfolio-featured-dragging * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grabbing !important;
}

body.portfolio-featured-dragging *::selection {
  background: transparent;
}

html.portfolio-featured-gesture-active,
html.portfolio-featured-gesture-active body {
  overscroll-behavior-x: none;
}

html.portfolio-featured-history-lock,
html.portfolio-featured-history-lock body,
body.portfolio-featured-history-lock {
  overscroll-behavior-x: none;
  overflow-x: clip;
}

body.is-click-surprise-active,
body.is-click-surprise-active * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

body.is-click-surprise-active *::selection {
  background: transparent;
}

/* 全站内容区最大宽度 1200px；与区块类并列使用，如 class="container section-two" */
.container {
  width: var(--page-content-width);
  margin: 0 auto;
}

/* Glass Surface 效果 */
.glass-surface {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: opacity 0.26s ease-out;
}

.glass-surface__filter {
  width: 100%;
  height: 100%;
  pointer-events: none;
  position: absolute;
  inset: 0;
  opacity: 0;
  z-index: -1;
}

.glass-surface__content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: inherit;
  position: relative;
  z-index: 1;
}

.glass-surface--svg {
  background: rgba(229, 229, 234, 0);
  backdrop-filter: var(--filter-id, url(#glass-filter)) blur(1px) saturate(var(--glass-saturation, 1));
  -webkit-backdrop-filter: var(--filter-id, url(#glass-filter)) blur(1px) saturate(var(--glass-saturation, 1));
  box-shadow:
    0 0 2px 1px rgba(0, 0, 0, 0.03) inset,
    0 0 10px 4px rgba(255, 255, 255, 0.05) inset,
    0px 4px 16px rgba(17, 17, 26, 0.05),
    0px 8px 24px rgba(17, 17, 26, 0.05),
    0px 16px 56px rgba(17, 17, 26, 0.05);
}

.glass-surface--fallback {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px 0 rgba(31, 38, 135, 0.2),
    0 2px 16px 0 rgba(31, 38, 135, 0.1),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
}

@media (prefers-color-scheme: dark) {
  .glass-surface--fallback {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.2),
      inset 0 -1px 0 0 rgba(255, 255, 255, 0.1);
  }
}

@supports not (backdrop-filter: blur(10px)) {
  .glass-surface--fallback {
    background: rgba(255, 255, 255, 0.4);
    box-shadow:
      inset 0 1px 0 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 0 0 rgba(255, 255, 255, 0.3);
  }

  .glass-surface--fallback::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.15);
    border-radius: inherit;
    z-index: -1;
  }
}

@supports not (backdrop-filter: blur(10px)) {
  @media (prefers-color-scheme: dark) {
    .glass-surface--fallback {
      background: rgba(0, 0, 0, 0.4);
    }

    .glass-surface--fallback::before {
      background: rgba(255, 255, 255, 0.05);
    }
  }
}

.glass-surface:focus-visible {
  outline: 2px solid light-dark(#007aff, #0a84ff);
  outline-offset: 2px;
}

/* 导航栏 */
.navbar {
  position: sticky;
  top: 16px;
  z-index: 100;
  display: flex;
  align-items: center;
  margin: 0 auto;
  width: var(--page-frame-width);
  height: 48px;
  padding: 0 20px 0 6px;
  border-radius: 200px;
  border: 0;
  overflow: hidden;
  isolation: isolate;
  transition:
    background 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease,
    backdrop-filter 0.22s ease,
    -webkit-backdrop-filter 0.22s ease,
    border-color 0.22s ease;
}

.navbar.glass-surface--svg,
.navbar.glass-surface--fallback {
  background: transparent;
  box-shadow: none;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.navbar.navbar--scrolled.glass-surface--svg {
  background: rgba(236, 236, 240, var(--glass-frost, 0.18));
  backdrop-filter: var(--filter-id, url(#glass-filter)) blur(1px) saturate(var(--glass-saturation, 1));
  -webkit-backdrop-filter: var(--filter-id, url(#glass-filter)) blur(1px) saturate(var(--glass-saturation, 1));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.44),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    inset 0 5px 12px rgba(255, 255, 255, 0.08),
    inset 0 -8px 18px rgba(15, 23, 42, 0.035),
    inset 0 0 12px rgba(15, 23, 42, 0.025),
    0 10px 24px rgba(17, 17, 26, 0.08),
    0 18px 40px rgba(17, 17, 26, 0.08),
    0 28px 70px rgba(17, 17, 26, 0.06);
}

.navbar.navbar--scrolled.glass-surface--fallback {
  background: rgba(255, 255, 255, 0.32);
  backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px 0 rgba(31, 38, 135, 0.2),
    0 2px 16px 0 rgba(31, 38, 135, 0.1),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.2);
}

.navbar > * {
  position: relative;
  z-index: 1;
}

.navbar::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 0;
}

.navbar.navbar--scrolled.glass-surface--svg::before {
  opacity: 1;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.08) 24%, rgba(255, 255, 255, 0.02) 48%, rgba(255, 255, 255, 0.06) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 5px 10px rgba(255, 255, 255, 0.06),
    inset 0 -6px 12px rgba(15, 23, 42, 0.03);
}

/* 菜单列表 */
.menu-wrap {
  margin-left: auto;
}

.nav-wechat-drop {
  --wechat-drop-x: 50vw;
  --wechat-drop-y: 64px;
  position: fixed;
  inset: 0;
  z-index: 90;
  width: 100vw;
  height: 100svh;
  opacity: 0;
  pointer-events: none;
  overflow: visible;
  transform-origin: var(--wechat-drop-x) var(--wechat-drop-y);
  filter: blur(4px);
}

.nav-wechat-drop:not(.is-open),
.nav-wechat-drop:not(.is-open) * {
  pointer-events: none !important;
}

.nav-wechat-drop.is-open {
  opacity: 1;
  pointer-events: auto;
  filter: blur(0);
}

.nav-wechat-drop.is-opening {
  animation: navWechatFadeIn 0.18s ease both;
}

.nav-wechat-drop.is-closing {
  opacity: 1;
  pointer-events: none;
  animation: navWechatDropOut 0.34s cubic-bezier(0.6, 0, 0.8, 0.2) both;
}

@keyframes navWechatFadeIn {
  0% {
    opacity: 0;
    filter: blur(5px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes navWechatDropOut {
  0% {
    opacity: 1;
    filter: blur(0);
  }

  100% {
    opacity: 0;
    filter: blur(5px);
  }
}

.nav-wechat-drop__lanyard {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100svh;
  transform: none;
  overflow: visible !important;
  pointer-events: none;
}

.nav-wechat-drop__lanyard .lanyard-wrapper {
  width: 100%;
  height: 100%;
  overflow: visible !important;
  pointer-events: none;
}

.nav-wechat-drop__lanyard .lanyard-wrapper > div,
.nav-wechat-drop__lanyard .lanyard-wrapper > div > div {
  overflow: visible !important;
}

.nav-wechat-drop__lanyard canvas {
  overflow: visible !important;
  pointer-events: none;
}

.mobile-contact-popup {
  display: none;
}

@media (max-width: 767px) {
  .mobile-contact-popup {
    position: fixed;
    inset: 0;
    z-index: 260;
    display: grid;
    place-items: center;
    padding: 24px;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .mobile-contact-popup.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
  }

  .mobile-contact-popup__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.42);
    backdrop-filter: blur(8px);
  }

  .mobile-contact-popup__card {
    position: relative;
    width: min(100%, 320px);
    overflow: hidden;
    border-radius: 24px;
    background: #f8fafc;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.28);
    transform: translateY(12px) scale(0.96);
    transition: transform 0.24s ease;
  }

  .mobile-contact-popup.is-open .mobile-contact-popup__card {
    transform: translateY(0) scale(1);
  }

  .mobile-contact-popup__close {
    position: absolute;
    top: 10px;
    right: 12px;
    z-index: 1;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    color: #0f172a;
    font-size: 25px;
    line-height: 1;
  }

  .mobile-contact-popup__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .mobile-contact-popup__wechat {
    display: block;
    width: 100%;
    height: auto;
  }

}

.nav-wechat-drop.is-open .nav-wechat-drop__lanyard,
.nav-wechat-drop.is-open .nav-wechat-drop__lanyard .lanyard-wrapper,
.nav-wechat-drop.is-open .nav-wechat-drop__lanyard canvas {
  pointer-events: auto;
}

.brand {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.brand img {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  object-fit: cover;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 16px;
  align-items: center;
}

.menu a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  color: var(--color-text);
  padding: 0.4rem 0.5rem;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 500;
  background: rgba(255, 255, 255, 0.26);
  backdrop-filter: blur(12px) saturate(1.1);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  transition:
    background 0.22s ease,
    color 0.22s ease,
    transform 0.22s ease,
    box-shadow 0.22s ease;
}

.menu-link__label {
  display: inline-flex;
  align-items: center;
}

.menu-link__icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
}

.menu-link__icon svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
}

@media (min-width: 769px) {
  .menu-item--icon .menu-link__label {
    display: none;
  }

  .menu-item--icon .menu-link__icon {
    display: inline-flex;
  }

  .menu-item--icon a {
    min-width: 36px;
    min-height: 36px;
    padding: 0;
  }
}

.menu a svg path {
  stroke: none;
}

.menu a:hover {
  background: var(--nav-theme-color-soft);
  box-shadow: 0 8px 20px rgba(255, 106, 42, 0.12);
}

.menu a:hover svg path {
  fill: currentColor;
}

.menu a:active,
.menu a[aria-current="page"],
.menu a[aria-expanded="true"] {
  color: #ffffff;
  background: var(--nav-theme-color);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 10px 24px rgba(255, 106, 42, 0.28);
}

.menu a:active svg path,
.menu a[aria-current="page"] svg path,
.menu a[aria-expanded="true"] svg path {
  fill: #ffffff;
}

/* 移动端按钮 */
.menu-toggle {
  display: none;
  border: none;
  background: transparent;
  appearance: none;
  border-radius: 8px;
  padding: 0;
  position: relative;
  color: #111111;
  outline: none;
  box-shadow: none;
  -webkit-tap-highlight-color: transparent;
}

.menu-toggle__icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  color: #0f172a;
  opacity: 1;
  transform: none;
}

.menu-toggle__icon svg {
  width: 22px;
  height: 22px;
  color: inherit;
  opacity: 1;
  transform: none;
}

.menu-toggle::before,
.menu-toggle::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transform: translateX(-50%);
  will-change: transform, top;
  transition:
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    top 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.22s ease,
    box-shadow 0.22s ease;
}

.menu-toggle::before {
  top: calc(50% - 4px);
}

.menu-toggle::after {
  top: calc(50% + 4px);
}
.head-hero {
}

.head-tracker {
  --head-frame: 0;
  --head-frame-count: 240;
  --head-sprite-cols: 12;
  --head-sprite-rows: 20;
  --head-col: 0;
  --head-row: 0;
  --hero-poster-x: 0px;
  --hero-poster-y: 0px;
  --hero-poster-rotate: 0deg;
  pointer-events: auto;
}

.head-tracker__stage {
}

.head-tracker__poster,
.head-tracker__sprite {
}

.head-tracker__poster {
  z-index: 0;
  /* 海报直接铺满 stage，避免全局 img 规则和 left/translate 叠加造成半屏空白。 */
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
  transform: translate3d(var(--hero-poster-x), var(--hero-poster-y), 0) rotate(var(--hero-poster-rotate));
  transition: transform 180ms ease-out, opacity 180ms ease;
  will-change: transform;
}

/* 预加载层还在时保持首屏海报完全静止，避免渐隐阶段提前触发跟随位移。 */
.preloader:not(.preloader--hidden) ~ .site-main .head-tracker__poster {
  transform: translate3d(0, 0, 0) rotate(0deg) !important;
  transition: none !important;
}

.head-tracker__sprite {
  z-index: 1;
  image-rendering: auto;
  opacity: 0;
  transition: opacity 120ms ease;
  will-change: contents;
}

.hero-nav {
  z-index: 20;
  pointer-events: none;
  box-sizing: border-box;
  overflow: visible;
  padding-inline: clamp(24px, 3.8vw, 72px);
}

.hero-nav__text {
  --hero-float-x: 0px;
  --hero-float-y: 0px;
  font-family: "Orbitron", sans-serif;
  font-size: clamp(2rem, 8vw, 4rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  position: relative;
  display: inline-block;
  color: transparent;
  mix-blend-mode: difference;
  text-shadow: none;
  transform: translate(var(--hero-float-x), var(--hero-float-y));
  animation: none;
  will-change: transform;
  pointer-events: auto;
  overflow: visible;
}

.hero-nav__text::before,
.hero-nav__text::after {
  content: none;
}

.hero-nav__canvas {
  position: absolute;
  inset: -0.22em -0.34em;
  width: calc(100% + 0.68em);
  height: calc(100% + 0.44em);
  pointer-events: none;
  display: block;
  mix-blend-mode: difference;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.12));
}

.hero-nav__text--left .hero-nav__canvas {
  left: -0.22em;
  right: auto;
}

.hero-nav__text--right .hero-nav__canvas {
  left: auto;
  right: -0.22em;
}

.hero-nav__text--left {
  text-align: left;
}

.hero-nav__text--right {
  text-align: right;
  margin-top: 380px;
}

.head-tracker.is-ready .head-tracker__sprite {
  opacity: 1;
}

.ribbons-cursor-layer {
  position: fixed;
  inset: 0;
  z-index: 10001;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.motion3d-section {
  position: relative;
  width: 100%;
  height: min(760px, 86vh);
  min-height: 560px;
  margin: -40px 0 160px;
  overflow: hidden;
  background: #000000;
  color: #f8fafc;
  isolation: isolate;
  cursor: crosshair;
}

.motion3d-canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.motion3d-links {
  position: absolute;
  left: 50%;
  top: 48%;
  z-index: 3;
  display: flex;
  gap: clamp(46px, 10vw, 140px);
  transform: translate3d(-50%, -50%, 0);
}

.motion3d-links a {
  position: relative;
  color: rgba(255, 255, 255, 0.78);
  font-size: clamp(34px, 5.4vw, 78px);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-decoration: none;
  text-shadow: 0 18px 52px rgba(0, 0, 0, 0.72);
  transition:
    opacity 0.2s ease,
    transform 0.24s ease;
}

.motion3d-links a::first-letter {
  color: #9cff2f;
}

.motion3d-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.12em;
  height: 0.06em;
  border-radius: 999px;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: left center;
  transition:
    opacity 0.2s ease,
    transform 0.24s ease;
}

.motion3d-links a:hover {
  opacity: 0.86;
  transform: translateY(-0.08em);
}

.motion3d-links a:hover::after {
  opacity: 0.78;
  transform: scaleX(1);
}

.motion3d-case {
  position: absolute;
  left: max(var(--page-frame-gutter), calc((100vw - var(--page-max-width)) / 2));
  right: max(var(--page-frame-gutter), calc((100vw - var(--page-max-width)) / 2));
  bottom: clamp(18px, 4vh, 36px);
  z-index: 2;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 48px;
  gap: 18px;
  align-items: center;
  max-width: 500px;
  min-height: 92px;
  padding: 10px 12px 10px 10px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.075);
  color: #ffffff;
  text-decoration: none;
  backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.35);
  transition:
    background 0.22s ease,
    transform 0.22s ease;
}

.motion3d-case:hover {
  background: rgba(255, 255, 255, 0.16);
  transform: translateY(-3px);
}

.motion3d-case__media {
  display: block;
  width: 76px;
  height: 72px;
  overflow: hidden;
  border-radius: 18px;
  background: #9cff2f;
}

.motion3d-case__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.motion3d-case__text {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.motion3d-case__text span {
  color: rgba(255, 255, 255, 0.62);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.motion3d-case__text strong {
  color: #ffffff;
  font-size: 18px;
  line-height: 1.1;
}

.motion3d-case__text em {
  color: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-style: normal;
}

.motion3d-case__arrow {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #ffffff;
  color: #05070d;
  font-size: 20px;
  font-weight: 800;
}

.motion3d-hint {
  position: absolute;
  right: max(var(--page-frame-gutter), calc((100vw - var(--page-max-width)) / 2));
  bottom: clamp(22px, 5vh, 42px);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid rgba(248, 250, 252, 0.22);
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.08);
  color: rgba(248, 250, 252, 0.82);
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(10px);
}

.motion3d-section::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 36%;
  background: linear-gradient(180deg, transparent, rgba(5, 7, 13, 0.82));
  pointer-events: none;
  z-index: 1;
}

.motion3d-section.is-loading .motion3d-hint span::after {
  content: " ...";
}

.motion3d-section.is-fallback {
  background:
    radial-gradient(circle at 72% 26%, rgba(156, 255, 47, 0.26), transparent 24%),
    radial-gradient(circle at 24% 62%, rgba(95, 212, 242, 0.22), transparent 28%),
    #05070d;
}

@media (prefers-reduced-motion: reduce) {
}

/* 锚点跳转时预留顶部导航高度，避免被遮挡 */
#home,
#about,
#works,
#portfolio,
#photo,
#experience,
#contact {
  scroll-margin-top: 96px;
}

:is(.section-two, .section-three, .section-portfolio, .section-portfolio-featured) {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: var(--screen-module-height);
  padding-top: var(--screen-module-pad-y);
  padding-bottom: var(--screen-module-pad-y);
  margin-top: 0;
  margin-bottom: 0;
  gap: var(--module-title-gap);
}

/* 内容区域2 #about：介绍与技能 */
.section-two {
  width: var(--page-frame-width);
}

.section-two .section-two-head {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.section-two .section-two-head img {
  display: block;
  width: 100%;
  max-width: 1200px;
  /* 介绍图最大高度，影响区域视觉高度 */
  max-height: min(480px, 48vh);
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-card);
}

/* logo 墙高度 = 动画可视区域（与 script.js logoWall.clientHeight 一致，勿过小） */
.section-two-intro {
  margin: 0;
  width: 100%;
  max-width: 1200px;
  font-family:
    "Archivo Black Local",
    "DM Sans",
    "PingFang SC",
    "Microsoft YaHei",
    sans-serif;
  font-size: clamp(28px, 2.65vw, 40px);
  font-weight: 900;
  line-height: 1.34;
  letter-spacing: 0;
  color: var(--color-title);
}

.section-two-intro__sticker {
  display: inline-block;
  width: 1.46em;
  height: 1.46em;
  margin: 0 0.1em;
  object-fit: contain;
  vertical-align: -0.14em;
}

.section-two .section-two-head .section-two-intro__sticker {
  display: inline-block;
  width: 1.46em;
  max-width: none;
  height: 1.46em;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
}

.section-two-intro__sticker--avatar {
  border-radius: var(--radius-card);
}

.section-two-intro__sticker--emoji {
  width: 1.1em;
  height: 1.1em;
  margin-left: 0.04em;
  vertical-align: -0.1em;
}

.section-two .section-two-head .section-two-intro__sticker--avatar {
  border-radius: var(--radius-card);
}

.section-two .section-two-head .section-two-intro__sticker--emoji {
  width: 1.1em;
  height: 1.1em;
}

.section-two-intro__nowrap {
  white-space: normal;
}

.section-two .logo-wall {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  height: min(200px, calc(var(--module-content-space) * 0.34));
  padding-bottom: 8px;
  overflow: hidden;
  box-sizing: border-box;
}

.section-two .logo-wall img {
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 64px;
  object-fit: contain;
  display: block;
  opacity: 0;
  transform: translate3d(0, -260px, 0) rotate(-8deg);
  will-change: transform, opacity;
  pointer-events: auto;
}

/* 内容区域3 #photo */
.section-three {
  --photo-spacing: 24px;
  --photo-card-height: clamp(
    220px,
    calc(
      var(--module-media-space) - 84px
    ),
    400px
  );
  --photo-card-width: calc(var(--photo-card-height) * 0.75);
  gap: var(--photo-spacing);
}

.section-three .photo-top,
.section-portfolio .portfolio-top {
  font-size: var(--portfolio-title-size);
  color: var(--color-title);
  margin-bottom: 0;
}

.section-three .photo-hover-hitbox {
  width: var(--photo-card-width);
  height: var(--photo-card-height);
  margin: 0 auto;
  cursor: pointer;
}

.section-three .photo-images {
  position: relative;
  z-index: 1;
  width: var(--photo-card-width);
  height: var(--photo-card-height);
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  display: block !important;
  transform-origin: center;
}

.section-three .photo-images .photo-tilt-surface {
  position: absolute;
  inset: 0;
  transform-origin: center;
}

.section-three .photo-images .photo-image {
  position: absolute;
  inset: 0;
}

.section-three .photo-images .photo-image-back {
  z-index: 1;
}

.section-three .photo-images .photo-image-front {
  z-index: 2;
  will-change: clip-path;
}

.section-three .photo-images .photo-grid-container {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.section-three .photo-images .grid-cell {
  position: absolute;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 1;
}

.section-three .photo-content .photo-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 0;
}

.section-three .photo-content .photo-meta dt {
  color: var(--color-muted);
  text-align: left;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.33;
  margin: 0;
  width: 100%;
}

.section-three .photo-content .photo-meta dd {
  color: var(--color-text);
  font-feature-settings: "liga" off, "clig" off;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
  margin: 0;
  width: 100%;
}

.section-three .photo-content-bottom p {
  color: var(--color-text);
  text-align: center;
  font-feature-settings: "liga" off, "clig" off;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.43;
  margin: 0;
}

.section-three .photo-content-bottom {
  margin-top: 0;
}

/* 内容区域4 #portfolio；JS 钩子保留 .portfolio-cards-section */
#portfolio-featured.section-portfolio-featured {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  min-height: 280svh;
  padding: 0;
  display: block;
  background: var(--color-surface);
}

.mydesign-morph__pin {
  position: sticky;
  top: 0;
  z-index: 2;
  width: 100%;
  height: 100svh;
  min-height: 680px;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  isolation: isolate;
}

.mydesign-morph__first {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--module-title-gap);
  will-change: opacity, transform;
}

.mydesign-morph__overlay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.mydesign-morph__svg {
  display: block;
  width: 100%;
  height: 100%;
}

.mydesign-second-screen {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  transform: translate3d(0, 48px, 0);
  pointer-events: none;
  will-change: opacity, transform;
  overflow: visible;
}

.mydesign-second-screen__scene {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  justify-items: center;
  gap: clamp(14px, 2.8vh, 28px);
  overflow: visible;
  box-sizing: border-box;
  padding: clamp(44px, 7vh, 82px) clamp(28px, 4vw, 72px) clamp(18px, 3.6vh, 38px);
  background:
    radial-gradient(circle at 36% 18%, rgba(255, 255, 255, 0.22), transparent 26%),
    linear-gradient(180deg, #2675f7 0%, #5dacff 55%, #9be8f4 100%);
}

.mydesign-jack-hero {
  --avatar-x: 0px;
  --avatar-y: 0px;
  --avatar-rotate: 0deg;
  position: relative;
  width: min(96vw, 1600px);
  min-height: min(70vh, 700px);
  align-self: stretch;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  align-items: start;
  overflow: visible;
  isolation: isolate;
}

.mydesign-jack-hero__title-wrap {
  position: relative;
  z-index: 2;
  align-self: start;
  overflow: visible;
  padding-inline: clamp(8px, 2vw, 30px);
  transform: translate3d(0, clamp(48px, 8.5vh, 96px), 0);
}

.mydesign-jack-hero__title {
  margin: 0;
  font-family: var(--title-font);
  font-size: clamp(88px, 16.2vw, 300px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.065em;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(238, 248, 255, 0.98) 0%, rgba(162, 206, 235, 0.82) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 18px 38px rgba(14, 68, 126, 0.24));
}

.mydesign-jack-hero__portrait {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 58%;
  width: clamp(360px, 42vw, 690px);
  max-height: none;
  object-fit: contain;
  transform: translate3d(calc(-50% + var(--avatar-x)), calc(-50% + var(--avatar-y)), 0) rotate(var(--avatar-rotate));
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  filter: drop-shadow(0 28px 54px rgba(8, 43, 86, 0.28));
  pointer-events: none;
  user-select: none;
}

.mydesign-second-screen__logo-stage {
  position: relative;
  width: min(78vw, 1380px);
  aspect-ratio: 2048 / 459;
  flex: 0 0 auto;
  transform: translate3d(0, 0, 0);
}

.mydesign-second-screen__logo-image {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 18px 24px rgba(22, 80, 130, 0.08));
}

.mydesign-second-screen__lanyard {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.mydesign-second-screen__lanyard .lanyard-wrapper {
  position: absolute;
  left: min(93.6vw, calc(50% + 430px));
  top: clamp(300px, 58vh, 430px);
  width: clamp(140px, 15vw, 230px);
  height: clamp(300px, 35vw, 460px);
  transform: translate3d(-50%, 0, 0) scale(0.6);
  transform-origin: 50% 0;
  overflow: visible;
  pointer-events: none;
}

.mydesign-second-screen__lanyard canvas {
  overflow: visible;
  pointer-events: none;
}

.mydesign-contact {
  position: relative;
  z-index: 6;
  align-self: end;
  width: min(91vw, 1360px);
  display: grid;
  grid-template-columns: 0.85fr 1.25fr 0.8fr 1.15fr;
  column-gap: clamp(24px, 5vw, 82px);
  row-gap: 16px;
  color: #fff;
  font-family: var(--body-font);
  text-align: left;
  text-shadow: 0 8px 28px rgba(10, 48, 98, 0.18);
}

.mydesign-contact__item {
  min-width: 0;
}

.mydesign-contact__label,
.mydesign-contact__value {
  margin: 0;
  -webkit-text-stroke: 0;
  text-stroke: 0;
  paint-order: fill;
}

.mydesign-contact__label {
  color: rgba(255, 255, 255, 0.72);
  font-size: clamp(9px, 0.85vw, 14px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.mydesign-contact__value {
  margin-top: clamp(6px, 1vh, 11px);
  color: #fff;
  font-size: clamp(15px, 1.55vw, 28px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

.mydesign-contact__value-button {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  text-shadow: inherit;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.mydesign-contact__value-button:hover,
.mydesign-contact__value-button:focus-visible {
  opacity: 0.86;
  transform: translate3d(3px, 0, 0);
}

.mydesign-contact__value-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 4px;
  border-radius: 999px;
}

.mydesign-contact__value a {
  color: inherit;
  text-decoration: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.58);
  transition: border-color 0.18s ease;
}

.mydesign-contact__value a:hover {
  border-bottom-color: #fff;
}

@media (max-width: 768px) {
  #portfolio-featured.section-portfolio-featured {
    /* 移动端保留最后一屏的滚动舞台，让波浪遮罩有足够的进度区间播放。 */
    min-height: 260svh;
    background: var(--color-surface);
    /* content-visibility 会让该区块内部的 sticky 舞台失效，导致尾屏后出现整段空白。 */
    content-visibility: visible;
  }

  .mydesign-morph__pin {
    position: sticky;
    top: 0;
    height: 100svh;
    min-height: 0;
    display: flex;
    background: var(--color-surface);
  }

  .mydesign-morph__first {
    position: relative;
    opacity: 1;
    transform: translate3d(0, 0, 0);
    pointer-events: auto;
  }

  .mydesign-morph__overlay {
    display: block;
  }

  .mydesign-second-screen {
    position: absolute;
    inset: 0;
    min-height: auto;
    opacity: 0;
    transform: translate3d(0, 48px, 0);
    pointer-events: none;
    overflow: visible;
  }

  .mydesign-second-screen__logo-stage {
    width: 118vw;
    transform: translate3d(-2vw, 0, 0);
  }

  .mydesign-second-screen__scene {
    min-height: 100%;
    height: 100%;
    grid-template-rows: minmax(0, 1fr) auto;
    align-content: stretch;
    gap: clamp(10px, 2vh, 18px);
    padding: calc(env(safe-area-inset-top, 0px) + 68px) 16px max(16px, env(safe-area-inset-bottom, 0px) + 12px);
  }

  .mydesign-jack-hero {
    width: 100%;
    min-height: 0;
    height: min(58svh, 470px);
  }

  .mydesign-jack-hero__title {
    font-size: clamp(44px, 14.4vw, 82px);
    line-height: 1.04;
    white-space: normal;
  }

  .mydesign-jack-hero__title-wrap {
    transform: translate3d(0, clamp(16px, 4.4vh, 40px), 0);
  }

  .mydesign-jack-hero__portrait {
    width: clamp(250px, 70vw, 360px);
    top: 57%;
  }

  .mydesign-second-screen__lanyard {
    inset: 0;
  }

  .mydesign-second-screen__lanyard .lanyard-wrapper {
    left: 94vw;
    top: 58%;
    width: clamp(96px, 26vw, 144px);
    height: clamp(210px, 58vw, 300px);
    transform: translate3d(-50%, 0, 0) scale(0.42);
  }

  .mydesign-contact {
    width: min(88vw, 500px);
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    column-gap: 10px;
    row-gap: 10px;
    transform: translate3d(0, -72px, 0);
  }

  .mydesign-contact__item:nth-child(4) {
    padding-right: 0;
  }

  .mydesign-contact__label {
    font-size: clamp(8px, 2.3vw, 9px);
    letter-spacing: 0.12em;
  }

  .mydesign-contact__value {
    margin-top: 4px;
    font-size: clamp(12px, 3.05vw, 14px);
    line-height: 1.16;
    white-space: nowrap;
    overflow-wrap: normal;
  }

  .mydesign-contact__value a {
    border-bottom-width: 1px;
  }
}

@media (max-height: 520px) and (min-width: 769px) {
  .mydesign-second-screen__scene {
    gap: clamp(10px, 2.6vh, 18px);
    padding: clamp(26px, 6vh, 44px) clamp(24px, 4vw, 56px) clamp(14px, 3.5vh, 24px);
  }

  .mydesign-second-screen__logo-stage {
    width: min(66vw, 980px);
  }

  .mydesign-jack-hero {
    min-height: min(66vh, 360px);
    width: min(94vw, 1320px);
  }

  .mydesign-jack-hero__title {
    font-size: clamp(68px, 13.2vw, 188px);
    line-height: 1.02;
  }

  .mydesign-jack-hero__title-wrap {
    transform: translate3d(0, clamp(34px, 8vh, 54px), 0);
  }

  .mydesign-jack-hero__portrait {
    width: clamp(300px, 30vw, 470px);
    top: 60%;
  }

  .mydesign-contact {
    width: min(92vw, 1440px);
    column-gap: clamp(24px, 5vw, 78px);
    row-gap: 14px;
  }

  .mydesign-contact__label {
    font-size: clamp(9px, 0.9vw, 13px);
    letter-spacing: 0.16em;
  }

  .mydesign-contact__value {
    margin-top: clamp(6px, 1vh, 10px);
    font-size: clamp(16px, 1.7vw, 26px);
    line-height: 1.08;
  }
}

.section-portfolio .portfolio-top {
  position: relative;
  z-index: 10;
}

.section-portfolio.portfolio-cards-section {
  --portfolio-bounce-card-size: clamp(220px, 24vw, 430px);
  --portfolio-bounce-stage-height: calc(var(--portfolio-bounce-card-size) * 1.08);
}

.section-portfolio .portfolio-gallery--bounce {
  height: var(--portfolio-bounce-stage-height) !important;
  min-height: 0;
  align-items: center;
}

.section-portfolio .portfolio-gallery--more-work {
  min-height: clamp(620px, 86vh, 940px);
  padding: clamp(54px, 7vw, 112px) clamp(34px, 5vw, 86px) clamp(70px, 8vw, 128px);
  align-items: flex-start;
}

.more-work-grid {
  --more-card-radius: clamp(20px, 2.2vw, 34px);
  --more-card-shadow: 0 30px 74px rgba(15, 23, 42, 0.15);
  --more-card-hover-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --more-card-x: 0px;
  --more-card-y: 0px;
  --more-card-title-height: 31px;
  --more-card-desc-height: 36px;
  display: grid;
  width: min(100%, 1760px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(48px, 7vw, 132px) clamp(56px, 8vw, 154px);
}

.more-work-card {
  --card-bg: transparent;
  --card-back: #000;
  --more-card-pad-x: 16px;
  --more-card-pad-y: 24px;
  --more-card-gap: 12px;
  --more-card-title-slot: clamp(24px, 2.15vw, 31px);
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: var(--more-card-radius);
  color: inherit;
  text-decoration: none;
  opacity: 0;
  transform:
    translate3d(0, 64px, 0)
    rotate(var(--card-start-rotate, 0deg))
    scale(0.96);
  transition:
    opacity 0.74s var(--more-card-hover-ease),
    transform 0.74s cubic-bezier(0.18, 1.18, 0.22, 1),
    filter 0.42s var(--more-card-hover-ease);
  transition-delay: calc(var(--more-card-index, 0) * 70ms);
  will-change: transform, opacity;
}

.more-work-card.is-visible {
  opacity: 1;
  transform:
    translate3d(var(--more-card-x), var(--more-card-y), 0)
    rotate(var(--card-rotate, 0deg))
    scale(1);
}

.more-work-card:hover,
.more-work-card:focus-visible {
  z-index: 5;
  filter: saturate(1.04);
  transform:
    translate3d(var(--more-card-x), calc(var(--more-card-y) - 20px), 0)
    rotate(var(--card-rotate, 0deg))
    scale(1.035);
}

.more-work-card__back,
.more-work-card__surface {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
}

.more-work-card__back {
  z-index: 0;
  background: var(--card-back);
  transform: translate3d(12px, -18px, -1px) rotate(-1.5deg);
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transition:
    opacity 0.46s var(--more-card-hover-ease),
    transform 0.56s var(--more-card-hover-ease),
    box-shadow 0.46s var(--more-card-hover-ease);
}

.more-work-card__surface {
  z-index: 1;
  background: var(--card-bg);
  box-shadow: var(--more-card-shadow);
  transform: translateZ(0);
  transition:
    background 0.46s var(--more-card-hover-ease),
    box-shadow 0.46s var(--more-card-hover-ease),
    padding 0.46s var(--more-card-hover-ease),
    gap 0.46s var(--more-card-hover-ease);
}

.more-work-card__surface img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: none;
  border-radius: inherit;
  transition:
    inset 0.5s var(--more-card-hover-ease),
    width 0.5s var(--more-card-hover-ease),
    height 0.5s var(--more-card-hover-ease),
    border-radius 0.5s var(--more-card-hover-ease),
    filter 0.42s var(--more-card-hover-ease),
    transform 0.5s var(--more-card-hover-ease);
}

.more-work-card__surface::before,
.more-work-card__surface::after {
  z-index: 2;
  color: #f8efe0;
  text-align: left;
  opacity: 0;
  transform: translate3d(0, 12px, 0);
  transition:
    opacity 0.36s var(--more-card-hover-ease),
    transform 0.48s var(--more-card-hover-ease);
  pointer-events: none;
}

.more-work-card__surface::before {
  content: attr(data-card-title);
  text-align: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: clamp(18px, 2.15vw, 31px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  white-space: nowrap;
}

.more-work-card__surface::after {
  content: attr(data-card-desc);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.32;
  color: rgba(248, 239, 224, 0.82);
}

.more-work-card:hover .more-work-card__surface,
.more-work-card:focus-visible .more-work-card__surface {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--more-card-gap);
  place-items: stretch;
  padding: var(--more-card-pad-y) var(--more-card-pad-x);
  background: #000;
  box-shadow: 0 34px 86px rgba(18, 15, 10, 0.28);
}

.more-work-card:hover .more-work-card__back,
.more-work-card:focus-visible .more-work-card__back {
  opacity: 1;
}

.more-work-card:hover .more-work-card__surface img,
.more-work-card:focus-visible .more-work-card__surface img {
  position: relative;
  inset: auto;
  width: 100%;
  height: 100%;
  min-height: 0;
  align-self: stretch;
  border-radius: clamp(14px, 1.7vw, 22px);
  object-fit: cover;
  filter: saturate(0.98) contrast(0.96);
  transform: translate3d(0, 0, 0);
}

.more-work-card:hover .more-work-card__surface::before,
.more-work-card:focus-visible .more-work-card__surface::before {
  justify-self: center;
}

.more-work-card:hover .more-work-card__surface::after,
.more-work-card:focus-visible .more-work-card__surface::after {
  justify-self: stretch;
}

.more-work-card:hover .more-work-card__surface::before,
.more-work-card:hover .more-work-card__surface::after,
.more-work-card:focus-visible .more-work-card__surface::before,
.more-work-card:focus-visible .more-work-card__surface::after {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 900px) {
  .more-work-card {
    --more-card-title-slot: clamp(22px, 5.8vw, 28px);
  }

  .more-work-card__surface::before {
    font-size: clamp(17px, 5.8vw, 25px);
  }

  .more-work-card__surface::after {
    font-size: 14px;
    line-height: 1.28;
  }
}

.more-work-card--lime {
  --card-bg: transparent;
  --card-back: #000;
  --card-rotate: -1deg;
  --card-start-rotate: -5deg;
}

.more-work-card--cream {
  --card-bg: transparent;
  --card-rotate: 0.5deg;
  --card-start-rotate: 4deg;
}

.more-work-card--coral {
  --card-bg: transparent;
  --card-rotate: 1deg;
  --card-start-rotate: 5deg;
}

.more-work-card--blue {
  --card-bg: transparent;
  --card-rotate: -0.8deg;
  --card-start-rotate: -4deg;
}

.more-work-card--mint {
  --card-bg: transparent;
  --card-rotate: 0.75deg;
  --card-start-rotate: 3deg;
}

.more-work-card--sand {
  --card-bg: transparent;
  --card-rotate: -0.5deg;
  --card-start-rotate: -3deg;
}

/* 卡片堆叠区：固定 400×278，居中于画廊 40% 高度处；与 .portfolio-drag-hit 同尺寸叠放 */
.section-portfolio .portfolio-cards {
  position: absolute;
  width: 400px;
  height: 278px;
  top: 40%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 1;
}

.section-portfolio .portfolio-cards li {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  text-align: center;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--radius-card);
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
  will-change: transform;
  backface-visibility: hidden;
}

.section-portfolio .portfolio-drag-hit {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate3d(-50%, -50%, 0);
  width: 400px;
  height: 278px;
  z-index: 3;
  cursor: grab;
  touch-action: none;
  border-radius: var(--radius-card);
}

.section-portfolio .portfolio-drag-hit:active {
  cursor: grabbing;
}

.section-portfolio .portfolio-actions {
  position: absolute;
  bottom: clamp(8px, 2vh, 32px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  z-index: 4;
}

.section-portfolio .portfolio-prev,
.section-portfolio .portfolio-next {
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-text);
}

.section-portfolio .portfolio-prev:hover,
.section-portfolio .portfolio-next:hover {
  border-color: var(--color-muted);
  color: var(--color-text);
}

.section-portfolio .portfolio-drag-proxy {
  visibility: hidden;
  position: absolute;
  width: 1px;
  height: 1px;
}

.portfolio-featured__head {
  align-self: center;
  margin: 0;
  margin-bottom: 0;
  box-sizing: border-box;
}

.portfolio-featured__head h2 {
  margin: 0;
  font-family: var(--title-font);
  font-size: var(--portfolio-title-size);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: 0;
  color: var(--color-title);
  text-transform: uppercase;
}

.play-title {
  --play-title-green: #9cff2f;
  --play-title-pink: #ff9ed4;
  --play-title-cream: #f8f7ef;
  --play-title-blue: #5fd4f2;
  position: relative;
  display: inline-block;
  cursor: default;
  transform: translateZ(0);
}

.play-title__char,
.play-title__fire-group,
.play-title__resume-group,
.play-title__space {
  display: inline-block;
  transform-origin: 50% 76%;
}

.play-title__char,
.play-title__fire-group,
.play-title__resume-group {
  position: relative;
  z-index: 2;
  color: currentColor;
  text-shadow: 0 0 0 rgba(15, 23, 42, 0);
  transition:
    color 0.2s ease,
    text-shadow 0.2s ease,
    transform 0.56s cubic-bezier(0.18, 1.32, 0.28, 1);
  transition-delay: calc(var(--title-char-index) * 13ms);
  will-change: transform;
}

.play-title__fire-group {
  vertical-align: baseline;
}

.play-title__resume-group {
  width: 0.66em;
  height: 0.8em;
  margin: 0 0.14em 0 0.03em;
  vertical-align: -0.02em;
}

.play-title__fire-group .play-title__char,
.play-title__resume-group .play-title__char {
  position: relative;
  z-index: 2;
  transition: none;
  transform: none;
}

.play-title__sticker {
  z-index: 1;
  display: block;
  pointer-events: none;
  transform-origin: 50% 78%;
  transition:
    filter 0.2s ease,
    transform 0.56s cubic-bezier(0.18, 1.32, 0.28, 1);
  will-change: transform;
}

.play-title__sticker img {
  display: block;
  width: 100%;
  height: auto;
}

.play-title__sticker--design-fire {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0.78em;
  width: 0.64em;
  transform: translate3d(-50%, 0.08em, 0) rotate(1deg);
}

.play-title__sticker--light-bulb {
  position: absolute;
  z-index: 3;
  left: 50%;
  bottom: 0.68em;
  width: 0.92em;
  transform: translate3d(-50%, 0, 0) rotate(1deg);
}

.play-title__sticker--work-face {
  position: relative;
  z-index: 2;
  display: inline-block;
  pointer-events: auto;
  width: 0.72em;
  height: 0.78em;
  margin: 0 -0.06em 0 0.08em;
  vertical-align: -0.1em;
  transform: translate3d(0.2em, -0.08em, 0) rotate(-2deg);
}

.play-title__sticker--work-face img {
  position: absolute;
  left: 50%;
  bottom: -0.08em;
  width: 1.48em;
  max-width: none;
  transform: translateX(-50%);
}

.play-title__sticker--resume-eyes {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 0;
  width: 0.84em;
  height: 0.84em;
  overflow: visible;
  pointer-events: auto;
  transform: translate3d(-50%, 0, 0) rotate(2deg);
}

.play-title__sticker--resume-eyes img {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0.96em;
  max-width: none;
  transform: translateX(-50%);
}

.play-title:has(.play-title__char:hover) .play-title__fire-group,
.play-title:has(.play-title__sticker--work-face:hover) .play-title__fire-group,
.play-title.is-hovering .play-title__fire-group {
  transform:
    translate3d(var(--title-char-drift), -0.03em, 0)
    rotate(calc(var(--title-char-rotate) * 0.6))
    scaleX(0.92)
    scaleY(1.08);
}

.play-title:has(.play-title__char:hover) .play-title__resume-group,
.play-title:has(.play-title__sticker--resume-eyes:hover) .play-title__resume-group,
.play-title.is-hovering .play-title__resume-group {
  transform:
    translate3d(var(--title-char-drift), -0.05em, 0)
    rotate(calc(var(--title-char-rotate) * 0.55))
    scaleX(0.98)
    scaleY(1.04);
}

.play-title:has(.play-title__char:hover) .play-title__fire-group .play-title__sticker--design-fire,
.play-title:has(.play-title__sticker--work-face:hover) .play-title__fire-group .play-title__sticker--design-fire,
.play-title.is-hovering .play-title__fire-group .play-title__sticker--design-fire {
  filter: saturate(1.1);
  transform: translate3d(-50%, 0, 0) rotate(7deg) scale(1.05);
}

.play-title:has(.play-title__char:hover) .play-title__fire-group .play-title__sticker--light-bulb,
.play-title:has(.play-title__sticker--work-face:hover) .play-title__fire-group .play-title__sticker--light-bulb,
.play-title.is-hovering .play-title__fire-group .play-title__sticker--light-bulb {
  filter: saturate(1.1);
  transform: translate3d(-50%, 0, 0) rotate(calc(var(--title-char-rotate) * 0.6)) scale(1.05);
}

.play-title:has(.play-title__char:hover) .play-title__sticker--work-face,
.play-title:has(.play-title__sticker--work-face:hover) .play-title__sticker--work-face,
.play-title.is-hovering .play-title__sticker--work-face {
  filter: saturate(1.08);
  transform:
    translate3d(calc(var(--title-char-drift) + 0.08em), -0.12em, 0)
    rotate(calc(var(--title-char-rotate) * -1))
    scale(1.04);
}

.play-title:has(.play-title__char:hover) .play-title__sticker--resume-eyes,
.play-title:has(.play-title__sticker--resume-eyes:hover) .play-title__sticker--resume-eyes,
.play-title.is-hovering .play-title__sticker--resume-eyes {
  filter: saturate(1.08);
  transform:
    translate3d(-50%, -0.04em, 0)
    rotate(calc(var(--title-char-rotate) * -0.7))
    scale(1.06);
}

.play-title:has(.play-title__char:hover) .play-title__char,
.play-title:has(.play-title__sticker--work-face:hover) .play-title__char,
.play-title:has(.play-title__sticker--resume-eyes:hover) .play-title__char,
.play-title.is-hovering .play-title__char {
  transform:
    translate3d(var(--title-char-drift), -0.085em, 0)
    rotate(var(--title-char-rotate))
    scaleX(1.03)
    scaleY(0.96);
}

.play-title:has(.play-title__char:hover) .play-title__char:nth-of-type(4n + 2),
.play-title:has(.play-title__sticker--work-face:hover) .play-title__char:nth-of-type(4n + 2),
.play-title.is-hovering .play-title__char:nth-of-type(4n + 2) {
  transform:
    translate3d(calc(var(--title-char-drift) * -1), 0.025em, 0)
    rotate(calc(var(--title-char-rotate) * -1))
    scaleX(0.96)
    scaleY(1.06);
}

.play-title:has(.play-title__char:hover) .play-title__char:nth-of-type(5n + 3),
.play-title:has(.play-title__sticker--work-face:hover) .play-title__char:nth-of-type(5n + 3),
.play-title.is-hovering .play-title__char:nth-of-type(5n + 3) {
  transform:
    translate3d(var(--title-char-drift), -0.03em, 0)
    rotate(calc(var(--title-char-rotate) * 0.6))
    scaleX(0.92)
    scaleY(1.08);
}

.play-title:has(.play-title__char:hover) .play-title__char:nth-of-type(7n),
.play-title:has(.play-title__sticker--work-face:hover) .play-title__char:nth-of-type(7n),
.play-title.is-hovering .play-title__char:nth-of-type(7n) {
  transform:
    translate3d(calc(var(--title-char-drift) * 1.4), -0.07em, 0)
    rotate(calc(var(--title-char-rotate) * 1.25))
    scaleX(1.06)
    scaleY(0.94);
}

.portfolio-featured__head p {
  margin: 14px 0 0;
  color: var(--color-soft-text);
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: 500;
  line-height: 1.2;
}

.portfolio-featured {
  --featured-card-w: min(430px, 28vw);
  --featured-gap: clamp(24px, 4vw, 72px);
  align-self: center;
  margin-left: 0;
  box-sizing: border-box;
  touch-action: pan-y pinch-zoom;
  transform: none;
}

.portfolio-featured[data-portfolio-featured-layout="pending"] .portfolio-featured__stage {
  opacity: 0;
}

.portfolio-featured[data-portfolio-featured-layout="ready"] .portfolio-featured__stage {
  opacity: 1;
  transition: opacity 0.18s ease-out;
}

.portfolio-featured__stage > [data-featured-card] {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.portfolio-featured__track {
  align-items: flex-start;
  display: flex;
  gap: var(--featured-gap);
  height: 100%;
  width: max-content;
  will-change: transform;
}

.portfolio-featured__cell {
  --featured-cell-offset: 0;
  flex: 0 0 var(--featured-card-w);
  position: relative;
  width: var(--featured-card-w);
  aspect-ratio: 1 / 1;
  padding: 0;
  border: 0;
  cursor: pointer;
  text-decoration: none;
  overflow: visible;
  opacity: 1;
  pointer-events: auto;
  transform:
    translate3d(var(--featured-cell-x, 0px), var(--featured-cell-y, 0px), 0)
    rotate(var(--featured-rotation, 0deg));
  transform-origin: center;
  transition: filter 0.7s ease;
  will-change: transform;
}

.portfolio-featured.is-loop-resetting .portfolio-featured__cell {
  transition: none;
}

.portfolio-featured__media {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-card);
  background: #f8fafc;
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.1);
  overflow: hidden;
  transition:
    transform 0.7s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.6s ease,
    filter 0.6s ease,
    box-shadow 0.6s ease;
}

.portfolio-featured__tilt {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-card);
  transform: none;
  transform-origin: center;
}

.portfolio-featured__cell img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.portfolio-featured__description {
  position: absolute;
  inset: auto 12px 12px;
  z-index: 2;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, 0.42);
  border-radius: 14px;
  background: rgba(15, 23, 42, 0.78);
  color: #fff;
  font-family: var(--body-font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  pointer-events: none;
}

.portfolio-featured__cell.is-active .portfolio-featured__description {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .portfolio-featured__description {
    font-size: 12px;
  }
}

.portfolio-featured__badge {
  position: absolute;
  left: 50%;
  top: calc(100% + 16px);
  transform: translateX(-50%) translateY(var(--featured-badge-y, 14px))
    scale(var(--featured-badge-scale, 0.94));
  min-width: 0;
  min-height: auto;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: #d9d9d9;
  color: var(--color-title);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  opacity: var(--featured-badge-opacity, 0);
  filter: blur(var(--featured-badge-blur, 0.8px));
  transition:
    transform 0.7s cubic-bezier(0.23, 1, 0.32, 1),
    filter 0.55s ease,
    background-color 0.4s ease;
  will-change: transform, opacity;
}

.portfolio-featured__cell.is-active {
  z-index: 2;
  filter: none;
}

.portfolio-featured__actions {
  display: none;
}

.portfolio-featured__title,
.portfolio-featured__nav {
  font: inherit;
  border: 1px solid var(--color-line);
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

.portfolio-featured__title {
  min-width: 118px;
  min-height: 36px;
  padding: 8px 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-text);
  color: var(--color-on-dark);
  font-family: var(--body-font);
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  text-decoration: none;
  align-items: center;
  justify-content: center;
  display: inline-flex;
}

.portfolio-featured__nav {
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  display: none;
}

.portfolio-featured__title:hover,
.portfolio-featured__nav:hover {
  transform: translateY(-1px);
}

.portfolio-featured__nav:hover {
  border-color: var(--color-muted);
}

.section-portfolio.portfolio-cards-section--reduced {
  height: auto;
  max-height: none;
  min-height: 0;
  overflow: visible;
}

.section-portfolio.portfolio-cards-section--reduced .portfolio-gallery {
  min-height: auto;
  flex: none;
  padding: clamp(48px, 8vw, 64px) 0;
}

.section-portfolio.portfolio-cards-section--reduced .portfolio-cards {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  max-width: min(1200px, calc(100% - 48px));
  height: auto;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.section-portfolio.portfolio-cards-section--reduced .portfolio-cards li {
  position: relative;
  width: min(18rem, 88vw);
  aspect-ratio: 4 / 3;
  height: auto;
  opacity: 1;
  transform: none;
}

.section-portfolio.portfolio-cards-section--reduced .portfolio-actions {
  position: relative;
  bottom: auto;
  left: auto;
  transform: none;
  margin-top: 24px;
  justify-content: center;
}

/* 内容区域5 #experience：最后一块，margin-bottom 同时隔开 main 与页脚 */
.section-five.works-swipe-section {
  box-sizing: border-box;
  margin-top: 0;
  margin-bottom: 0;
}

#experience {
  padding-bottom: 0;
}

.section-five.works-swipe-section .works-swipe-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
  margin-bottom: clamp(40px, 6vw, 64px);
}

.section-five.works-swipe-section .works-swipe-head__title {
  margin: 0;
  max-width: min(100%, 12ch);
  font-family: var(--title-font);
  font-size: clamp(2.5rem, 7.5vw, 4.25rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: 0;
  color: var(--color-title);
  text-transform: uppercase;
}

.section-five.works-swipe-section .works-swipe-head__intro {
  margin: 0;
  flex: 1 1 16rem;
  max-width: 26rem;
  padding-top: 0;
  font-size: 14px;
  line-height: 22px;
  min-height: calc(22px * 2);
  text-align: justify;
  text-justify: inter-ideograph;
  color: var(--color-muted);
}

.section-five.works-swipe-section .works-swipe-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.section-five.works-swipe-section .works-swipe-list > li {
  margin: 0;
  padding: 0;
}

.section-five.works-swipe-section .works-swipe-item {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(24px, 3vw, 40px);
  width: 100%;
  padding: clamp(24px, 3vw, 32px) 0;
  border-bottom: 1px solid #eeeeee;
  cursor: default;
  box-sizing: border-box;
}

.section-five.works-swipe-section .works-swipe-list > li:last-child .works-swipe-item {
  border-bottom: none;
}

.section-five.works-swipe-section .works-swipe-item__meta {
  flex: 0 0 auto;
  width: min(100%, 168px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section-five.works-swipe-section .works-swipe-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.section-five.works-swipe-section .works-swipe-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e5e7eb;
  flex-shrink: 0;
}

.section-five.works-swipe-section .works-swipe-dot--on {
  background: var(--color-text);
}

.section-five.works-swipe-section .works-swipe-item__date {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-muted);
}

.section-five.works-swipe-section .works-swipe-item__body {
  flex: 1 1 0;
  min-width: min(100%, 240px);
}

.section-five.works-swipe-section .works-swipe-item__company {
  margin: 0 0 8px;
  font-size: clamp(1rem, 2.2vw, 1.125rem);
  font-weight: 700;
  line-height: 1.35;
  color: var(--color-title);
}

.section-five.works-swipe-section .works-swipe-item__projects {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-muted);
}

.section-five.works-swipe-section img.swipeimage {
  position: fixed;
  left: 0;
  top: 0;
  width: min(350px, 70vw);
  height: min(350px, 70vw);
  object-fit: cover;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  z-index: 50;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .section-five.works-swipe-section img.swipeimage {
    display: none;
  }
}

@supports (content-visibility: auto) {
  .section-two,
  .section-three,
  .section-portfolio,
  .section-portfolio-featured {
    content-visibility: auto;
    contain-intrinsic-size: 100svh;
  }
}

@media (max-width: 768px) {
  /*
   * 手机端：模块垂直间距随视口收紧（PC 仍为 160px，仅在此断点生效）
   * 勿在 html/body 设 overflow-x: hidden —— 会破坏 position: sticky 的顶栏。
   */
  html {
    --section-gap-y-sm: clamp(32px, 7vh, 56px);
    --mobile-module-lead-gap: var(--section-gap-y-sm);
    --mobile-section-pad-y: clamp(28px, 6vh, 48px);
    --mobile-section-title-size: clamp(42px, 12vw, 58px);
    --mobile-copy-size: 13px;
    --mobile-copy-line: 20px;
    --mobile-card-gap: 24px;
    --mobile-inline-gap: 16px;
    --screen-module-height: auto;
    --screen-module-pad-y: 40px;
    --module-title-gap: clamp(18px, 5vw, 24px);
    --module-content-gap-sm: 32px;
    --module-stack-gap-sm: 24px;
    scroll-padding-top: max(
      72px,
      calc(env(safe-area-inset-top, 0px) + 56px)
    );
  }

  body {
    padding-left: env(safe-area-inset-left, 0);
    padding-right: env(safe-area-inset-right, 0);
  }

  main,
  .site-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    overflow-x: clip;
    max-width: 100%;
    /* fixed 顶栏不占文档流：safe + 栏高 + 与原 main 一致的顶距（对齐原先 sticky+padding） */
    padding-top: calc(
      env(safe-area-inset-top, 0px) + 48px + clamp(32px, 6vw, 56px)
    );
    padding-bottom: 0;
    box-sizing: border-box;
  }

  .container {
    width: calc(100% - 32px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
  }

  #home,
  #about,
  #works,
  #portfolio,
  #photo,
  #experience,
  #contact {
    scroll-margin-top: max(
      72px,
      calc(env(safe-area-inset-top, 0px) + 56px)
    );
  }

  /* sticky 在部分移动浏览器 + overflow 组合下会失效顶栏随页滚走，小屏改用 fixed */
  .navbar {
    position: fixed;
    top: max(12px, env(safe-area-inset-top, 0px));
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    width: auto;
    max-width: 100%;
    margin: 0;
    height: 48px;
    flex: none;
    justify-content: space-between;
    padding: 6px 6px 6px 5px;
    z-index: 200;
    overflow: visible;
  }

  .brand {
    flex-shrink: 0;
    min-width: 0;
    margin-right: 8px;
  }

  .brand img {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 10px;
  }

  .navbar-inner {
    gap: 8px;
  }

  .menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    font-size: 14px;
    font-weight: 500;
    flex-shrink: 0;
    color: var(--color-text);
    text-shadow: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    border: 0;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.34),
      0 8px 18px rgba(15, 23, 42, 0.08);
    outline: none;
    transition:
      background 0.24s ease,
      transform 0.24s ease,
      box-shadow 0.24s ease;
  }

  .menu-toggle:focus,
  .menu-toggle:focus-visible,
  .menu-toggle:active {
    outline: none;
    box-shadow: none;
  }

  .menu-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.14);
  }

  .menu-toggle[aria-expanded="true"]::before {
    top: calc(50% - 1px);
    transform: translateX(-50%) rotate(45deg);
  }

  .menu-toggle[aria-expanded="true"]::after {
    top: calc(50% - 1px);
    transform: translateX(-50%) rotate(-45deg);
  }

  .menu-toggle__icon svg {
    width: 20px;
    height: 20px;
  }



  .menu-wrap {
    position: fixed;
    inset: 0;
    z-index: 190;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: visible;
    max-height: none;
    pointer-events: none;
    padding:
      calc(env(safe-area-inset-top, 0px) + 92px)
      max(16px, env(safe-area-inset-right, 0px))
      0
      max(16px, env(safe-area-inset-left, 0px));
  }

  .nav-wechat-drop {
    width: 100vw;
    height: 100svh;
    z-index: 180;
  }

  .nav-wechat-drop__lanyard {
    width: 100vw;
    height: 100svh;
  }

  .menu {
    position: relative;
    width: min(100%, 380px);
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 14px 12px;
    padding: 0;
    margin: 0 auto;
    pointer-events: none;
  }

  .menu li {
    position: relative;
    list-style: none;
    opacity: 0;
    flex: 0 0 auto;
    transform: translate3d(0, 24px, 0) scale(0.2);
    transform-origin: 50% 50%;
    transition:
      transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275),
      opacity 0.24s ease,
      filter 0.3s ease;
    pointer-events: none;
    filter: blur(6px);
  }

  .menu-wrap.open .menu li {
    opacity: 1;
    pointer-events: auto;
    filter: blur(0);
  }

  .menu-wrap.open .menu li:nth-child(1) {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .menu-wrap.open .menu li:nth-child(2) {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .menu-wrap.open .menu li:nth-child(3) {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .menu-wrap.open .menu li:nth-child(4) {
    transform: translate3d(0, 0, 0) scale(1);
  }

  .menu li:nth-child(1) a {
    min-width: 150px;
    --item-rot: -8deg;
  }

  .menu li:nth-child(2) a {
    min-width: 162px;
    --item-rot: 8deg;
  }

  .menu li:nth-child(3) a {
    min-width: 170px;
    --item-rot: 8deg;
  }

  .menu li:nth-child(4) a {
    min-width: 182px;
    --item-rot: -8deg;
  }

  .menu li:nth-child(1) {
    transition-delay: 0s;
  }

  .menu li:nth-child(2) {
    transition-delay: 0.08s;
  }

  .menu li:nth-child(3) {
    transition-delay: 0.16s;
  }

  .menu li:nth-child(4) {
    transition-delay: 0.24s;
  }

  .menu a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 22px 24px;
    border-radius: 999px;
    font-size: 1.35rem;
    min-height: 88px;
    min-width: 150px;
    box-sizing: border-box;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-weight: 800;
    color: #111111;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
    transform: rotate(var(--item-rot, 0deg));
    transition:
      transform 0.24s ease,
      box-shadow 0.24s ease,
      background 0.24s ease,
      color 0.24s ease;
  }

  .menu-link__icon {
    display: none !important;
  }

  .menu-link__label {
    display: inline-flex;
  }

  .menu a:hover,
  .menu a:active {
    background: var(--nav-theme-color-soft);
    transform: rotate(var(--item-rot, 0deg)) scale(1.06);
    box-shadow: 0 8px 24px rgba(255, 106, 42, 0.12);
  }

  .menu a:active,
  .menu a[aria-current="page"] {
    color: #ffffff;
    background: var(--nav-theme-color);
    box-shadow: 0 8px 24px rgba(255, 106, 42, 0.28);
  }

  .menu a svg {
    width: 18px;
    height: 18px;
  }

  .head-hero {
  }

  .hero-nav {
    box-sizing: border-box;
    overflow: visible;
  }

  .hero-nav__text {
    font-size: clamp(1.35rem, 5.4vw, 2.1rem);
    white-space: nowrap;
    overflow: visible;
    text-overflow: unset;
    max-width: calc(50% - 12px);
    transform: none;
  }

  .hero-nav__text--left {
    margin-left: 0;
  }

  .hero-nav__text--right {
    margin-right: 0;
  }

  .hero-nav__canvas {
    inset: -0.04em;
    width: calc(100% + 0.08em);
    height: calc(100% + 0.08em);
  }

  .hero-nav__text--left .hero-nav__canvas {
    left: -0.04em;
    right: auto;
  }

  .hero-nav__text--right .hero-nav__canvas {
    left: auto;
    right: -0.04em;
  }

  .head-tracker {
    width: 100%;
    height: 100%;
  }

  .motion3d-section {
    height: min(620px, 78vh);
    min-height: 420px;
    margin: 0;
  }

  .motion3d-copy {
    left: 16px;
    bottom: 24px;
    width: calc(100% - 32px);
  }

  .motion3d-copy h2 {
    font-size: clamp(42px, 16vw, 72px);
  }

  .motion3d-status {
    margin-top: 14px;
  }

  .section-two {
    min-height: 0;
    gap: 0;
    padding-top: var(--mobile-section-pad-y);
    padding-bottom: var(--mobile-section-pad-y);
    margin-top: var(--mobile-module-lead-gap);
    margin-bottom: 0;
  }

  .section-two .section-two-head {
    width: 100%;
    max-width: 100%;
    padding: 0 8px;
    box-sizing: border-box;
  }

  .section-two .section-two-head img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: min(220px, 30vh);
    border-radius: 6px;
  }

  .section-two-intro {
    width: 100%;
    max-width: 100%;
    font-size: clamp(16px, 5vw, 20px);
    line-height: 1.38;
  }

  .section-two .section-two-head .section-two-intro__sticker {
    width: 1.38em;
    height: 1.38em;
    max-width: none;
    max-height: none;
    vertical-align: -0.12em;
  }

  .section-two .section-two-head .section-two-intro__sticker--avatar {
    border-radius: 8px;
  }

  .section-two .section-two-head .section-two-intro__sticker--emoji {
    width: 1.08em;
    height: 1.08em;
    vertical-align: -0.08em;
  }

  .section-two .logo-wall {
    margin-top: var(--module-content-gap-sm);
    position: relative;
    width: 100%;
    height: 120px;
    max-height: min(240px, 32vh);
    padding-bottom: 0;
    overflow: hidden;
    box-sizing: border-box;
  }

  .section-two .logo-wall img {
    width: 30px;
    height: 30px;
    opacity: 0;
  }

  @media (max-width: 480px) {
    .section-two .section-two-head {
      padding: 0;
    }

    .section-two-intro {
      font-size: clamp(16px, 5vw, 18px);
      line-height: 1.42;
    }

    .section-two .section-two-head .section-two-intro__sticker {
      width: 1.28em;
      height: 1.28em;
      vertical-align: -0.1em;
    }

    .section-two .section-two-head .section-two-intro__sticker--emoji {
      width: 1em;
      height: 1em;
      vertical-align: -0.06em;
    }
  }
  .section-three {
    min-height: 0;
    margin-top: 0;
    margin-bottom: 0;
    gap: var(--mobile-card-gap);
    padding-top: var(--mobile-section-pad-y);
    padding-bottom: var(--mobile-section-pad-y);
    padding-left: 0;
    padding-right: 0;
  }

  .section-three .photo-top,
  .section-portfolio .portfolio-top {
    display: block;
    width: 100%;
    max-width: 100%;
    flex-shrink: 0;
  }

  .section-three .photo-top {
    font-size: var(--mobile-section-title-size);
    margin-top: 0;
    box-sizing: border-box;
    padding-top: 0.34em;
  }

  .section-portfolio .portfolio-top {
    font-size: var(--mobile-section-title-size);
    box-sizing: border-box;
  }

  .section-portfolio.portfolio-cards-section {
    --portfolio-bounce-card-size: clamp(130px, 36vw, 200px);
    --portfolio-bounce-stage-height: calc(var(--portfolio-bounce-card-size) * 1.62);
    content-visibility: visible;
    contain-intrinsic-size: auto;
    justify-content: flex-start;
    gap: clamp(8px, 2vh, 16px);
    min-height: 0;
    height: auto;
    padding-top: var(--mobile-section-pad-y) !important;
    padding-bottom: var(--mobile-section-pad-y) !important;
    margin-bottom: 0 !important;
  }

  .section-portfolio.portfolio-cards-section .portfolio-top {
    padding-top: 0 !important;
    line-height: 0.9;
  }

  .section-portfolio .portfolio-gallery--bounce {
    height: var(--portfolio-bounce-stage-height) !important;
    min-height: var(--portfolio-bounce-stage-height) !important;
    align-items: center;
    overflow: visible !important;
    padding-top: clamp(8px, 2vh, 16px);
    padding-bottom: clamp(14px, 3.2vh, 24px);
  }

  .section-portfolio .portfolio-gallery--more-work {
    min-height: 0 !important;
    padding: clamp(18px, 4vh, 30px) max(18px, env(safe-area-inset-left, 0px)) clamp(34px, 6vh, 52px) max(18px, env(safe-area-inset-right, 0px));
    align-items: flex-start;
  }

  .more-work-grid {
    width: min(100%, 430px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 5vw, 28px);
  }

  .more-work-card {
    border-radius: clamp(16px, 5vw, 24px);
  }

  .more-work-card:hover,
  .more-work-card:focus-visible {
    transform:
      translate3d(var(--more-card-x), calc(var(--more-card-y) - 10px), 0)
      rotate(var(--card-rotate, 0deg))
      scale(1.025);
  }

  .section-three .photo-content {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
    gap: 0;
  }

  .section-three .photo-content .photo-meta {
    align-items: flex-start;
    width: auto;
    min-width: 0;
    padding: 0;
    margin: 0 var(--mobile-inline-gap);
  }

  .section-three .photo-content .photo-meta dt,
  .section-three .photo-content .photo-meta dd {
    text-align: left;
  }

  .section-three .photo-hover-hitbox,
  .section-three .photo-images {
    width: calc(var(--photo-card-width) * 0.7);
    height: calc(var(--photo-card-height) * 0.7);
    max-width: none;
    aspect-ratio: auto;
    margin: 0;
    border-radius: var(--radius-card);
  }

  .section-three .photo-hover-hitbox {
    cursor: default;
  }

  .section-three .photo-hover-hitbox .photo-images {
    width: 100%;
    height: 100%;
  }

  .section-three .photo-images .photo-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .section-three .photo-content-bottom {
    margin-top: 0;
    margin-bottom: 0;
    max-width: 100%;
    padding: 0;
  }

  .section-three .photo-content-bottom p {
    font-size: var(--mobile-copy-size);
    line-height: var(--mobile-copy-line);
  }

  /* 手机：与 PC 同比例；宽度不超过版心，高度随比例 */
  .section-portfolio .portfolio-cards,
  .section-portfolio .portfolio-drag-hit {
    width: min(400px, calc(100% - 32px));
    height: auto;
    aspect-ratio: 400 / 278;
  }

  /* 手机允许横向拖拽切卡 */
  .section-portfolio .portfolio-drag-hit {
    touch-action: pan-x;
  }

  .section-portfolio .portfolio-cards li {
    font-size: clamp(1.25rem, 6vw, 2rem);
  }

  .section-portfolio .portfolio-actions {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
    bottom: max(12px, env(safe-area-inset-bottom, 0px));
    padding: 0 16px 4px;
    box-sizing: border-box;
    max-width: 100%;
  }

  .section-portfolio .portfolio-prev,
  .section-portfolio .portfolio-next {
    min-height: 44px;
    min-width: 0;
    padding: 8px 14px;
    font-size: 13px;
    white-space: nowrap;
  }

  .portfolio-featured__head p {
    margin-top: 10px;
    font-size: clamp(15px, 4.3vw, 18px);
  }

  .mydesign-morph__first {
    gap: clamp(10px, 2.8vh, 22px);
    justify-content: flex-start;
    min-height: auto;
    padding: var(--mobile-section-pad-y) 0 var(--mobile-section-pad-y);
    box-sizing: border-box;
  }

  .portfolio-featured__head {
    min-height: 0;
    padding-top: 0;
  }

  #portfolioFeaturedTitle {
    padding-top: 0 !important;
    font-size: var(--mobile-section-title-size) !important;
    line-height: 0.9 !important;
  }

  .portfolio-featured {
    --featured-card-w: min(220px, 58vw);
    --featured-gap: clamp(20px, 6vw, 44px);
    min-height: 0;
    height: auto;
    overflow: visible;
    touch-action: pan-y pinch-zoom;
  }

  .portfolio-featured__stage {
    overflow: visible;
    height: clamp(320px, 82vw, 420px) !important;
    margin-top: clamp(12px, 2.8vh, 22px);
  }

  .portfolio-featured__cell {
    border-radius: var(--radius-card);
  }

  .portfolio-featured__media {
    border-radius: var(--radius-card);
  }

  .portfolio-featured__badge {
    min-width: 0;
    min-height: auto;
    padding: 8px 16px;
    top: calc(100% + 16px);
    font-size: 14px;
  }

  .section-five.works-swipe-section {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: var(--mobile-section-pad-y);
    padding-bottom: var(--mobile-section-pad-y);
    padding-left: 0;
    padding-right: 0;
  }

  /* 手机端统一通栏，避免标题区与 intro 左右挤压 */
  .section-five.works-swipe-section .works-swipe-head {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    width: 100%;
  }

  .section-five.works-swipe-section .works-swipe-head__title {
    max-width: none;
    width: 100%;
    text-align: center;
    font-size: clamp(2rem, 10vw, 2.75rem);
  }

  .section-five.works-swipe-section .works-swipe-head__intro {
    flex: 0 1 auto;
    max-width: none;
    width: 100%;
    font-size: var(--mobile-copy-size);
    line-height: var(--mobile-copy-line);
    min-height: 0;
    text-align: left;
  }

  .section-five.works-swipe-section .works-swipe-item {
    flex-direction: column;
    padding: 16px 0;
    gap: 16px;
  }

  .section-five.works-swipe-section .works-swipe-item__meta {
    gap: 8px;
    width: 100%;
  }

  .section-five.works-swipe-section img.swipeimage {
    display: none !important;
  }

}

.click-surprise-layer {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: none;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
}

.click-surprise-burst {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 1px;
  animation: click-surprise-lifetime 1.45s ease forwards;
}

.click-surprise-sticker {
  position: absolute;
  left: 0;
  top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  font-size: 20px;
  line-height: 1;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.22));
  transform:
    translate3d(var(--burst-start-x), var(--burst-start-y), 0)
    scale(0.62)
    rotate(0deg);
  opacity: 0;
  animation: click-surprise-pop 1.28s cubic-bezier(0.22, 0.82, 0.28, 1) forwards;
  animation-delay: var(--burst-delay);
  will-change: transform, opacity;
  -webkit-user-select: none;
  user-select: none;
}

.click-surprise-bubble {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 118px;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(6, 8, 15, 0.62);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.24);
  color: rgba(255, 255, 255, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transform:
    translate3d(calc(-50% + var(--bubble-x)), -50%, 0)
    rotate(calc(var(--bubble-rotate) * -0.45))
    scale(0.92);
  animation: click-surprise-bubble 1.32s cubic-bezier(0.22, 0.82, 0.28, 1) forwards;
  animation-delay: var(--bubble-delay);
  will-change: transform, opacity;
  -webkit-user-select: none;
  user-select: none;
}

@keyframes click-surprise-pop {
  0% {
    opacity: 0;
    transform:
      translate3d(var(--burst-start-x), var(--burst-start-y), 0)
      scale(0.9)
      rotate(0deg);
  }
  12% {
    opacity: 1;
    transform:
      translate3d(calc(var(--burst-x) * 0.18), calc(var(--burst-y) * 0.18 - 8px), 0)
      scale(0.98)
      rotate(calc(var(--burst-rotate) * 0.18));
  }
  100% {
    opacity: 0;
    transform:
      translate3d(calc(var(--burst-x) * 1.12), calc(var(--burst-y) * 1.12 - 42px), 0)
      scale(0.8)
      rotate(calc(var(--burst-rotate) * 1.35));
  }
}

@keyframes click-surprise-bubble {
  0% {
    opacity: 0;
    transform:
      translate3d(calc(-50% + var(--bubble-x)), -50%, 0)
      rotate(calc(var(--bubble-rotate) * -0.2))
      scale(0.98);
  }
  12% {
    opacity: 1;
    transform:
      translate3d(calc(-50% + var(--bubble-x) + var(--bubble-drift-x) * 0.14), calc(-50% + var(--bubble-y) * 0.18), 0)
      rotate(calc(var(--bubble-rotate) * 0.2))
      scale(1);
  }
  100% {
    opacity: 0;
    transform:
      translate3d(calc(-50% + var(--bubble-x) + var(--bubble-drift-x)), calc(-50% + var(--bubble-y)), 0)
      rotate(calc(var(--bubble-rotate) * 1.35))
      scale(0.96);
  }
}

@keyframes click-surprise-lifetime {
  to {
    opacity: 1;
  }
}