/* Motion layer: hidden states live under .js-anim, which the head script sets only when
   motion is on and removes again if the scripts never arrive. */

.scroll-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 110;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  display: none;
}

.js-anim .scroll-progress {
  display: block;
}

/* the hero waits for the loader to lift */
.js-anim .hero-copy > *,
.js-anim .hero-visual,
.js-anim .nav-bar {
  visibility: hidden;
}

.js-anim .hero-title,
.js-anim .section-title,
.js-anim .contact-title {
  text-wrap: wrap;
}

/* ---------- Experience as a pinned horizontal story (wide screens) ---------- */
.experience.is-story .exp-stage {
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.experience:not(.is-story) .exp-stage {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.experience:not(.is-story) .exp-card {
  scroll-snap-align: center;
}

/* ---------- Skill tile sparks ---------- */
.skill-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
}