/* =========================================
   Profile 卡片专属装饰
   ========================================= */

/* 1. 确保卡片是相对定位，方便内部绝对定位 */
.card-profile {
  position: relative;
  overflow: hidden;
  /* 防止图标飘到卡片外面 */
}

/* 让文字内容保持在最上层 */
.profile-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#开发者 {
  position: relative;
  height: 50%;
}

/* 2. 背景装饰容器 */
.profile-bg-decor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  /* 让鼠标可以直接穿透点到卡片 */
}

/* 3. 图标通用样式 */
.decor-icon {
  position: absolute;
  fill: #fff;
  opacity: 0.15;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
}

.decor-icon.game {
  width: 80px;
  right: -10px;
  top: -10px;
  transform: rotate(50deg);
  animation: floatDecor 6s ease-in-out infinite;
}

.decor-icon.internet {
  width: 60px;
  right: 20px;
  bottom: 20px;
  transform: rotate(-10deg);
  animation: floatDecor 7s ease-in-out infinite;
  animation-delay: 1s;
}

.decor-icon.chidouren {
  width: 45px;
  right: 90px;
  top: 30px;
  opacity: 0.1;
  animation: floatDecor 5s ease-in-out infinite;
  animation-delay: 2s;
}

.decor-icon.code {
  width: 100px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.05;
}

/* 5. 定义专属的上下漂浮动画 */
@keyframes floatDecor {

  0%,
  100% {
    transform: translateY(0) rotate(var(--r, 0deg));
  }

  50% {
    transform: translateY(-10px) rotate(var(--r, 0deg));
  }
}

/* 稍微修正一下上面的 rotate 逻辑，防止动画覆盖了旋转角度 */
.decor-icon.game {
  --r: 15deg;
}

.decor-icon.internet {
  --r: -10deg;
}

.decor-icon.chidouren {
  --r: -20deg;
}