/* ==========================================================================
   动效优化层：在不改变原站视觉的前提下，让滚动入场与卡片/按钮交互更顺滑
   ========================================================================== */

:root {
  --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
   1. 区块滚动入场（替代原站一进页面就全部播放的 fadedown）
   -------------------------------------------------------------------------- */
.js .ch {
  opacity: 0;
  transform: translateY(-40px);
  animation: none;
  transition: opacity 0.9s var(--ease-out-soft), transform 0.9s var(--ease-out-expo);
}

.js .ch.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js .ch h2.chtitle:after {
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.8s var(--ease-out-expo) 0.15s;
}

.js .ch.is-visible h2.chtitle:after {
  transform: scaleX(1);
}

/* --------------------------------------------------------------------------
   2. 友链卡片 / 社交按钮：平滑入场 + 跟随鼠标的轻微 3D 倾斜
   -------------------------------------------------------------------------- */
.js .gate .links .item,
.js .find .links .item {
  --rx: 0deg;
  --ry: 0deg;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s var(--ease-out-soft), transform 0.55s var(--ease-out-expo),
    background-color 0.25s ease, box-shadow 0.3s ease;
}

.js .gate .links .item.is-visible {
  opacity: 0.85;
  transform: translateY(0);
}

.js .find .links .item.is-visible {
  opacity: 0.9;
  transform: translateY(0);
}

.js .gate .links .item.is-visible:hover {
  opacity: 1;
  /* 只用 2D 位移，避免 3D 变换与 backdrop-filter 同时过渡造成合成闪烁 */
  transform: translateY(-5px);
  transition: transform 0.25s var(--ease-out-soft), opacity 0.2s ease,
    box-shadow 0.3s ease;
}

.js .find .links .item.is-visible:hover {
  opacity: 1;
  transform: perspective(1000px) translateY(-10px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 0.18s ease-out, opacity 0.2s ease;
}

/* 取消原站 hover 时一次性播放的 keyframe，避免与 transform 过渡互相打断 */
.js .gate .links .item:hover,
.js .find .links .item:hover {
  animation: none;
}

.gate .links .item {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
  /* 常驻一层极淡的玻璃底，避免鼠标进入瞬间出现“全透明” */
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}

/* 液态玻璃高光：跟随鼠标位置的局部亮度，悬停时淡入 */
.gate .links .item::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 18px;
  background: radial-gradient(
      140px circle at var(--mx, 50%) var(--my, 50%),
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.05) 45%,
      transparent 72%
    ),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
}

.gate .links .item:hover::before {
  opacity: 1;
}

.gate .links .item:hover {
  border-radius: 18px;
  background-color: transparent;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  animation: none;
}

.gate .links .item .avatar img {
  transition: transform 0.35s var(--ease-out-soft);
}

.gate .links .item.is-visible:hover .avatar img {
  transform: scale(1.08);
}

/* 玻璃边缘的一圈高光与内描边 */
.gate .links .item:after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.gate .links .item:hover:after {
  opacity: 1;
}

/* 窄屏：卡片内留出内边距，让玻璃边框与头像/文字保持呼吸感 */
@media screen and (max-width: 700px) {
  .gate .links .item {
    box-sizing: border-box;
    padding: 12px;
  }

  .gate .links .item .avatar {
    margin-right: 10px;
  }
}

.find .links .item {
  overflow: hidden;
}

.find .links .item:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 5px;
  background: radial-gradient(
    180px circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.28),
    transparent 65%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.find .links .item.is-visible:hover:after {
  opacity: 1;
}

.find .links .item i {
  transition: transform 0.3s var(--ease-out-soft);
}

.find .links .item.is-visible:hover i {
  transform: translateY(-1px) scale(1.12);
}

/* 点击时的涟漪反馈 */
.find .links .item .ripple {
  position: absolute;
  z-index: 2;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: polish-ripple 0.6s ease-out forwards;
  pointer-events: none;
}

@keyframes polish-ripple {
  to {
    transform: scale(1);
    opacity: 0;
  }
}

/* 键盘可访问性 */
.links a:focus-visible .item {
  outline: 2px solid hsla(0, 0%, 100%, 0.75);
  outline-offset: 4px;
  border-radius: 5px;
}

/* --------------------------------------------------------------------------
   3. 技能进度条：滚动到可视区域后再填充（原站是加载即播放 7s）
   -------------------------------------------------------------------------- */
.about ul.skill li .progress div {
  width: var(--level, 100%);
  animation: none;
  transition: width 1.4s var(--ease-out-expo) 0.2s;
}

.js .about:not(.is-visible) ul.skill li .progress div {
  width: 0;
}

.about ul.skill li .progress div:after {
  filter: drop-shadow(0 0 4px hsla(0, 0%, 100%, 0.55));
}

/* --------------------------------------------------------------------------
   5. 全宽度自适应：取消原站 1150px 最小宽度，容器随视口伸缩
   -------------------------------------------------------------------------- */
body,
html {
  min-width: 0;
}

.container {
  width: 90%;
  max-width: 1000px;
}

@media screen and (min-width: 1400px) {
  .container {
    width: 70%;
    max-width: none;
  }
}

/* 桌面宽度：卡片均匀铺满整行并保留间隙 */
@media screen and (min-width: 1150px) {
  .gate .links .item {
    width: 29.3%;
    margin: 6px 0.5%;
    padding: 15px 1.5%;
  }

  .find .links .item {
    width: 22.6%;
  }
}

/* 701–1149px：容器变窄时卡片改为两列，避免文字被挤压溢出 */
@media screen and (min-width: 701px) and (max-width: 1149px) {
  .gate .links .item {
    width: 45.6%;
    margin: 6px 0.6%;
    padding: 15px 1.5%;
  }

  .find .links .item {
    width: 47.4%;
  }
}

/* --------------------------------------------------------------------------
   6. 页脚备案信息
   -------------------------------------------------------------------------- */
.footer p.record {
  margin-top: 22px;
  font-size: 12px;
  letter-spacing: 0.08em;
  opacity: 0.45;
}

.footer p.record .divider {
  margin: 0 10px;
  opacity: 0.5;
}

/* 窄屏：两条备案号各占一行，隐藏中间分隔符 */
@media screen and (max-width: 700px) {
  .footer p.record {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.05em;
  }

  .footer p.record .divider {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   7. 联系方式卡片
   -------------------------------------------------------------------------- */
.contact-card {
  clear: both;
  margin-top: 24px;
  padding: 20px 22px;
  line-height: 1.4;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
}

.contact-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.contact-title {
  font-size: 14px;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.9);
}

.contact-hint {
  font-size: 11px;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
}

.contact-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px 20px;
  margin-top: 16px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.contact-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 36px;
  height: 36px;
  color: #fff;
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 4px 10px rgba(0, 0, 0, 0.22);
}

.contact-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.contact-icon--mail {
  background-color: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.contact-svg {
  display: block;
  width: 22px;
  height: 22px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  gap: 2px;
}

.contact-label {
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.5);
}

.contact-value {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

a.contact-value {
  text-decoration: none;
  transition: color 0.2s ease;
}

a.contact-value:hover {
  color: #ffb59a;
  text-decoration: underline;
}

.contact-copy {
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.08);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.contact-copy:hover {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.16);
}

.contact-copy.is-copied {
  color: #8ff0a4;
  border-color: rgba(143, 240, 164, 0.4);
}

@media screen and (max-width: 1149px) {
  .contact-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 700px) {
  .contact-head {
    flex-wrap: wrap;
    gap: 4px;
  }

  .contact-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .contact-item + .contact-item {
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }
}

/* --------------------------------------------------------------------------
   8. 无障碍：尊重系统的“减少动态效果”设置
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .js .ch,
  .js .gate .links .item,
  .js .find .links .item {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .js .gate .links .item.is-visible {
    opacity: 0.85;
  }

  .js .find .links .item.is-visible {
    opacity: 0.9;
  }

  .js .ch h2.chtitle:after {
    transform: none;
    transition: none;
  }

  .about ul.skill li .progress div {
    transition: none;
  }

  .find .links .item .ripple {
    display: none;
  }
}

/* 触屏设备不做鼠标跟随倾斜 */
@media (hover: none) {
  .js .gate .links .item.is-visible:hover,
  .js .find .links .item.is-visible:hover {
    transform: none;
  }
}