/* ========================================
   MOTION.CSS
   Scroll progress bar, custom cursor,
   clip-path initial states, hover motion.
   No layout. No colors (use tokens).
   ======================================== */


/* === SCROLL PROGRESS BAR ===
   2px teal hairline at top of viewport.
   Tracks scroll progress via GSAP scrub. */
#progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 200;
  pointer-events: none;
}


/* === CUSTOM CURSOR (desktop only) ===
   Dot: fast, precise.
   Ring: lagged, expands on hover. */
#cursor-dot,
#cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 99999;
  border-radius: 50%;
  /* Centering via GSAP xPercent/yPercent */
}

#cursor-dot {
  width: 6px;
  height: 6px;
  background: var(--color-accent);
}

#cursor-ring {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(29, 158, 141, 0.4);
  background: transparent;
}

/* Cursor: hide native, show custom on hover-capable devices */
@media (hover: hover) {
  body { cursor: none; }
  a, button, .btn, summary, details { cursor: none; }
}

/* Cursor invisible on touch devices */
@media (hover: none) {
  #cursor-dot,
  #cursor-ring { display: none; }
}


/* === HERO ACCENT: Underline surprise ===
   Animated via GSAP after title reveal. */
.hero__accent {
  position: relative;
}

.hero__accent::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  /* Animated via GSAP hero timeline */
}


/* === WORD-LEVEL CLIP REVEAL ===
   Words need display:inline-block for
   clip-path to work. Set by JS. */
.word-mask .word {
  display: inline-block;
}


/* === MAGNETIC BUTTON ===
   GSAP handles the transform.
   Ensure button doesn't clip its own shadow. */
.btn--primary {
  will-change: transform;
}


/* === SECTION EXIT ===
   Subtle content parallax on section leave. */
[class*="__inner"] {
  will-change: transform;
}