/* ===== ANIMATIONS v1.0 — jubk168.com 改版 ===== */

/* ===== FADE IN (Intersection Observer 觸發) ===== */
.fade-in {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in.visible {
  opacity: 1; transform: translateY(0);
}

/* ===== STAGGER (子元素逐個進場) ===== */
.stagger > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.stagger.visible > *:nth-child(2) { transition-delay: 0.08s; }
.stagger.visible > *:nth-child(3) { transition-delay: 0.16s; }
.stagger.visible > *:nth-child(4) { transition-delay: 0.24s; }
.stagger.visible > *:nth-child(5) { transition-delay: 0.32s; }
.stagger.visible > *:nth-child(6) { transition-delay: 0.4s; }
.stagger.visible > *:nth-child(7) { transition-delay: 0.48s; }
.stagger.visible > *:nth-child(8) { transition-delay: 0.56s; }
.stagger.visible > * {
  opacity: 1; transform: translateY(0);
}

/* ===== PARTICLES (首頁 Hero) ===== */
.particles {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
}
.particle {
  position: absolute; width: 2px; height: 2px;
  background: rgba(107,92,231,0.4); border-radius: 50%;
  animation: float-up linear infinite;
}
.particle:nth-child(odd) { background: rgba(212,168,67,0.3); }
@keyframes float-up {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateY(-100vh) translateX(30px); opacity: 0; }
}

/* ===== GLOW PULSE (按讚、CTA) ===== */
@keyframes glow-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(107,92,231,0.2); }
  50% { box-shadow: 0 0 20px rgba(107,92,231,0.4); }
}
.glow-pulse { animation: glow-pulse 2s ease-in-out infinite; }

/* ===== BREATHING ARROW ===== */
@keyframes breathe {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50% { transform: translateY(8px); opacity: 1; }
}
.breathe { animation: breathe 2s ease-in-out infinite; }

/* ===== GHOST FLOAT (按讚飄出) ===== */
@keyframes ghost-float {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  100% { transform: translateY(-60px) scale(1.3); opacity: 0; }
}
.ghost-float {
  animation: ghost-float 0.8s ease-out forwards;
  position: absolute; pointer-events: none;
  font-size: 1.2rem;
}

/* ===== MAP DOT PULSE ===== */
@keyframes dot-pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.4); opacity: 1; }
}
.dot-pulse { animation: dot-pulse 2s ease-in-out infinite; }

/* ===== SUCCESS BURST (電子報訂閱成功) ===== */
@keyframes burst {
  0% { transform: scale(0.8); opacity: 0; }
  50% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
.burst { animation: burst 0.5s ease-out; }

/* ===== HOVER LIFT ===== */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  .fade-in { opacity: 1; transform: none; transition: none; }
  .stagger > * { opacity: 1; transform: none; transition: none; }
  .particle { animation: none; }
  .glow-pulse { animation: none; }
  .breathe { animation: none; }
  .dot-pulse { animation: none; }
  .hover-lift { transition: none; }
}