/* CSS that the modules above expect. Load this once per page when ANY module
   is in use. Per-archetype scaffolds @import this from their own styles.css. */

/* ── scroll-reveal-mask ───────────────────────────────────────────────────── */
[data-reveal] {
  --p: 0;
  clip-path: inset(0 calc((1 - var(--p)) * 100%) 0 0);
  transition: clip-path 60ms linear;
}
[data-reveal].reveal-pending { will-change: clip-path; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { --p: 1 !important; clip-path: none !important; }
}

/* ── magnetic-cta + tilt-card ─────────────────────────────────────────────── */
[data-magnetic], [data-tilt] { will-change: transform; }

/* ── hero-parallax ────────────────────────────────────────────────────────── */
[data-parallax] { will-change: transform; }

/* ── nav-morph ────────────────────────────────────────────────────────────── */
.nav[data-morph] {
  transition: padding 0.28s ease, background 0.28s ease, backdrop-filter 0.28s ease;
}
.nav[data-morph].is-scrolled {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  background: color-mix(in oklab, var(--color-bg) 88%, transparent);
  backdrop-filter: blur(12px);
}

/* ── marquee-pause ────────────────────────────────────────────────────────── */
[data-marquee] .ticker__track > * {
  cursor: default;
  transition: transform 0.25s ease;
}

/* ── numbers-roll: nothing extra; the JS just sets textContent ───────────── */

/* ── cursor-trail ─────────────────────────────────────────────────────────── */
.has-custom-cursor,
.has-custom-cursor * { cursor: none; }
.has-custom-cursor a,
.has-custom-cursor button,
.has-custom-cursor [data-magnetic] { cursor: none; }
.custom-cursor {
  position: fixed; top: 0; left: 0;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--color-accent, currentColor);
  pointer-events: none; z-index: 9999;
  mix-blend-mode: difference;
  transition: width 0.2s ease, height 0.2s ease;
}
.custom-cursor__trail {
  position: fixed; top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1px solid var(--color-accent, currentColor);
  border-radius: 50%;
  pointer-events: none; z-index: 9998;
  opacity: 0.45;
  mix-blend-mode: difference;
  transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease;
}
.cursor-hover .custom-cursor { width: 4px; height: 4px; }
.cursor-hover .custom-cursor__trail { width: 56px; height: 56px; opacity: 0.8; }
@media (pointer: coarse) {
  .has-custom-cursor, .has-custom-cursor * { cursor: auto; }
  .custom-cursor, .custom-cursor__trail { display: none; }
}