/* ── Intro card ── */
.intro-card {
  text-align: center;
  padding: 1.5rem 2rem 2rem;
  overflow: hidden;
}

.intro-animation {
  width: 100%;
  max-width: 520px;
  margin: 0 auto 1rem;
}

.dendrite-svg {
  width: 100%;
  height: auto;
}

/* Branch drawing — smooth grow from zero, no repeat */
.branch.br {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  animation: draw-branch 1.8s ease-out forwards;
  animation-delay: var(--d, 0s);
}

@keyframes draw-branch {
  from { stroke-dashoffset: 300; }
  to { stroke-dashoffset: 0; }
}

/* Soma pulse */
.soma-pulse {
  animation: pulse-glow 3s ease-in-out infinite;
}

@keyframes pulse-glow {
  0%, 100% { r: 20; opacity: 0.5; }
  50% { r: 30; opacity: 0.15; }
}

/* Signal pulses — fade in/out synced to motion duration */
.signal {
  animation: signal-fade var(--dur, 3s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

@keyframes signal-fade {
  0% { opacity: 0; }
  8% { opacity: 0.95; }
  88% { opacity: 0.95; }
  100% { opacity: 0; }
}

/* Content */
.intro-content {
  max-width: 440px;
  margin: 0 auto;
}

.intro-title {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text);
  margin: 0 0 0.4rem;
}

.intro-tagline {
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-accent);
  margin: 0 0 1.5rem;
  letter-spacing: -0.01em;
}

.intro-body {
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

.intro-body p {
  margin: 0 0 0.75rem;
}

.intro-body p:last-child {
  margin-bottom: 0;
  font-style: italic;
  color: var(--color-text);
  font-weight: 500;
}

.intro-hint {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
}

.intro-hint span {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--color-text-light);
  animation: hint-pulse 2.5s ease-in-out infinite;
}

@keyframes hint-pulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Feed mode intro */
.feed-intro-card {
  text-align: center;
  padding: 1.5rem 1.5rem 2rem;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.feed-intro-card .intro-hint {
  display: none;
}

/* Mobile: slightly smaller animation */
@media (max-width: 600px) {
  .intro-animation {
    max-width: 100%;
  }
  .intro-card {
    padding: 1rem 1rem 1.5rem;
  }
}