/* ==========================================================
   plane.css —— 3D 立体纸飞机
   结构：#plane-wrap(透视) > .plane-3d(姿态) > 龙骨/双翼/脊线/机头
   ========================================================== */

#plane-wrap {
  position: fixed; z-index: 5;
  width: 68px; height: 68px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  perspective: 260px;                     /* 3D 透视距离，越小立体感越强 */
  filter: drop-shadow(0 0 10px rgba(167, 139, 250, 0.55)) drop-shadow(0 0 20px rgba(99, 102, 241, 0.25));
}

/* 3D 姿态：缓慢侧倾 + 俯仰，像被气流托着 */
.plane-3d {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: planeTilt 5.2s ease-in-out infinite;
  will-change: transform;
}
@keyframes planeTilt {
  0%   { transform: rotateX(16deg) rotateY(-28deg) rotateZ(-5deg); }
  50%  { transform: rotateX(-10deg) rotateY(22deg) rotateZ(6deg); }
  100% { transform: rotateX(16deg) rotateY(-28deg) rotateZ(-5deg); }
}

/* 翻滚层：飞行时由 js/plane.js 写入 --roll，绕机身纵轴左右滚转 */
.plane-roll {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transform: rotateY(var(--roll, 0deg));
  will-change: transform;
}

/* 机翼：沿中脊向两侧上折，形成真实厚度
   静止时用 CSS 呼吸明暗；飞行时（.flying）改由 --wing-*-bright 按翻滚角实时计算 */
.plane-wing {
  position: absolute; inset: 0;
  transform-origin: 50% 50%;
  backface-visibility: visible;
}
.plane-wing-l {
  clip-path: polygon(50% 2%, 1% 86%, 48% 70%);
  background: linear-gradient(152deg, #ffffff 0%, #eee9ff 42%, #b9c3f8 100%);
  transform: rotateY(34deg);
  filter: brightness(var(--wing-l-bright, 1.15));
  animation: wingLightL 5.2s ease-in-out infinite;
}
.plane-wing-r {
  clip-path: polygon(50% 2%, 99% 86%, 52% 70%);
  background: linear-gradient(208deg, #dcd4fb 0%, #a7a4ea 52%, #7b81d4 100%);
  transform: rotateY(-34deg);
  filter: brightness(var(--wing-r-bright, 0.7));
  animation: wingLightR 5.2s ease-in-out infinite;
}
/* 飞行中交给了 JS，停用 CSS 动画以免互相覆盖 */
#plane-wrap.flying .plane-wing { animation: none; }
/* 机翼随姿态变化受光，强化立体感 */
@keyframes wingLightL {
  0%, 100% { filter: brightness(1.15); }
  50%      { filter: brightness(0.68); }
}
@keyframes wingLightR {
  0%, 100% { filter: brightness(0.7); }
  50%      { filter: brightness(1.18); }
}

/* 机身龙骨：中间竖板，提供体积与阴影 */
.plane-keel {
  position: absolute; inset: 0;
  clip-path: polygon(50% 3%, 60% 100%, 50% 72%, 40% 100%);
  background: linear-gradient(180deg, #c3bef5 0%, #8578d6 55%, #5d63b4 100%);
  transform: translateZ(-2px);
  opacity: 0.95;
}

/* 中脊折痕高光 */
.plane-crease {
  position: absolute;
  left: 50%; top: 2%;
  width: 1.6px; height: 70%;
  transform: translateX(-50%) translateZ(3px);
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.35) 60%, rgba(255,255,255,0) 100%);
  border-radius: 1px;
}

/* 机头聚光 */
.plane-nose {
  position: absolute;
  left: 50%; top: 0;
  width: 12px; height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(233,213,255,0.35) 45%, rgba(233,213,255,0) 70%);
  transform: translateZ(4px);
}

/* 机身上的日期（反向旋转，保持水平可读） */
.plane-date {
  position: absolute;
  bottom: -14px; left: 50%;
  transform: translateX(-50%) rotate(calc(-1 * var(--plane-rot, 0deg)));
  font-family: 'Noto Serif SC', serif;
  font-size: 10px; font-weight: 600;
  color: rgba(224, 215, 255, 0.8);
  letter-spacing: 1px;
  white-space: nowrap;
  text-shadow: 0 0 6px rgba(139, 92, 246, 0.5);
}

/* 到达终点后的悬浮（保持机头朝向与拉远后的大小） */
@keyframes planeHover {
  0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(var(--hover-rot, 95deg)) scale(var(--hover-scale, 1)); }
  50% { transform: translate(-50%, -50%) translateY(-6px) rotate(calc(var(--hover-rot, 95deg) + 3deg)) scale(var(--hover-scale, 1)); }
}
#plane-wrap.hovering {
  animation: planeHover 3.5s ease-in-out infinite;
}

/* 移动端微调 */
@media (max-width: 480px) {
  #plane-wrap { width: 54px; height: 54px; }
}