/* ============================================================
   游戏动画设计师 · 个人作品集（三屏翻页版：作品 / 技能 / 联系）
   美术风格：animal-island-ui（动物森友会风 · 温暖大地色系）
   ------------------------------------------------------------
   目录：
   01. 设计变量 & 基础重置
   02. 游戏手指光标 & 鼠标星光拖尾
   03. 页面进度条 / 按钮
   04. 导航栏
   05. 横向翻页舞台（stage / track / screen / 圆点 / 页码）
   06. 飘带标题（Ribbon）
   07. 屏幕通用元素 & 入场动效
   08. 技能经验条（充能 / 亮流 / 球头 / 完成爆点）
   09. 作品跑马灯（自动循环 + 波点墙纸卡片）
   10. 弹窗（作品视频 / 微信二维码）
   11. 联系屏（HUD 时钟 / 森林 / 海浪）
   12. 响应式 & 动效降级
   ============================================================ */

/* ===== 01. 设计变量（animal-island-ui tokens） ===== */
:root {
  --font: Nunito, 'Noto Sans SC', -apple-system, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;

  /* 主色（薄荷青绿） */
  --primary:        #19c8b9;
  --primary-hover:  #3dd4c6;
  --primary-active: #11a89b;
  --primary-bg:     #e6f9f6;

  /* 文字（温暖棕色系，禁止纯黑） */
  --text:       #794f27;
  --text-body:  #725d42;
  --text-sub:   #9f927d;
  --text-muted: #8a7b66;

  /* 背景（奶油米白，禁止冷灰） */
  --bg:         #f8f8f0;
  --bg-content: rgb(247, 243, 223);
  --bg-screen:  #2b2118;   /* 代码块同款暖深棕，用作“屏幕” */

  /* 后台 appearance 配置映射；配置缺失时保留下面的主站默认值。 */
  --page-bg-works:   #f8f8f0;
  --page-bg-skills:  #f8f8f0;
  --page-bg-contact: #f8f8f0;
  --video-card-bg:   rgb(247, 243, 223);
  --video-card-text: #725d42;
  --skill-card-bg:   rgb(247, 243, 223);
  --skill-card-text: #725d42;

  /* 边框 */
  --border:       #c4b89e;
  --border-light: #e8dcc8;
  --border-hover: #a89878;

  /* 圆角 */
  --r-sm: 12px; --r-base: 18px; --r-lg: 24px; --r-pill: 50px;

  /* 阴影（暖色调，禁止冷黑） */
  --shadow-sm:   0 2px 4px 0 rgba(61, 52, 40, .06);
  --shadow-base: 0 3px 10px 0 rgba(61, 52, 40, .10);
  --shadow-big:  0 8px 24px 0 rgba(61, 52, 40, .14);
  --shadow-btn:  #bdaea0;   /* primary 按钮 3D 厚阴影 */
  --shadow-soft: #d4c9b4;

  /* 游戏特殊色 */
  --yellow:       #ffcc00;
  --yellow-dark:  #e0b800;
  --stripe-a:     #0ec4b6;
  --stripe-b:     #01b0a7;

  /* 状态 */
  --success: #6fba2c;
  --warning: #f5c31c;
  --error:   #e05a5a;

  /* 动效 */
  --ease:   cubic-bezier(.4, 0, .2, 1);
  --d-fast: .15s;
  --d-base: .25s;
  --d-slow: .35s;

  --nav-h: 72px;
}

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

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--text-body);
  font-family: var(--font);
  font-weight: 500;
  letter-spacing: .01em;
  line-height: 1.6;
  overflow: hidden;          /* 翻屏模式：页面本身不滚动 */
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
code {
  background: var(--primary-bg);
  color: var(--primary-active);
  padding: .1em .45em;
  border-radius: 8px;
  font-size: .85em;
  font-weight: 600;
}
::selection { background: rgba(255, 204, 0, .45); color: var(--text); }

/* ===== 02. 游戏手指光标 & 星光拖尾 ===== */
.animal-cursor, .animal-cursor * {
  cursor: url('../assets/island/cursor-icon.png') 4 0, auto !important;
}
/* 按压期间由同一张手指图的 DOM 替身接管，原生 cursor 暂时隐藏。 */
html.cursor-hand-active .animal-cursor,
html.cursor-hand-active .animal-cursor * {
  cursor: none !important;
}

.cursor-press-proxy {
  position: fixed;
  z-index: 10002;
  left: 0;
  top: 0;
  width: 49px;
  height: 48px;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  contain: layout paint style;
  will-change: transform;
}
.cursor-press-proxy.is-visible {
  visibility: visible;
  opacity: 1;
}
.cursor-press-hand {
  position: absolute;
  inset: 0;
  background: url('../assets/island/cursor-icon.png') center / 49px 48px no-repeat;
  transform-origin: 4px 2px;
  transition:
    transform .09s cubic-bezier(.2, .78, .28, 1),
    filter .09s ease-out;
  will-change: transform, filter;
}
.cursor-press-proxy.is-pressed .cursor-press-hand {
  transform: translate3d(1px, 4px, 0) rotate(-7deg) scale(.9, .76);
  filter: brightness(.97) drop-shadow(0 1px 0 rgba(89, 67, 45, .28));
}

/* JS 生成的拖尾小元素：星星 / 圆点 / 叶子 */
.sparkle {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  animation: sparkle-pop .8s var(--ease) forwards;
}
.sparkle.dot  { border-radius: 50%; }
.sparkle.star {
  clip-path: polygon(50% 0%, 63% 37%, 100% 50%, 63% 63%, 50% 100%, 37% 63%, 0% 50%, 37% 37%);
}
.sparkle.leaf { border-radius: 0 100% 0 100%; }
@keyframes sparkle-pop {
  0%   { transform: translate(-50%,-50%) scale(0) rotate(0deg);   opacity: 1; }
  35%  { transform: translate(-50%,-60%) scale(1) rotate(40deg);  opacity: 1; }
  100% { transform: translate(-50%,-140%) scale(.2) rotate(160deg); opacity: 0; }
}

/* 鼠标主键按下时，在手指热点生成一圈短促点击反馈。 */
.cursor-click-effect {
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 26px;
  height: 26px;
  pointer-events: none;
  border: 3px solid rgba(25, 200, 185, .9);
  border-radius: 50%;
  background: radial-gradient(circle, #ffcc00 0 18%, rgba(255, 204, 0, .28) 20% 38%, transparent 40%);
  box-shadow: 0 0 0 2px rgba(255, 252, 244, .74);
  animation: cursor-click-pop .34s cubic-bezier(.16, .78, .24, 1) forwards;
  will-change: transform, opacity;
}
@keyframes cursor-click-pop {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
  24%  { opacity: 1; transform: translate(-50%, -50%) scale(.7); }
  58%  { opacity: .92; transform: translate(-50%, -50%) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.62); }
}

/* ===== 03. 页面进度条 / 按钮 ===== */
.page-progress {
  position: fixed;
  top: 0; left: 0;
  height: 6px;
  width: 0;
  z-index: 1001;
  border-radius: 0 6px 6px 0;
  background: var(--stripe-a);
  background-image: repeating-linear-gradient(-45deg, var(--stripe-a) 0 10px, var(--stripe-b) 10px 20px);
  background-size: 28.28px 28.28px;
  animation: stripe-scroll 1s linear infinite;
  transition: width .6s var(--ease);
}
@keyframes stripe-scroll {
  from { background-position: 0 0; }
  to   { background-position: -28.28px 0; }
}

/* 按钮：游戏按键手感（hover 上浮 / active 下压） */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 32px;
  border-radius: var(--r-pill);
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .02em;
  line-height: 1;
  transition: all var(--d-fast) var(--ease);
  will-change: transform;
  user-select: none;
}
.btn-small { height: 40px; padding: 0 22px; font-size: 14px; }

/* primary：奶油底 + 3D 厚阴影（规范：仅 primary 用厚阴影） */
.btn-primary {
  color: var(--text);
  background: var(--bg);
  border-color: var(--bg);
  box-shadow: 0 5px 0 0 var(--shadow-btn);
}
.btn-primary:hover  { transform: translateY(-1px); box-shadow: 0 6px 0 0 var(--shadow-btn); }
.btn-primary:active { transform: translateY(2px);  box-shadow: 0 1px 0 0 var(--shadow-btn); }

/* yellow：游戏黄强调按钮 */
.btn-yellow {
  color: var(--text);
  background: var(--yellow);
  border-color: var(--yellow);
  box-shadow: 0 5px 0 0 var(--yellow-dark);
}
.btn-yellow:hover  { transform: translateY(-1px); box-shadow: 0 6px 0 0 var(--yellow-dark); background: #ffd633; }
.btn-yellow:active { transform: translateY(2px);  box-shadow: 0 1px 0 0 var(--yellow-dark); }

/* ===== 04. 导航栏（翻屏模式常驻玻璃态） ===== */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 clamp(20px, 5vw, 64px);
  background: rgba(255, 252, 244, .82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-sm);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: .02em;
}
.logo-leaf { width: 26px; height: 26px; }
.logo:hover .logo-leaf { animation: icon-bounce .4s var(--ease) forwards; }
@keyframes icon-bounce {
  0%   { transform: scale(1) rotate(0deg); }
  50%  { transform: scale(1.2) rotate(-5deg); }
  100% { transform: scale(1.1) rotate(-4deg); }
}

.nav-links { display: flex; gap: 12px; margin-left: auto; }
.nav-link {
  min-width: 72px;
}
/* 当前页以高辨识度绿色显示，切屏时由按钮自身过渡平滑变色 */
.nav-link.is-active,
.nav-link.is-active:hover {
  color: #fffdf3;
  background: var(--success);
  border-color: var(--success);
  box-shadow: 0 5px 0 0 #55931f;
}
.nav-link.is-active:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 0 #55931f;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: var(--bg-content);
  border: 2px solid var(--border);
  border-radius: var(--r-sm);
  padding: 9px 8px;
}
.nav-toggle span { width: 22px; height: 2.5px; border-radius: 2px; background: var(--text-body); transition: all var(--d-slow) var(--ease); }
.nav-toggle.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle.open span:nth-child(2) { opacity: 0; }
.nav-toggle.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ===== 05. 横向翻页舞台 ===== */
.stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: var(--bg);
}
.track {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}
.screen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  contain: layout paint style;
  visibility: hidden;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  transition: none;
}
.screen.active {
  z-index: 1;
  visibility: visible;
  pointer-events: auto;
}
.screen.active.is-page-outgoing {
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}
.screen.active.is-page-entering {
  z-index: 2;
  visibility: visible;
  pointer-events: none;
  will-change: transform;
}
.screen.active.is-page-entering.is-entering-forward {
  transform: translate3d(100%, 0, 0);
}
.screen.active.is-page-entering.is-entering-backward {
  transform: translate3d(-100%, 0, 0);
}
.screen-inner {
  width: 100%;
  max-width: 1280px;
  /* 高度由 JS 以「软件技能」页原始内容高度同步，保持三页标题同一基线 */
  height: var(--aligned-screen-inner-height, auto);
  max-height: 100%;
  margin: 0 auto;
  padding: calc(var(--nav-h) + 8px) clamp(20px, 4vw, 48px) 32px;
  text-align: center;
}

/* 作品屏：极淡的波点底纹 */
#works {
  background:
    radial-gradient(circle, rgba(25, 200, 185, .05) 1.5px, transparent 1.5px) 0 0/34px 34px,
    var(--page-bg-works);
}
#skills { background: var(--page-bg-skills); }
#contact { background: var(--page-bg-contact); }

/* 右侧翻页圆点（激活变为叶子形） */
.page-dots {
  position: fixed;
  right: clamp(12px, 2.5vw, 28px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 900;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.page-dot {
  width: 12px; height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--shadow-soft);
  box-shadow: var(--shadow-sm);
  transition: all var(--d-slow) var(--ease);
  padding: 0;
}
.page-dot:hover { background: var(--primary-hover); transform: scale(1.25); }
.page-dot.active {
  background: var(--primary);
  border-radius: 0 100% 0 100%;        /* 叶子 */
  transform: rotate(45deg) scale(1.25);
  box-shadow: 0 2px 8px rgba(25, 200, 185, .5);
}

/* 左下页码指示 */
.page-counter {
  position: fixed;
  left: clamp(12px, 2.5vw, 28px);
  bottom: 20px;
  z-index: 900;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 18px;
  border-radius: var(--r-pill);
  background: rgba(255, 252, 244, .9);
  border: 2px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  color: var(--text-muted);
  font-size: .82rem;
  font-weight: 700;
}
.page-counter b { color: var(--primary-active); font-weight: 900; font-size: 1.05rem; }

/* ===== 06. 飘带标题（animal-island-ui Title 精确复刻） ===== */
.ribbon {
  /* 配色变量：--rf 正面 / --rb 燕尾 / --rk 折角 / --rt 文字 */
  --rf: #27d039; --rb: #20992a; --rk: #115017; --rt: #fff;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 2em;
  padding: 0 1.6em;
  color: var(--rt);
  font-weight: 900;
  letter-spacing: .04em;
  white-space: nowrap;
  line-height: 1;
  user-select: none;
  filter: drop-shadow(0 .08em .12em rgba(0, 0, 0, .05));
  transition: transform var(--d-slow) var(--ease);
}
.ribbon:hover { transform: rotate(-1.5deg) scale(1.03); }
.ribbon-text {
  position: relative;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  height: 2em;
  padding-top: .11em; /* CJK 光学居中 */
  color: var(--rt);
  text-shadow: 0 .04em .08em rgba(0, 0, 0, .05);
}
.ribbon-back {
  position: absolute;
  bottom: -.4em;
  width: 1.7em; height: 1.7em;
  background: var(--rb);
  z-index: 1;
}
.ribbon-back-left  { left: -.6em;  border-radius: .08em 0 0 .08em; clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 30% 50%, 0% 0%); }
.ribbon-back-right { right: -.6em; border-radius: 0 .08em .08em 0; clip-path: polygon(0% 0%, 100% 0%, 70% 50%, 100% 100%, 0% 100%); }
.ribbon-fold {
  position: absolute;
  top: calc(100% - .05em);
  width: 0; height: 0;
  border-style: solid;
  z-index: 2;
}
.ribbon-fold-left  { left: .15em;  border-width: 0 .95em .45em 0; border-color: transparent var(--rk) transparent transparent; }
.ribbon-fold-right { right: .16em; border-width: 0 0 .45em .95em; border-color: transparent transparent transparent var(--rk); }
.ribbon-front {
  position: absolute;
  inset: 0 .1em;
  background: var(--rf);
  border-radius: .2em;
  z-index: 3;
  transform: perspective(11.5em) rotateX(3deg);
  box-shadow: inset 0 -.06em 0 rgba(0, 0, 0, .05);
  pointer-events: none;
}
/* 色板变体 */
.color-app-teal   { --rf: #82d5bb; --rb: #40a880; --rk: #186048; --rt: #fff; }
.color-app-orange { --rf: #e59266; --rb: #c06a30; --rk: #7a3a10; --rt: #fff; }
.color-purple     { --rf: #b77dee; --rb: #9050d0; --rk: #5a1a9a; --rt: #fff; }

/* ===== 07. 屏幕通用元素 & 入场动效 ===== */
.screen-head { margin-bottom: clamp(24px, 4vh, 44px); }
.section-tag {
  color: var(--primary-active);
  letter-spacing: .3em;
  font-size: .8rem;
  font-weight: 800;
  margin-bottom: 16px;
}
.section-sub { margin-top: 24px; color: var(--text-muted); font-size: .95rem; font-weight: 600; }

/* 分割线（仓库原版 SVG） */
.divider {
  width: 220px;
  height: 12px;
  margin: 18px auto 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.divider-brown { background-image: url('../assets/island/divider-line-brown.svg'); }
.divider-teal  { background-image: url('../assets/island/divider-line-teal.svg'); }

/* 入场渐显（JS 在进屏时错峰加 .visible，离屏移除以复播） */
.reveal {
  opacity: 0;
  transform: scale(.95);
  transition: opacity .66s cubic-bezier(.22, .78, .25, 1), transform .72s cubic-bezier(.22, .78, .25, 1.04);
}
.reveal.visible { opacity: 1; transform: none; }

/* 标题层：飘带弹入、说明文字跟随上浮，强化每屏首次进入的层次感 */
.screen-head.visible .section-tag {
  animation: section-tag-enter .52s var(--ease) var(--reveal-delay, 0ms) backwards;
}
.screen-head.visible .ribbon {
  transform-origin: center;
  animation: ribbon-enter 1.06s cubic-bezier(.18, .86, .24, 1.04) calc(var(--reveal-delay, 0ms) + 50ms) backwards;
}
#works .ribbon {
  --ribbon-start-tilt: rotate(-14deg) skewX(-4deg);
  --ribbon-pop-tilt: rotate(2.4deg) skewX(.65deg);
  --ribbon-settle-tilt: rotate(-.7deg);
  --ribbon-rebound-tilt: rotate(.35deg) skewX(.18deg);
  --ribbon-last-tilt: rotate(-.12deg);
}
#skills .ribbon {
  --ribbon-start-tilt: rotate(13deg) skewX(4deg);
  --ribbon-pop-tilt: rotate(-2.2deg) skewX(-.65deg);
  --ribbon-settle-tilt: rotate(.6deg);
  --ribbon-rebound-tilt: rotate(-.32deg) skewX(-.16deg);
  --ribbon-last-tilt: rotate(.1deg);
}
#contact .ribbon {
  --ribbon-start-tilt: rotate(-10deg) skewY(3deg);
  --ribbon-pop-tilt: rotate(1.9deg) skewY(-.5deg);
  --ribbon-settle-tilt: rotate(-.5deg);
  --ribbon-rebound-tilt: rotate(.28deg) skewY(.12deg);
  --ribbon-last-tilt: rotate(-.08deg);
}
.screen-head.visible .section-sub,
.footer-sub.reveal.visible {
  animation: section-copy-enter .74s cubic-bezier(.2, .85, .25, 1.08) calc(var(--reveal-delay, 0ms) + 180ms) backwards;
}
.screen-head.visible .divider {
  transform-origin: center;
  animation: divider-enter .62s var(--ease) calc(var(--reveal-delay, 0ms) + 320ms) backwards;
}
@keyframes section-tag-enter {
  0%   { opacity: 0; transform: scale(.82); letter-spacing: .42em; }
  70%  { opacity: 1; transform: scale(1.01); letter-spacing: .29em; }
  100% { opacity: 1; transform: none; letter-spacing: .3em; }
}
@keyframes ribbon-enter {
  0%   { opacity: 0; transform: translateY(18px) scaleX(.12) scaleY(.22) var(--ribbon-start-tilt, rotate(-10deg)); filter: blur(8px) drop-shadow(0 .08em .12em rgba(0, 0, 0, .05)); }
  30%  { opacity: 1; transform: translateY(-5px) scaleX(1.12) scaleY(.88) var(--ribbon-pop-tilt, rotate(3deg)); filter: drop-shadow(0 .08em .12em rgba(0, 0, 0, .05)); }
  48%  { opacity: 1; transform: translateY(3px) scaleX(.93) scaleY(1.08) var(--ribbon-settle-tilt, rotate(-1deg)); filter: drop-shadow(0 .08em .12em rgba(0, 0, 0, .05)); }
  66%  { opacity: 1; transform: translateY(-2px) scaleX(1.045) scaleY(.97) var(--ribbon-rebound-tilt, rotate(.6deg)); filter: drop-shadow(0 .08em .12em rgba(0, 0, 0, .05)); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 .08em .12em rgba(0, 0, 0, .05)); }
}
@keyframes section-copy-enter {
  0%   { opacity: 0; transform: scale(.88); filter: blur(2.5px); }
  62%  { opacity: 1; transform: scale(1.01); filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes divider-enter {
  0%   { opacity: 0; transform: scaleX(.45); }
  70%  { opacity: 1; transform: scaleX(1.02); }
  100% { opacity: 1; transform: none; }
}

/* ===== 08. 技能经验条 ===== */
.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  text-align: left;
}
#skills .screen-inner {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
#skills .screen-inner::-webkit-scrollbar { display: none; }
.skill-card {
  color: var(--skill-card-text);
  background: var(--skill-card-bg);
  border: 2px solid var(--border-light);
  border-radius: 20px;
  padding: 18px clamp(20px, 3vw, 36px) clamp(18px, 2.6vw, 32px);
  transition: transform var(--d-slow) var(--ease), box-shadow var(--d-slow) var(--ease);
  /* reveal 的错峰延迟只用于进场，不能延后鼠标悬停反馈。 */
  transition-delay: 0s !important;
}
.skill-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-big); }
#skills .skill-card.reveal.visible {
  transform-origin: center bottom;
  animation: skill-card-enter .92s cubic-bezier(.22, .76, .28, 1.02) calc(var(--reveal-delay, 0ms) + 50ms) backwards;
}
@keyframes skill-card-enter {
  0%   { opacity: 0; transform: scale(.93); box-shadow: 0 0 0 rgba(25, 200, 185, 0); }
  62%  { opacity: 1; transform: scale(1.009); box-shadow: 0 5px 12px rgba(25, 200, 185, .08); }
  82%  { opacity: 1; transform: scale(.998); }
  100% { opacity: 1; transform: none; box-shadow: none; }
}
.skill-group-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--skill-card-text);
  margin-bottom: 18px;
  padding-right: 34px;
}
/* 标题旁摇摆叶子装饰 */
.title-leaf {
  position: absolute;
  right: 0;
  top: -6px;
  width: 18px; height: 18px;
  border-radius: 0 100% 0 100%;
  background: var(--success);
  animation: leaf-wiggle 2s ease-in-out infinite;
}
@keyframes leaf-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-10deg); }
  75%      { transform: rotate(10deg); }
}

.skill { margin-bottom: 22px; }
.skill:last-child { margin-bottom: 0; }
.skill-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.skill-name { font-weight: 700; color: var(--skill-card-text); }
.skill-num {
  display: inline-block;               /* 让完成弹跳 transform 生效 */
  font-size: .9rem;
  font-weight: 800;
  color: var(--skill-card-text);
  font-variant-numeric: tabular-nums;
}

/* track：沙土色 pill + 内阴影 */
.skill-track {
  position: relative;
  height: 20px;
  border-radius: 999px;
  background: var(--bg);
  border: 2px solid var(--border-light);
  box-shadow: inset 0 2px 4px rgba(114, 93, 66, .08);
  overflow: hidden;
}
/* fill：-45° 斜纹无限滚动，充能时长 1.7s 缓慢推进（涨经验感） */
.skill-fill {
  position: relative;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--stripe-a);
  background-image: repeating-linear-gradient(-45deg, var(--stripe-a) 0 10px, var(--stripe-b) 10px 20px);
  background-size: 28.28px 28.28px;
  animation: stripe-scroll 1s linear infinite;
  transition: width 1.7s cubic-bezier(.25, .8, .35, 1);
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
/* 亮流冲刺层：先于主体冲刷到位，再淡出（JS 动态注入） */
.fill-surge {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 70%, #fff 100%);
  opacity: 0;
  transition: width .95s cubic-bezier(.3, .7, .3, 1), opacity .55s ease;
  pointer-events: none;
  z-index: 2;
}
.skill.filling .fill-surge { opacity: .9; }
.skill.filled  .fill-surge { opacity: 0; }
/* 充能球头：跟随填充前沿脉动，完成后爆开消失（JS 动态注入） */
.fill-head {
  position: absolute;
  right: 4px; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 3px rgba(255, 204, 0, .9);
  transform: scale(0);
  z-index: 3;
  pointer-events: none;
}
.skill.filling .fill-head { transform: scale(1); animation: head-pulse .55s ease-in-out infinite; }
.skill.filled  .fill-head { animation: head-pop .5s var(--ease) forwards; }
@keyframes head-pulse {
  50% { box-shadow: 0 0 18px 7px rgba(255, 204, 0, .95); }
}
@keyframes head-pop {
  35%  { transform: scale(1.7); opacity: 1; }
  100% { transform: scale(0);   opacity: 0; }
}
/* 充能完成：百分比数字弹跳 */
.skill.filled .skill-num { animation: num-pop .45s var(--ease); }
@keyframes num-pop {
  40% { transform: scale(1.4); color: var(--primary-active); }
}
/* fill 内部百分比（白字 + 描边感） */
.fill-info {
  padding-right: 10px;
  color: #fff;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: .02em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .15);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .4s var(--ease) .8s;
  font-variant-numeric: tabular-nums;
}
.skill.filled .fill-info { opacity: 1; }

/* 技能 Tab（仅移动端显示，Tabs 组件风格） */
.skill-tabs {
  display: none;
  margin: 0 auto 22px;
  padding: 4px;
  gap: 4px;
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: var(--r-pill);
  width: fit-content;
}
.skill-tab {
  border: 0;
  padding: 8px 20px;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-muted);
  font-weight: 700;
  font-size: .9rem;
  transition: all var(--d-fast) var(--ease);
}
.skill-tab.active { background: #0cc0b5; color: #fff9e3; }
.skills-empty {
  margin: 0;
  color: var(--skill-card-text);
  font-size: .9rem;
  font-weight: 700;
  text-align: center;
}
.skills-empty-page {
  grid-column: 1 / -1;
  padding: 34px 20px;
  border: 2px dashed var(--border-light);
  border-radius: 20px;
  background: var(--skill-card-bg);
}

/* ===== 09. 作品轮播（自动跑马灯 + 箭头切换 + 手机滑动） ===== */
.carousel-shell {
  position: relative;
}
.carousel {
  overflow: hidden;
  border-radius: 24px;
  touch-action: pan-y;
  user-select: none;
  /* 轻微的左右渐隐，仅作可继续浏览的提示 */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.car-track {
  display: flex;
  width: max-content;
  transform: translate3d(0, 0, 0);
  transition: transform .72s cubic-bezier(.22, .75, .25, 1);
  will-change: transform;
}
.car-track.is-dragging {
  transition: none;
}
.carousel.is-grabbing .work-card {
  transform: none;
  box-shadow: var(--shadow-base);
}
.carousel-empty {
  width: min(calc(100vw - 40px), 900px);
  padding: 48px 20px;
  color: var(--video-card-text);
  border: 2px dashed var(--border-light);
  border-radius: 20px;
  background: var(--video-card-bg);
  font-weight: 700;
  text-align: center;
}
.carousel-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 2px solid var(--border-light);
  border-radius: 50%;
  color: var(--text);
  background: rgba(255, 252, 244, .96);
  box-shadow: 0 4px 0 var(--shadow-soft), var(--shadow-base);
  transform: translateY(-50%);
  transition: transform var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease), opacity var(--d-fast) var(--ease);
}
.carousel-arrow svg { width: 26px; height: 26px; fill: currentColor; }
.carousel-prev { left: -12px; }
.carousel-next { right: -12px; }
.carousel-arrow:hover:not(:disabled) {
  transform: translateY(calc(-50% - 2px)) scale(1.04);
  box-shadow: 0 6px 0 var(--shadow-soft), var(--shadow-big);
}
.carousel-arrow:active:not(:disabled) {
  transform: translateY(calc(-50% + 2px));
  box-shadow: 0 2px 0 var(--shadow-soft), var(--shadow-sm);
}
.carousel-arrow:disabled {
  opacity: .35;
  cursor: not-allowed !important;
}
/*
   有精确鼠标的设备默认收起箭头；进入整个作品视频区域，或键盘焦点
   进入轮播控件时再显示。只改透明度与指针命中，不移出 Tab 顺序。
*/
@media (hover: hover) and (pointer: fine) {
  .carousel-shell .carousel-arrow {
    opacity: 0;
    pointer-events: none;
  }
  .carousel-shell:hover .carousel-arrow,
  .carousel-shell:focus-within .carousel-arrow {
    opacity: 1;
    pointer-events: auto;
  }
  .carousel-shell:hover .carousel-arrow:disabled,
  .carousel-shell:focus-within .carousel-arrow:disabled {
    opacity: .35;
    pointer-events: none;
  }
}
.car-item {
  flex: 0 0 auto;
  /* 视频展示模块实际宽度按原尺寸放大 1/6，继续保持 16:9 比例 */
  width: 458px;
  padding: 6px 12px;
}

/*
   桌面端把作品带扩展到接近整屏宽度，并将四张卡片均分到可视区域。
   超宽屏仍以放大后的 458px 为单卡上限，避免卡片继续失控放大。
*/
@media (min-width: 1200px) {
  .carousel-shell {
    width: min(1832px, calc(100vw - 112px));
    margin-left: 50%;
    translate: -50% 0;
  }
  .car-item {
    width: min(458px, calc((100vw - 112px) / 4));
    padding-inline: 8px;
  }
}

.work-card {
  --pt: #f8a6b2;        /* 视频区悬停与标签的主题色 */
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: left;
  color: var(--video-card-text);
  background: var(--video-card-bg);
  border: 2px solid var(--border-light);
  border-radius: 20px;
  overflow: hidden;
  transition: transform var(--d-slow) var(--ease), box-shadow var(--d-slow) var(--ease);
  transition-delay: 0s !important;
  will-change: transform;
}
/* 作品区：按当前屏幕中真实可见的位置，从左到右依次出现。 */
.carousel-shell.reveal.visible .car-item.is-entry-card .work-card {
  transform-origin: center bottom;
  animation: work-card-enter .88s cubic-bezier(.22, .76, .28, 1.02) calc(var(--reveal-delay, 0ms) + var(--card-enter-delay, 0ms) + 40ms) backwards;
}
.carousel-shell.reveal.visible .car-item.is-entry-card .work-media {
  transform-origin: center;
  animation: video-screen-enter .78s cubic-bezier(.22, .76, .28, 1.02) calc(var(--reveal-delay, 0ms) + var(--card-enter-delay, 0ms) + 150ms) backwards;
}
@keyframes work-card-enter {
  0%   { opacity: 0; transform: translateX(-20px) scale(.94); }
  62%  { opacity: 1; transform: translateX(0) scale(1.009); }
  82%  { opacity: 1; transform: scale(.998); }
  100% { opacity: 1; transform: none; }
}
@keyframes video-screen-enter {
  0%   { opacity: .35; transform: scale(.94); filter: brightness(.82) saturate(.88); }
  58%  { opacity: 1; transform: scale(1.009); filter: brightness(1.05) saturate(1.02); }
  100% { opacity: 1; transform: none; filter: none; }
}

/* 六张卡共用技能模块外观，仅保留视频区与标签的主题色差异。 */
.pt-pink   { --pt: #f8a6b2; }
.pt-purple { --pt: #b77dee; }
.pt-blue   { --pt: #889df0; }
.pt-yellow { --pt: #f7cd67; }
.pt-teal   { --pt: #82d5bb; }
.pt-green  { --pt: #8ac68a; }

/* “游戏屏幕”视频区（暖深棕） */
.work-media {
  position: relative;
  flex: 0 0 auto;
  margin: 14px 14px 0;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  background:
    radial-gradient(circle, rgba(255,255,255,.05) 1.5px, transparent 1.5px) 0 0/22px 22px,
    var(--bg-screen);
  border: 3px solid #3d3028;
  overflow: hidden;
  transition: border-color var(--d-base) var(--ease);
  cursor: pointer;
}
.work-media:focus-visible {
  outline: 4px solid rgba(25, 200, 185, .52);
  outline-offset: 3px;
  border-color: var(--primary-active);
}
/* 嵌入真实视频后铺满容器 */
.work-media video, .work-media iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
  pointer-events: none;
}

.work-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.work-media.has-poster .video-placeholder {
  z-index: 1;
  color: #fff9e8;
  background: linear-gradient(180deg, rgba(32, 23, 17, .08), rgba(32, 23, 17, .48));
}
.work-media.has-poster .placeholder-text {
  color: #fff9e8;
  text-shadow: 0 1px 4px rgba(32, 23, 17, .65);
}

.video-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: #a8927a;
}
.placeholder-text { font-size: .78rem; font-weight: 700; letter-spacing: .28em; }

.play-btn {
  position: relative;
  width: 60px; height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg);
  border: 3px solid #fff;
  box-shadow: 0 4px 0 0 var(--shadow-btn);
  transition: transform var(--d-base) var(--ease), box-shadow var(--d-base) var(--ease);
}
.play-btn svg { width: 22px; height: 22px; fill: var(--primary-active); margin-left: 3px; }
/* 呼吸光环 */
.play-btn::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid rgba(255, 204, 0, .7);
  animation: pulse-ring 2s var(--ease) infinite;
}
@keyframes pulse-ring {
  from { transform: scale(1);    opacity: .9; }
  to   { transform: scale(1.55); opacity: 0; }
}

.work-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 16px 20px 20px;
  cursor: pointer;
}
.work-title { font-size: 1.15rem; font-weight: 800; color: var(--video-card-text); }
.work-desc { margin-top: 8px; color: var(--video-card-text); font-size: .9rem; font-weight: 700; }
.work-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 14px;
}
.work-tags span {
  height: 26px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: #fff;
  border: 1.5px solid transparent;
  transition: transform var(--d-fast) var(--ease);
}
/* 卡片“选中悬停”只属于有真实鼠标的电脑端，触屏不会残留粘性 hover。 */
@media (hover: hover) and (pointer: fine) {
  .work-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-big);
  }
  .work-card:hover .work-media { border-color: var(--pt); }
  .work-card:hover .play-btn {
    animation: icon-bounce .45s var(--ease) forwards;
    box-shadow: 0 6px 0 0 var(--shadow-btn);
  }
  .work-tags span:hover { transform: translateY(-2px); }
}
.tag-pink   { background: #f8a6b2; }
.tag-purple { background: #b77dee; }
.tag-blue   { background: #889df0; }
.tag-yellow { background: #f7cd67; color: var(--text-body) !important; }
.tag-teal   { background: #82d5bb; }
.tag-green  { background: #8ac68a; }

/* ===== 10. 作品视频播放弹窗 ===== */
.video-modal {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(38, 29, 23, .78);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .24s cubic-bezier(.22, .78, .25, 1),
    visibility 0s linear .24s;
}
.video-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.video-modal.is-maximized {
  padding: 0;
  background: #17110e;
}
.video-modal-dialog {
  --video-controls-fade-duration: .42s;
  --video-controls-fade-ease: cubic-bezier(.22, .61, .36, 1);
  position: relative;
  width: var(--video-dialog-width, min(1080px, calc(100vw - 48px)));
  max-height: calc(100vh - 48px);
  padding: 12px;
  overflow: hidden;
  scrollbar-width: none;
  color: var(--text);
  background: var(--bg-content);
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(31, 22, 17, .34);
  opacity: 0;
  transform: translateY(18px) scale(.96);
  transition:
    opacity .24s cubic-bezier(.22, .78, .25, 1),
    transform .32s cubic-bezier(.18, .86, .24, 1.04);
}
.video-modal-dialog::-webkit-scrollbar { display: none; }
.video-modal.is-open .video-modal-dialog {
  opacity: 1;
  transform: none;
}
.video-modal-player-shell {
  position: relative;
  width: var(--video-player-width, 100%);
  aspect-ratio: var(--video-aspect, 16 / 9);
  margin-inline: auto;
}
.video-modal-player {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle, rgba(255,255,255,.05) 1.5px, transparent 1.5px) 0 0/22px 22px,
    var(--bg-screen);
  border-radius: 16px;
}
.video-modal-dialog.is-maximized {
  width: 100vw;
  height: 100dvh;
  max-height: none;
  padding: 0;
  overflow: hidden;
  background: #17110e;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.video-modal-dialog.is-maximized .video-modal-player-shell {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.video-modal-dialog.is-maximized .video-modal-player {
  border-radius: 0;
}
.video-modal-dialog.is-maximized .video-modal-caption {
  display: none;
}
.video-modal-player video,
.video-modal-player iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
  background: #17110e;
}
.video-modal-player video {
  cursor: pointer;
}

/*
   本地视频只使用站点自己的播放控件。控制条给右下角的最大化按钮
   留出独立位置，因此两者在普通窗口与最大化窗口里都不会相互遮挡。
*/
.video-playback-controls {
  position: absolute;
  z-index: 4;
  left: 10px;
  right: 68px;
  bottom: 10px;
  min-width: 0;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 13px 5px 5px;
  color: #fff;
  background: rgba(27, 21, 18, .72);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 24px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--video-controls-fade-duration) var(--video-controls-fade-ease),
    visibility 0s linear 0s;
}
.video-playback-controls[hidden] {
  display: none;
}
.video-play-toggle {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  background: var(--primary-active);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 3px 0 rgba(0, 91, 84, .38);
  transition:
    transform var(--d-fast) var(--ease),
    box-shadow var(--d-fast) var(--ease),
    opacity var(--d-fast) var(--ease);
}
.video-play-toggle:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 0 rgba(0, 91, 84, .38);
}
.video-play-toggle:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 91, 84, .38);
}
.video-play-toggle:disabled {
  opacity: .5;
}
.video-play-toggle svg {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.video-play-toggle .video-pause-icon,
.video-play-toggle.is-playing .video-play-icon {
  display: none;
}
.video-play-toggle.is-playing .video-pause-icon {
  display: block;
}
.video-progress {
  --video-progress: 0%;
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  cursor: pointer;
}
.video-progress::-webkit-slider-runnable-track {
  height: 6px;
  background:
    linear-gradient(
      90deg,
      var(--primary-active) 0,
      var(--primary-active) var(--video-progress),
      rgba(255, 255, 255, .34) var(--video-progress),
      rgba(255, 255, 255, .34) 100%
    );
  border-radius: 999px;
}
.video-progress::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -5px;
  appearance: none;
  -webkit-appearance: none;
  background: #fffdf5;
  border: 2px solid var(--primary-active);
  border-radius: 50%;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .28);
}
.video-progress::-moz-range-track {
  height: 6px;
  background:
    linear-gradient(
      90deg,
      var(--primary-active) 0,
      var(--primary-active) var(--video-progress),
      rgba(255, 255, 255, .34) var(--video-progress),
      rgba(255, 255, 255, .34) 100%
    );
  border: 0;
  border-radius: 999px;
}
.video-progress::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #fffdf5;
  border: 2px solid var(--primary-active);
  border-radius: 50%;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .28);
}
.video-progress:disabled {
  cursor: default;
  opacity: .48;
}
.video-play-toggle:focus-visible,
.video-progress:focus-visible {
  outline: 3px solid rgba(25, 200, 185, .72);
  outline-offset: 3px;
}
.video-modal-dialog.is-maximized .video-playback-controls {
  left: max(18px, env(safe-area-inset-left));
  right: calc(max(18px, env(safe-area-inset-right)) + 58px);
  bottom: max(18px, env(safe-area-inset-bottom));
}
.video-modal-empty {
  max-width: 520px;
  padding: 32px;
  color: #d8c4aa;
  text-align: center;
}
.video-modal-empty .play-btn {
  margin: 0 auto 22px;
}
.video-modal-empty strong {
  display: block;
  color: #fff9e8;
  font-size: 1.2rem;
}
.video-modal-empty p {
  margin-top: 10px;
  color: #bba68f;
  font-size: .9rem;
}
.video-modal-caption {
  min-height: 64px;
  padding: 14px 10px 8px;
  text-align: left;
}
.video-modal-caption h2 {
  font-size: clamp(1.05rem, 2vw, 1.35rem);
}
.video-modal-caption p {
  margin-top: 6px;
  color: var(--text-sub);
  font-size: clamp(.8rem, 1.5vw, .92rem);
  font-weight: 600;
  line-height: 1.55;
}
.video-modal-close,
.video-modal-maximize,
.wechat-modal-close {
  position: absolute;
  z-index: 3;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  color: var(--text);
  background: rgba(255, 252, 244, .95);
  border: 2px solid rgba(255, 255, 255, .78);
  border-radius: 50%;
  box-shadow: 0 4px 0 rgba(114, 93, 66, .24);
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--video-controls-fade-duration, var(--d-fast))
      var(--video-controls-fade-ease, var(--ease)),
    transform var(--d-fast) var(--ease),
    box-shadow var(--d-fast) var(--ease),
    visibility 0s linear 0s;
}
.video-modal-close { top: 10px; right: 10px; }
/* 与关闭按钮对称地贴在视频画面的右下角。 */
.video-modal-maximize { right: 10px; bottom: 10px; }
.wechat-modal-close { top: 18px; right: 18px; }
.video-modal-close svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}
.wechat-modal-close svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}
.video-modal-maximize svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.video-modal-maximize .restore-icon { display: none; }
.video-modal-dialog.is-maximized .video-modal-maximize {
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
}
.video-modal-dialog.is-maximized .video-modal-maximize .maximize-icon { display: none; }
.video-modal-dialog.is-maximized .video-modal-maximize .restore-icon { display: block; }
.video-modal-dialog.is-maximized .video-modal-close {
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
}
.video-modal-close:hover,
.video-modal-maximize:hover,
.wechat-modal-close:hover {
  transform: translateY(-2px) rotate(4deg);
  box-shadow: 0 6px 0 rgba(114, 93, 66, .24);
}
.video-modal-close:active,
.video-modal-maximize:active,
.wechat-modal-close:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 rgba(114, 93, 66, .24);
}
.video-modal-control:focus-visible,
.wechat-modal-close:focus-visible {
  outline: 3px solid rgba(25, 200, 185, .62);
  outline-offset: 3px;
}
.video-modal-control:disabled {
  cursor: not-allowed;
  /* 即使视频尚未配置，也保持与关闭按钮一致的颜色外观。 */
  opacity: 1;
}

/*
   触屏播放时统一收起关闭、最大化和播放进度控件。visibility 延后到
   opacity 动画结束再切换，确保隐藏与唤出都保持柔和渐变。
*/
.video-modal-dialog.mobile-controls-hidden .video-playback-controls {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--video-controls-fade-duration) var(--video-controls-fade-ease),
    visibility 0s linear var(--video-controls-fade-duration);
}
.video-modal-dialog.mobile-controls-hidden .video-modal-control {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--video-controls-fade-duration) var(--video-controls-fade-ease),
    transform var(--d-fast) var(--ease),
    box-shadow var(--d-fast) var(--ease),
    visibility 0s linear var(--video-controls-fade-duration);
}

/* 精确鼠标设备只在指针进入视频画面时浮现控制按钮。 */
@media (hover: hover) and (pointer: fine) {
  .video-playback-controls {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
      opacity var(--video-controls-fade-duration) var(--video-controls-fade-ease),
      visibility 0s linear var(--video-controls-fade-duration);
  }
  .video-modal-player-shell:hover .video-playback-controls,
  .video-playback-controls:focus-within {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      opacity var(--video-controls-fade-duration) var(--video-controls-fade-ease),
      visibility 0s linear 0s;
  }
  .video-modal-control {
    opacity: 0;
    pointer-events: none;
  }
  .video-modal-control:disabled {
    opacity: 0;
    pointer-events: none;
  }
  .video-modal-player-shell:hover .video-modal-control,
  .video-modal-control:focus-visible {
    opacity: 1;
    pointer-events: auto;
  }
  .video-modal-player-shell:hover .video-modal-control:disabled {
    opacity: 1;
    pointer-events: none;
  }
}
body.video-modal-open .sparkle,
body.wechat-modal-open .sparkle {
  display: none;
}

/* 微信二维码弹窗：沿用作品弹窗的柔和遮罩与卡片语言 */
.wechat-modal {
  position: fixed;
  inset: 0;
  z-index: 3100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(38, 29, 23, .72);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity .24s cubic-bezier(.22, .78, .25, 1),
    visibility 0s linear .24s;
}
.wechat-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}
.wechat-modal-dialog {
  position: relative;
  width: min(440px, calc(100vw - 48px));
  max-height: calc(100vh - 48px);
  padding: 18px;
  overflow: auto;
  scrollbar-width: none;
  color: var(--text);
  background: var(--bg-content);
  border: 2px solid rgba(255, 255, 255, .78);
  border-radius: 24px;
  box-shadow: 0 24px 70px rgba(31, 22, 17, .34);
  opacity: 0;
  transform: translateY(16px) scale(.95);
  transition:
    opacity .24s cubic-bezier(.22, .78, .25, 1),
    transform .32s cubic-bezier(.18, .86, .24, 1.04);
}
.wechat-modal-dialog::-webkit-scrollbar { display: none; }
.wechat-modal.is-open .wechat-modal-dialog {
  opacity: 1;
  transform: none;
}
.wechat-modal-copy {
  padding: 4px 52px 14px;
  text-align: center;
}
.wechat-modal-copy > span {
  color: var(--primary-active);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .24em;
}
.wechat-modal-copy h2 {
  margin-top: 2px;
  font-size: 1.3rem;
}
.wechat-modal-copy p {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: .86rem;
  font-weight: 600;
}
.wechat-qr-frame {
  overflow: hidden;
  background: #fff;
  border: 2px solid var(--border-light);
  border-radius: 16px;
}
.wechat-qr-frame img {
  display: block;
  width: 100%;
  height: auto;
  user-select: none;
}
.wechat-modal-close {
  top: 18px;
  right: 18px;
}

/* ===== 11. 联系屏 ===== */
.footer-screen {
  background: linear-gradient(180deg, var(--bg) 0%, #e9f3ea 100%);
}
.footer-inner { max-width: 640px; position: relative; z-index: 2; padding-bottom: 150px; }
.footer-head { margin-bottom: 0; }
.footer-sub { margin-top: 24px; color: var(--text-muted); font-weight: 600; }
.footer-mail { margin-top: 28px; }

.socials { margin-top: 30px; display: flex; justify-content: center; gap: 18px; }
.social {
  width: 52px; height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--bg-content);
  border: 2px solid var(--border-light);
  box-shadow: 0 3px 0 0 var(--shadow-soft);
  transition: all var(--d-fast) var(--ease);
}
.social svg { width: 24px; height: 24px; fill: var(--text-body); transition: fill var(--d-fast); }
.social:hover {
  transform: translateY(-2px);
  border-color: var(--primary);
  box-shadow: 0 5px 0 0 var(--shadow-soft);
}
.social:hover svg { fill: var(--primary-active); animation: icon-bounce .4s var(--ease); }
.social:active { transform: translateY(1px); box-shadow: 0 1px 0 0 var(--shadow-soft); }

/* HUD 时钟（Time 组件风格） */
.hud-clock {
  margin: 34px auto 0;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding: 14px 30px;
  background: linear-gradient(180deg, #fff 0%, var(--bg) 100%);
  border: 3px solid #d4cfc3;
  border-radius: var(--r-base);
  box-shadow: var(--shadow-sm);
}
.hud-date {
  padding-right: 20px;
  border-right: 3px solid rgba(159, 146, 125, .35);
  text-align: left;
}
.hud-weekday {
  display: block;
  color: var(--success);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 1.5px;
}
.hud-monthday { display: block; color: #8b7355; font-weight: 800; font-size: 17px; }
.hud-time {
  color: #8b7355;
  font-weight: 900;
  font-size: 32px;
  letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
}
.hud-colon { position: relative; top: -.08em; margin: 0 1px; animation: caret-blink 1s step-end infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }

.copyright { margin-top: 30px; color: var(--text-sub); font-size: .82rem; font-weight: 600; letter-spacing: .06em; }

/* 森林剪影 + 海浪（贴在联系屏底部） */
.footer-scene {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 1;
  pointer-events: none;
}
.tree-line {
  height: 60px;
  background: url('../assets/island/footer-tree.webp') bottom center / cover no-repeat;
}
.sea {
  position: relative;
  height: 80px;
  overflow: hidden;
  background: #98d2e3;
}
.sea-wave {
  position: absolute;
  inset: 0;
  width: 200%;
  background: url('../assets/island/footer-sea.svg') left top / 50% 100% repeat-x;
}
.sea-wave-a { animation: sea-flow 16s linear infinite; }
.sea-wave-b {
  opacity: .45;
  animation: sea-flow 10s linear infinite reverse;
  transform: translateX(-25%);
}
@keyframes sea-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== 12. 响应式 & 动效降级 ===== */
@media (max-width: 980px) {
  .car-item { width: 388px; }
}

@media (max-width: 640px) {
  .nav { gap: 14px; }
  .nav-toggle { display: flex; margin-left: auto; }
  .nav-links {
    position: fixed;
    top: var(--nav-h); right: 12px; left: 12px;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    background: rgba(255, 252, 244, .97);
    border: 2px solid var(--border-light);
    border-radius: var(--r-base);
    box-shadow: var(--shadow-big);
    transform: translateY(-10px) scale(.98);
    opacity: 0;
    pointer-events: none;
    transition: all var(--d-base) var(--ease);
    z-index: 999;
  }
  .nav-links.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav-link { width: 100%; height: 46px; font-size: 1rem; text-align: center; }

  .skills-grid { grid-template-columns: 1fr; }
  .skill-tabs { display: inline-flex; }
  /* 移动端一次只显示一个分组（JS 加 .tab-hidden） */
  .skill-card.tab-hidden { display: none; }

  .carousel-arrow {
    width: 44px;
    height: 44px;
  }
  .carousel-prev { left: 4px; }
  .carousel-next { right: 4px; }
  .car-item { width: 342.67px; padding: 6px 8px; }
  .ribbon { font-size: 20px !important; }
  .hud-time { font-size: 24px; }
  .hud-clock { gap: 12px; padding: 10px 18px; }
  .page-counter { display: none; }
  .page-dots { right: 10px; gap: 14px; }
  .video-modal { padding: 12px; }
  .video-modal-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    padding: 8px;
    border-radius: 18px;
  }
  .video-modal-player { border-radius: 12px; }
  .video-modal-close { top: 10px; right: 10px; width: 40px; height: 40px; }
  .video-modal-maximize { right: 10px; bottom: 10px; width: 40px; height: 40px; }
  .video-modal-caption { min-height: 58px; padding: 11px 7px 6px; }
  .wechat-modal { padding: 12px; }
  .wechat-modal-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    padding: 12px;
    border-radius: 18px;
  }
  .wechat-modal-close { top: 12px; right: 12px; width: 40px; height: 40px; }
  .wechat-modal-copy { padding: 4px 44px 10px; }
  .wechat-modal-copy h2 { font-size: 1.15rem; }
  .wechat-qr-frame { border-radius: 12px; }
}

/* 短视口（如笔记本 1366×768）：压缩纵向空间 */
@media (max-height: 780px) {
  .screen-inner { padding-top: calc(var(--nav-h) + 4px); padding-bottom: 20px; }
  .screen-head { margin-bottom: 20px; }
  .section-tag { margin-bottom: 10px; }
  .section-sub { margin-top: 16px; font-size: .85rem; }
  .divider { display: none; }
  .ribbon { font-size: 22px !important; }
  .skill { margin-bottom: 14px; }
  .skill-group-title { margin-bottom: 14px; }
  .skill-card { padding: 14px 24px 18px; }
  .work-body { padding: 12px 16px 14px; }
  .work-desc { font-size: .82rem; }
  .footer-sub { margin-top: 14px; }
  .footer-mail { margin-top: 18px; }
  .socials { margin-top: 18px; }
  .hud-clock { margin-top: 18px; padding: 8px 20px; }
  .hud-time { font-size: 24px; }
  .copyright { margin-top: 16px; }
  .footer-inner { padding-bottom: 110px; }
  .tree-line { height: 36px; }
  .sea { height: 56px; }
}

/* 手机端仅收紧“软件 / 能力”标题区留白，百分比条尺寸保持不变。 */
@media (max-width: 640px) {
  #skills .screen-inner {
    height: 100%;
    padding-top: calc(var(--nav-h) + 4px);
    padding-bottom: 20px;
  }

  #skills .screen-head {
    margin-bottom: 20px;
  }

  #skills .section-tag {
    margin-bottom: 10px;
  }

  #skills .section-sub {
    margin-top: 16px;
  }

  #skills .skill-tabs {
    margin-bottom: 16px;
  }

  #skills .skill-card {
    padding: 12px 20px 16px;
  }

  #skills .skill-group-title {
    margin-bottom: 14px;
  }
}

/* 触屏设备：关闭星光拖尾占位（JS 同步禁用） */
@media (hover: none) {
  .sparkle,
  .cursor-click-effect,
  .cursor-press-proxy { display: none; }
  /* 触屏没有悬停态，使用手指横向拖动，不常驻显示箭头。 */
  .carousel-arrow { display: none; }
  .video-modal-caption { cursor: pointer; }
}

/* 本站默认播放完整动效；仅在 URL 加 ?motion=off 时切换为精简动效。 */
html:not(.force-motion) *,
html:not(.force-motion) *::before,
html:not(.force-motion) *::after {
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .01ms !important;
}
html:not(.force-motion) .reveal { opacity: 1; transform: none; }
html:not(.force-motion) .cursor-click-effect,
html:not(.force-motion) .cursor-press-proxy { display: none; }