/* ============================================================
   通灵 — Animation System
   animations.css  (Demo2 复建版 · 2026-08)
   ============================================================ */

/* ---------- 1. Reveal on Scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays for grid children */
.reveal:nth-child(1) { transition-delay: 0s; }
.reveal:nth-child(2) { transition-delay: .08s; }
.reveal:nth-child(3) { transition-delay: .16s; }
.reveal:nth-child(4) { transition-delay: .24s; }
.reveal:nth-child(5) { transition-delay: .3s; }
.reveal:nth-child(6) { transition-delay: .36s; }
.reveal:nth-child(7) { transition-delay: .42s; }
.reveal:nth-child(8) { transition-delay: .48s; }

/* ---------- 2. Brain Dot Motion ---------- */
.brain-dot {
  fill: var(--cyan);
  filter: drop-shadow(0 0 6px rgba(115, 196, 255, .6));
}

.brain-dot-purple {
  fill: var(--purple);
  filter: drop-shadow(0 0 6px rgba(112, 92, 255, .5));
}

/* Each dot travels toward center (200,200); offset = center - vertex position */
@keyframes dotPath1 {
  0%   { transform: translate(0, 0); opacity: .4; }
  25%  { opacity: 1; }
  50%  { transform: translate(121px, 70px); opacity: 1; }
  75%  { opacity: 1; }
  100% { transform: translate(0, 0); opacity: .4; }
}

@keyframes dotPath2 {
  0%   { transform: translate(0, 0); opacity: .3; }
  30%  { opacity: 1; }
  60%  { transform: translate(-121px, 70px); opacity: 1; }
  100% { transform: translate(0, 0); opacity: .3; }
}

@keyframes dotPath3 {
  0%   { transform: translate(0, 0); opacity: .4; }
  20%  { opacity: 1; }
  50%  { transform: translate(0px, -140px); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translate(0, 0); opacity: .4; }
}

@keyframes dotPath4 {
  0%   { transform: translate(0, 0); opacity: .3; }
  35%  { opacity: 1; }
  65%  { transform: translate(-121px, -70px); opacity: 1; }
  100% { transform: translate(0, 0); opacity: .3; }
}

@keyframes dotPath5 {
  0%   { transform: translate(0, 0); opacity: .4; }
  25%  { opacity: 1; }
  55%  { transform: translate(121px, -70px); opacity: 1; }
  100% { transform: translate(0, 0); opacity: .4; }
}

@keyframes dotPath6 {
  0%   { transform: translate(0, 0); opacity: .3; }
  30%  { opacity: 1; }
  60%  { transform: translate(0px, 0px); opacity: 1; }
  100% { transform: translate(0, 0); opacity: .3; }
}

@keyframes dotPath7 {
  0%   { transform: translate(0, 0); opacity: .4; }
  50%  { transform: translate(0px, 140px); opacity: 1; }
  100% { transform: translate(0, 0); opacity: .4; }
}

.dot-1 { animation: dotPath1 5.2s ease-in-out infinite; animation-delay: -0.5s; }
.dot-2 { animation: dotPath2 4.8s ease-in-out infinite; animation-delay: -1.2s; }
.dot-3 { animation: dotPath3 6.0s ease-in-out infinite; animation-delay: -2.0s; }
.dot-4 { animation: dotPath4 5.6s ease-in-out infinite; animation-delay: -0.8s; }
.dot-5 { animation: dotPath5 4.4s ease-in-out infinite; animation-delay: -1.6s; }
.dot-6 { animation: dotPath6 6.8s ease-in-out infinite; animation-delay: -2.4s; }
.dot-7 { animation: dotPath7 5.0s ease-in-out infinite; animation-delay: -1.0s; }

/* ---------- 3. Live Pulse ---------- */
@keyframes livePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .4; transform: scale(1.4); }
}

/* ---------- 4. Index Card Transitions ---------- */
.index-card {
  transition: opacity 1.2s ease, transform 0.9s cubic-bezier(.34, 1.56, .64, 1),
              filter 1.2s ease;
}

.index-card.swapping {
  opacity: 0;
  transform: scale(.88) translateY(10px);
  filter: blur(5px);
}

/* ---------- 5. Brain outline subtle pulse ---------- */
@keyframes brainPulse {
  0%, 100% { opacity: .3; }
  50%      { opacity: .5; }
}

.brain-outline {
  animation: brainPulse 4s ease-in-out infinite;
}

@keyframes lineGlow {
  0%, 100% { stroke-opacity: .15; }
  50%      { stroke-opacity: .35; }
}

.brain-line {
  animation: lineGlow 3s ease-in-out infinite;
}

/* ---------- 6. Entry accordion soft open ---------- */
@keyframes entryOpen {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.entry-card.open .entry-body {
  animation: entryOpen .3s var(--ease);
}

/* ---------- 7. Radar draw ---------- */
@keyframes radarDraw {
  from { stroke-dashoffset: 400; opacity: 0; }
  to   { stroke-dashoffset: 0; opacity: 1; }
}

.radar-shape {
  animation: radarDraw 1.2s var(--ease) forwards;
}

/* ---------- 8. Fade in up (initial load) ---------- */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.fade-in-up {
  animation: fadeInUp .8s ease forwards;
}

.fade-in-up-delay-1 { animation-delay: .15s; opacity: 0; }
.fade-in-up-delay-2 { animation-delay: .3s; opacity: 0; }
.fade-in-up-delay-3 { animation-delay: .45s; opacity: 0; }
.fade-in-up-delay-4 { animation-delay: .6s; opacity: 0; }

/* ---------- 9. Reduced Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .brain-dot,
  .brain-dot-purple {
    animation: none !important;
  }

  .index-card {
    transition: none !important;
  }

  .index-card.swapping {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .brain-outline,
  .brain-line {
    animation: none !important;
  }

  .fade-in-up {
    animation: none !important;
    opacity: 1;
  }
}