/* ════════════════════════════════════════════════════════════════════
   jobie-bradley-test — animation + sound prototypes layer
   These rules ADD to style.css, they don't replace it.
   ════════════════════════════════════════════════════════════════════ */

/* ── Top scroll-progress bar (CSS-only, scroll-driven animation) ─── */
@keyframes _scroll-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.scroll-progress {
  position: fixed; top: 0; left: 0;
  height: 4px; width: 100%;
  background: linear-gradient(90deg, var(--pink, #ff5188), var(--cyan, #00ddc9), var(--yellow, #f5c518));
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 1000;
  pointer-events: none;
  /* Modern scroll-driven animation — falls back gracefully if unsupported */
  animation: _scroll-grow linear both;
  animation-timeline: scroll(root);
}
@supports not (animation-timeline: scroll()) {
  /* Fallback: JS in main.js will set --scroll-progress and we animate via that */
  .scroll-progress { transform: scaleX(var(--scroll-progress, 0)); transition: transform 80ms linear; }
}

/* ── Magnetic button — JS sets --mx, --my as the button is hovered ─ */
.btn { transition: transform 120ms cubic-bezier(.2,.7,.3,1.3), box-shadow 120ms ease; }
.btn.magnetic {
  transform: translate(calc(var(--mx, 0px) * 0.4), calc(var(--my, 0px) * 0.4));
}

/* ── SVG path-draw effect on hero title (uses path stroke trick) ─── */
.draw-path { stroke-dasharray: 1000; stroke-dashoffset: 1000;
  animation: _draw 1.4s ease-out 200ms both; }
@keyframes _draw { to { stroke-dashoffset: 0; } }

/* ── View Transitions — smooth crossfade between pages on Chrome/Safari ── */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 350ms; }

/* ── Mute toggle button ──────────────────────────────────────────── */
.sound-toggle {
  position: fixed; bottom: 1rem; right: 1rem;
  z-index: 999;
  background: var(--ink, #0a0a0a); color: var(--paper, #fff);
  border: 2px solid var(--paper, #fff); border-radius: 999px;
  padding: 0.5rem 0.9rem;
  font-family: var(--font-display, sans-serif);
  letter-spacing: .1em; font-size: .8rem;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--pink, #ff5188);
  transition: transform 120ms ease, box-shadow 120ms ease;
  font-weight: 600;
}
.sound-toggle:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--pink, #ff5188);
}
.sound-toggle[data-muted="false"] { background: var(--pink, #ff5188); }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress, .draw-path { animation: none !important; }
  .btn.magnetic { transform: none !important; }
}