/* ── SPARK INTRO ──────────────────────────────────────────────────────────
   A warm ember field drifts behind the page and the wordmark shimmers once.
   Everything is decorative and pointer-transparent.
   ───────────────────────────────────────────────────────────────────────── */

.spark-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 40;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms ease;
}

.spark-canvas.is-live { opacity: 1; }

/* Sits above the page shell but below the controls. */
.experience-controls { z-index: 80; }

/* ── Wordmark shimmer ── */
.name {
  position: relative;
  background-image: linear-gradient(
    100deg,
    var(--accent) 0%,
    var(--accent) 38%,
    var(--gold) 50%,
    var(--accent) 62%,
    var(--accent) 100%
  );
  background-size: 280% 100%;
  background-position: 140% 0;
  -webkit-background-clip: text;
  background-clip: text;
}

.name.is-shimmering {
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: spark-shimmer 1500ms cubic-bezier(0.32, 0, 0.2, 1) 1 forwards;
}

@keyframes spark-shimmer {
  from { background-position: 140% 0; }
  to   { background-position: -40% 0; }
}

/* ── Staggered entrance for the home column ── */
.spark-reveal {
  opacity: 0;
  transform: translateY(14px);
}

.spark-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 720ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--spark-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .spark-canvas { display: none; }

  .name.is-shimmering {
    color: var(--accent);
    -webkit-text-fill-color: var(--accent);
    animation: none;
  }

  .spark-reveal,
  .spark-reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}