/* ========================================
   页面跳转动画 - 遮罩过渡与入场效果
   ======================================== */

/* === 跳转遮罩层 === */
.transition-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse at center,
    var(--ink-black) 0%,
    var(--ink-deep) 40%,
    transparent 80%);
  transition: opacity 0.4s ease-in-out;
}

.transition-overlay.active {
  opacity: 1;
  pointer-events: all;
}

/* === 水墨晕染过渡效果 === */
.transition-overlay.ink-transition {
  background: radial-gradient(ellipse at center,
    rgba(44,44,44,0.9) 0%,
    rgba(74,74,74,0.7) 30%,
    rgba(122,122,122,0.3) 60%,
    transparent 90%);
}

/* === 红旗飘扬过渡效果 === */
.transition-overlay.red-transition {
  background: radial-gradient(ellipse at center,
    var(--nation-deep) 0%,
    var(--nation-red) 30%,
    rgba(192,57,43,0.4) 60%,
    transparent 90%);
}

/* === 信件折叠过渡效果 === */
.transition-overlay.letter-transition {
  background: linear-gradient(180deg,
    rgba(232,180,184,0.9) 0%,
    rgba(212,165,116,0.7) 50%,
    rgba(255,248,240,0.5) 100%);
}

/* === 许愿灯升空过渡效果 === */
.transition-overlay.wish-transition {
  background: radial-gradient(ellipse at bottom,
    rgba(212,165,116,0.8) 0%,
    rgba(200,162,200,0.5) 40%,
    rgba(44,44,44,0.6) 80%,
    var(--ink-black) 100%);
}

/* === 烟花花瓣过渡效果 === */
.transition-overlay.celebration-transition {
  background: radial-gradient(ellipse at center,
    rgba(192,57,43,0.8) 0%,
    rgba(212,160,23,0.5) 30%,
    rgba(232,180,184,0.3) 60%,
    transparent 90%);
}

/* === 页面内容淡入 === */
.fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out 0.3s forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === 水墨晕染展开动画 === */
@keyframes inkSpread {
  0% {
    opacity: 0;
    transform: scale(0.8);
    filter: blur(10px);
  }
  50% {
    opacity: 0.6;
    filter: blur(3px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* === 红旗飘扬动画 === */
@keyframes flagWave {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-2deg) scale(1.02);
  }
  75% {
    transform: rotate(2deg) scale(1.02);
  }
}

/* === 信封打开动画 === */
@keyframes envelopeOpen {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-180deg);
  }
}

/* === 花瓣飘落动画 === */
@keyframes petalFall {
  0% {
    opacity: 0;
    transform: translateY(-100px) translateX(0) rotate(0deg);
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(100vh) translateX(50px) rotate(360deg);
  }
}

/* === 卡片逐个淡入(stagger) === */
@keyframes cardFadeIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* === 水墨呼吸动画 === */
@keyframes inkBreath {
  0%, 100% {
    background-size: 100% 100%;
  }
  50% {
    background-size: 105% 105%;
  }
}

/* === 标题缩放入场 === */
@keyframes titleZoom {
  0% {
    opacity: 0;
    transform: scale(0.5);
    letter-spacing: 20px;
  }
  100% {
    opacity: 1;
    transform: scale(1);
    letter-spacing: 8px;
  }
}

/* === 文字逐行淡入 === */
@keyframes lineFadeIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* === 浮动动画 === */
@keyframes floatUp {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* === 微光闪烁 === */
@keyframes shimmer {
  0%, 100% {
    box-shadow: 0 0 8px rgba(212,160,23,0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(212,160,23,0.6);
  }
}

/* === 动画工具类 === */
.anim-ink-spread {
  animation: inkSpread 1.5s ease-out forwards;
}

.anim-flag-wave {
  animation: flagWave 2s ease-in-out infinite;
}

.anim-title-zoom {
  animation: titleZoom 1s ease-out forwards;
}

.anim-float {
  animation: floatUp 3s ease-in-out infinite;
}

.anim-shimmer {
  animation: shimmer 2s ease-in-out infinite;
}