/* ========================================
   织网 (WebWeave) - 神圣动画系统
   包含：圣光粒子、羽毛飘落、圣光扫描等
   ======================================== */

/* === 1. 圣光背景（基础层） === */
.holy-background {
  position: relative;
  min-height: 100vh;
  background: 
    linear-gradient(135deg, var(--holy-black) 0%, var(--midnight-blue) 50%, #16213e 100%),
    url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3z' fill='%230a0a0a' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
  background-blend-mode: overlay, normal;
  overflow: hidden;
}

/* === 2. 圣光粒子层 === */
.holy-background::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255, 215, 0, 0.8) 1.5px, transparent 2px),
    radial-gradient(1px 1px at 40% 70%, rgba(255, 215, 0, 0.6) 1px, transparent 2px),
    radial-gradient(2px 2px at 60% 20%, rgba(255, 215, 0, 0.7) 2px, transparent 3px),
    radial-gradient(1.5px 1.5px at 80% 50%, rgba(255, 215, 0, 0.5) 1.5px, transparent 2px),
    radial-gradient(1px 1px at 10% 80%, rgba(255, 215, 0, 0.6) 1px, transparent 2px),
    radial-gradient(1.5px 1.5px at 50% 10%, rgba(255, 215, 0, 0.4) 1.5px, transparent 2px),
    radial-gradient(1px 1px at 90% 90%, rgba(255, 215, 0, 0.5) 1px, transparent 2px),
    radial-gradient(2px 2px at 30% 50%, rgba(255, 215, 0, 0.6) 2px, transparent 3px);
  background-size: 200px 200px, 300px 300px, 400px 400px, 500px 500px, 
                   600px 600px, 250px 250px, 350px 350px, 450px 450px;
  animation: holyParticlesFloat 40s linear infinite;
  pointer-events: none;
  z-index: var(--z-background);
}

@keyframes holyParticlesFloat {
  0% { 
    background-position: 0px 0px, 0px 0px, 0px 0px, 0px 0px, 
                         0px 0px, 0px 0px, 0px 0px, 0px 0px; 
  }
  100% { 
    background-position: 200px 200px, 300px 300px, 400px 400px, 500px 500px,
                         600px 600px, 250px 250px, 350px 350px, 450px 450px; 
  }
}

/* === 3. 圣光照射层（顶部光源） === */
.holy-background::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: radial-gradient(ellipse at top center, rgba(255, 215, 0, 0.15) 0%, transparent 70%);
  pointer-events: none;
  z-index: var(--z-background);
  animation: holyLightPulse 8s ease-in-out infinite;
}

@keyframes holyLightPulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* === 4. 羽毛飘落动画（可添加到容器） === */
.feather-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-particles);
  overflow: hidden;
}

.feather {
  position: absolute;
  width: 30px;
  height: 15px;
  background: linear-gradient(135deg, var(--angel-feather) 0%, #E6D3A7 100%);
  clip-path: polygon(0% 20%, 50% 0%, 100% 20%, 80% 50%, 100% 80%, 50% 100%, 0% 80%, 20% 50%);
  opacity: 0.7;
  animation: featherFall linear forwards;
  filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.3));
}

@keyframes featherFall {
  0% {
    transform: translateY(-50px) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(100vh) translateX(50px) rotate(360deg);
    opacity: 0;
  }
}

/* 羽毛变体（不同大小和速度） */
.feather.small {
  width: 20px;
  height: 10px;
  animation-duration: 8s;
}

.feather.medium {
  width: 30px;
  height: 15px;
  animation-duration: 10s;
}

.feather.large {
  width: 40px;
  height: 20px;
  animation-duration: 12s;
}

/* === 5. 圣光扫描动画 === */
.holy-scan {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, 
    transparent 0%, 
    rgba(255, 215, 0, 0.3) 50%, 
    transparent 100%);
  pointer-events: none;
  z-index: var(--z-elevated);
  animation: holyScanMove 5s ease-out;
  opacity: 0;
}

@keyframes holyScanMove {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* === 6. 圣光爆发动画（成就、任务完成等） === */
@keyframes holyBlast {
  0% {
    transform: scale(0);
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7);
  }
  70% {
    transform: scale(2);
    opacity: 0.7;
    box-shadow: 0 0 0 30px rgba(255, 215, 0, 0);
  }
  100% {
    transform: scale(3);
    opacity: 0;
    box-shadow: 0 0 0 50px rgba(255, 215, 0, 0);
  }
}

.holy-blast {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, var(--divine-gold) 0%, transparent 70%);
  animation: holyBlast 1.2s ease-out;
  pointer-events: none;
}

/* === 7. 金字浮现动画（文本渐入） === */
@keyframes goldenTextReveal {
  0% {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.golden-reveal {
  animation: goldenTextReveal 0.8s ease-out forwards;
}

.golden-reveal-delay-1 { animation-delay: 0.1s; }
.golden-reveal-delay-2 { animation-delay: 0.2s; }
.golden-reveal-delay-3 { animation-delay: 0.3s; }
.golden-reveal-delay-4 { animation-delay: 0.4s; }
.golden-reveal-delay-5 { animation-delay: 0.5s; }

/* === 8. 盾牌震动动画（按钮点击） === */
@keyframes shieldShake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-4px); }
  40%, 80% { transform: translateX(4px); }
}

.shield-shake {
  animation: shieldShake 0.4s ease-in-out;
}

/* === 9. 盾牌裂痕动画（错误状态） === */
@keyframes shieldCrack {
  0% { 
    filter: brightness(1);
    transform: scale(1);
  }
  25% { 
    filter: brightness(0.7) drop-shadow(0 0 10px rgba(139, 0, 0, 0.8));
    transform: scale(0.95);
  }
  50% { 
    filter: brightness(1.2) drop-shadow(0 0 15px rgba(139, 0, 0, 1));
    transform: scale(1.05);
  }
  75% { 
    filter: brightness(0.8) drop-shadow(0 0 10px rgba(139, 0, 0, 0.5));
    transform: scale(0.98);
  }
  100% { 
    filter: brightness(1);
    transform: scale(1);
  }
}

.shield-crack {
  animation: shieldCrack 0.6s ease-in-out;
}

/* === 10. 圣光波纹扩散（按钮点击反馈） === */
@keyframes holyRipple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

.holy-ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 0, 0.5) 0%, transparent 70%);
  animation: holyRipple 0.6s ease-out;
  pointer-events: none;
}

/* === 11. 翅膀展开动画（等级提升） === */
@keyframes wingsSpread {
  0% {
    transform: scaleX(0) rotateY(90deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: scaleX(1) rotateY(0deg);
    opacity: 1;
  }
}

.wings-spread {
  animation: wingsSpread 1.5s var(--ease-out) forwards;
}

/* === 12. 卷轴展开动画 === */
@keyframes scrollUnroll {
  0% {
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

.scroll-unroll {
  animation: scrollUnroll 0.6s var(--ease-out) forwards;
}

/* === 13. 圣印烙印动画（保存） === */
@keyframes sealStamp {
  0% {
    transform: translateY(-100px) scale(1.5) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: translateY(0) scale(1) rotate(180deg);
    opacity: 1;
  }
  70% {
    transform: translateY(5px) scale(0.95) rotate(180deg);
  }
  100% {
    transform: translateY(0) scale(1) rotate(180deg);
    opacity: 1;
  }
}

.seal-stamp {
  animation: sealStamp 0.8s var(--ease-out) forwards;
}

/* === 14. 金币落下动画（贡献点增加） === */
@keyframes coinDrop {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  70% {
    transform: translateY(10px) rotate(720deg);
  }
  85% {
    transform: translateY(-5px) rotate(720deg);
  }
  100% {
    transform: translateY(0) rotate(720deg);
    opacity: 1;
  }
}

.coin-drop {
  animation: coinDrop 0.8s ease-out forwards;
}

/* === 15. 徽章浮现动画（成就获得） === */
@keyframes badgeEmerge {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
    filter: blur(10px);
  }
  60% {
    transform: scale(1.2) rotate(0deg);
    filter: blur(0);
  }
  80% {
    transform: scale(0.9) rotate(0deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
    filter: blur(0);
  }
}

.badge-emerge {
  animation: badgeEmerge 1.2s var(--ease-out) forwards;
}

/* === 16. 通用淡入动画 === */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  animation: fadeIn 0.5s ease-out forwards;
}

/* === 17. 通用滑入动画 === */
@keyframes slideInFromBottom {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-in-bottom {
  animation: slideInFromBottom 0.6s ease-out forwards;
}

@keyframes slideInFromTop {
  from {
    transform: translateY(-30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.slide-in-top {
  animation: slideInFromTop 0.6s ease-out forwards;
}

@keyframes slideInFromLeft {
  from {
    transform: translateX(-30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-left {
  animation: slideInFromLeft 0.6s ease-out forwards;
}

@keyframes slideInFromRight {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.slide-in-right {
  animation: slideInFromRight 0.6s ease-out forwards;
}

/* === 18. 旋转动画（加载状态） === */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate {
  animation: rotate 2s linear infinite;
}

.rotate-slow {
  animation: rotate 4s linear infinite;
}

/* === 19. 脉动动画（心跳效果） === */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.8;
  }
}

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

/* === 20. 悬浮动画（节点） === */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

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

/* === 21. 闪烁动画 === */
@keyframes blink {
  0%, 50%, 100% { opacity: 1; }
  25%, 75% { opacity: 0.3; }
}

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

/* === 22. 呼吸光效 === */
@keyframes breatheGlow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.8), 0 0 30px rgba(255, 215, 0, 0.5);
  }
}

.breathe-glow {
  animation: breatheGlow 3s ease-in-out infinite;
}

/* === 23. 加载圣杯动画 === */
@keyframes chaliceFill {
  0% {
    transform: scaleY(0);
    transform-origin: bottom;
  }
  100% {
    transform: scaleY(1);
  }
}

.chalice-fill {
  animation: chaliceFill 2s ease-out forwards;
}

/* === 24. 页面过渡动画 === */
@keyframes pageTransition {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.page-transition {
  animation: pageTransition 0.5s ease-out forwards;
}

/* === 性能优化：减少动画（低端设备） === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* === 响应式：移动端减少粒子 === */
@media (max-width: 768px) {
  .holy-background::before {
    background-image: 
      radial-gradient(1px 1px at 20% 30%, rgba(255, 215, 0, 0.6) 1px, transparent 2px),
      radial-gradient(1px 1px at 60% 70%, rgba(255, 215, 0, 0.5) 1px, transparent 2px),
      radial-gradient(1px 1px at 80% 20%, rgba(255, 215, 0, 0.5) 1px, transparent 2px);
    background-size: 300px 300px, 400px 400px, 500px 500px;
  }
}