/* ============================================================
 * 月雅泫 · 鼠标交互布料物理系统样式 (Cloth Physics Effect)
 * 采用 真实 DOM 3D 仿射变换 + 弹性图片布料网格 (Image Cloth Mesh)
 * 覆盖卡片、图片墙、首页视频与所有交互元素，兼顾极致性能与视觉震撼
 * ============================================================ */

/* 启用 3D 空间透视，为布料形变提供真实景深感 */
.hero-section,
.projects-section,
.about-section,
.languages-section,
.video-section,
.quote-section,
.footer,
.hero-content,
.projects-grid,
.about-container,
.languages-grid,
.video-cards-container,
.image-wall-section,
.image-wall-row,
.image-wall-parallax,
.image-wall-track {
  perspective: 1200px;
  transform-style: preserve-3d;
}

/* 允许图片墙卡片在 3D 空间真实浮沉与投射，避免 contain:paint 压平成 2D 平面 */
.image-wall-row {
  contain: layout style !important;
  overflow: visible !important;
}

.image-wall-track {
  transform-style: preserve-3d !important;
}

/* 首页背景视频布料网格画布 (Hero Video WebGL Cloth Mesh) */
.hero-cloth-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  transform: translateZ(0);
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hero-cloth-canvas.cloth-ready {
  opacity: 1;
}

/* 首页基础视频层：彻底消除僵硬的整体下弹跳与倾斜，平滑接管至 WebGL 布料层 */
.hero-video {
  transform: none !important;
  transition: opacity 0.5s ease;
}

/* 卡片容器：硬件加速合成层 */
.project-card,
.language-card,
.video-card,
.developer-card,
.image-wall-card {
  will-change: transform;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

/* 消除子图片 hover 缩放与 CSS transition 导致的微抖动与图层重绘冲突 */
.project-card .project-image,
.language-card .lang-image,
.image-wall-card .image-wall-img {
  transition: none !important;
}
.project-card:hover .project-image,
.language-card:hover .lang-image {
  transform: none !important;
}
.image-wall-card {
  transition: box-shadow 0.4s ease !important;
}
.image-wall-card:hover {
  transform: none !important;
}

/* 激活形变时禁用 CSS transition，消除每帧样式更新的插值冲突与卡顿 */
.cloth-node.cloth-active,
.project-card.cloth-active,
.language-card.cloth-active,
.video-card.cloth-active,
.developer-card.cloth-active,
.image-wall-card.cloth-active {
  transition: none !important;
}

/* 彻底消除卡片图片的右侧白边：强制无背景透明 + 隐藏溢出 */
.project-card .project-image-wrapper,
.language-card .lang-image-wrap,
.avatar-wrapper .avatar-container,
.image-wall-card {
  background-color: transparent !important;
  position: relative !important;
  overflow: hidden !important;
  width: 100% !important;
}
.image-wall-card {
  width: 420px !important;
  height: 270px !important;
  flex: 0 0 auto !important;
}
@media (max-width: 768px) {
  .image-wall-card {
    width: 260px !important;
    height: 168px !important;
  }
}

/* ===== 弹性图片布料网格 (Image Cloth Mesh) ===== */
.cloth-mesh-wrapper {
  position: relative !important;
  overflow: hidden !important;
  background-color: transparent !important;
}

.cloth-img-mesh {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
  user-select: none;
  -webkit-user-select: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* 三角形网格切片单元 */
.cloth-tri {
  position: absolute;
  contain: layout style;
  transform-origin: 0 0;
  will-change: transform;
  pointer-events: none;
}

/* 静态多边形裁剪层 */
.cloth-tri-cut {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

/* 切片内部图片位图：确保填满整个容器 */
.cloth-slice-inner {
  position: absolute;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
}

/* 触觉布料视觉层（画布）：展示弹性织网、凹陷暗部与涟漪光环，完全穿透鼠标事件 */
#cloth-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 12;
  opacity: 0;
  transition: opacity 0.6s ease;
}

/* 触觉交互指示环（手指标记点）- 灵动鲜明 */
#cloth-cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  margin-top: -17px;
  border-radius: 50%;
  border: 1.5px solid rgba(160, 215, 255, 0.70);
  box-shadow:
    0 0 14px rgba(130, 195, 255, 0.45),
    inset 0 0 8px rgba(130, 195, 255, 0.25);
  pointer-events: none;
  z-index: 15;
  opacity: 0;
  transform: translate3d(-999px, -999px, 0) scale(1);
  will-change: transform, opacity;
  transition: opacity 0.25s ease;
}

/* 按压凹陷光晕 - 饱满清晰 */
#cloth-cursor-glow {
  position: fixed;
  left: 0;
  top: 0;
  width: 170px;
  height: 170px;
  margin-left: -85px;
  margin-top: -85px;
  border-radius: 50%;
  background: radial-gradient(circle,
    rgba(140, 195, 255, 0.22) 0%,
    rgba(140, 195, 255, 0.08) 45%,
    rgba(140, 195, 255, 0) 70%
  );
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 14;
  opacity: 0;
  transform: translate3d(-999px, -999px, 0) scale(1);
  will-change: transform, opacity;
  transition: opacity 0.25s ease;
}