/*
 * Hero swirl lines — motion layer on top of the static look already defined in
 * css/pages.css (#heroSwirl in index.html: a pair of mint arcs at the top right, a
 * pair of mint loops at the bottom left of the hero).
 *
 * Two <g> levels per side, each owned by exactly one thing, so nothing ever fights
 * over the same `transform`:
 *
 *   .hero-swirl-parallax   JS only (js/hero-swirl.js) — a gentle, eased lean toward
 *                          the pointer, at two different depths (arcs read as further
 *                          away, loops as closer, so they move less / more).
 *   .hero-swirl-drift      CSS only — a slow, continuous breathing sway that starts
 *                          the moment .hero.is-ready is set (js/animations.js), and
 *                          runs on its own with no JS ticking.
 *   the <path> itself      unchanged from pages.css, plus the draw-in stroke reveal.
 *
 * A soft mint glow (--swirl-glow, 0..1, set by js/hero-swirl.js) grows as the pointer
 * nears the lines. Reduced motion: js/hero-swirl.js never runs at all, so none of this
 * is reachable — the lines stay exactly as pages.css already shows them, fully drawn
 * and still.
 */

.hero-swirl {
  --swirl-glow: 0;
}

/* ---- Drift: a slow breathing sway, paused until the hero has settled in ---- */

.hero-swirl-drift {
  animation-play-state: paused;
  transform-origin: 50% 50%;
}

.hero.is-ready .hero-swirl-drift {
  animation-play-state: running;
  will-change: transform;
}

.hero-swirl-drift--arc {
  animation: hero-swirl-drift-arc 16s ease-in-out infinite;
}

.hero-swirl-drift--loop {
  animation: hero-swirl-drift-loop 22s ease-in-out infinite;
  animation-delay: -7s; /* out of phase with the arcs, so the two never sync up */
}

@keyframes hero-swirl-drift-arc {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(-7px, 5px, 0) rotate(-0.9deg); }
}

@keyframes hero-swirl-drift-loop {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%      { transform: translate3d(9px, -7px, 0) rotate(1.2deg); }
}

/* ---- Draw-in: js sets stroke-dasharray/-dashoffset from the real path length;
        this only styles the reveal itself ---- */

.hero-swirl.is-drawing .hero-swirl-arc,
.hero-swirl.is-drawing .hero-swirl-loop {
  transition: stroke-dashoffset 2.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---- Pointer glow: strengthens with --swirl-glow ---- */

.hero-swirl-parallax {
  filter: drop-shadow(0 0 calc(var(--swirl-glow) * 14px) rgba(var(--mint-rgb), calc(var(--swirl-glow) * 0.5)));
}

@media (hover: none), (pointer: coarse) {
  /* No pointer to glow toward on touch: keep the layer cheap. */
  .hero-swirl-parallax {
    filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-swirl-drift {
    animation: none;
  }

  .hero-swirl-parallax {
    filter: none;
  }
}