/* Base styles the motion primitives rely on. Import once (e.g. in the app's global CSS). */

/* Hide reveal targets only once JS has declared motion is on (set by an inline script in <head>).
   If JS never runs, content stays visible. */
[data-motion="on"] [data-reveal],
[data-motion="on"] [data-intro] { visibility: hidden; }

/* Marquee: parent clips, children sit in a row and share --mx. */
[data-marquee] { display: flex; overflow: hidden; white-space: nowrap; }
[data-marquee] > * { flex: none; transform: translate3d(var(--mx, 0), 0, 0); }

/* Custom cursor */
.gc-cursor {
  position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none;
  width: 36px; height: 36px; margin: -18px 0 0 -18px; border-radius: 50%;
  border: 1px solid currentColor; color: var(--fg, #111); opacity: 0;
  display: grid; place-items: center; mix-blend-mode: difference;
  transition: width var(--dur-ui) var(--ease-out), height var(--dur-ui) var(--ease-out), margin var(--dur-ui) var(--ease-out), opacity var(--dur-ui), background-color var(--dur-ui);
}
.gc-cursor.is-active { opacity: 1; }
.gc-cursor.is-link { width: 56px; height: 56px; margin: -28px 0 0 -28px; }
.gc-cursor.is-big { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--fg, #111); mix-blend-mode: normal; }
.gc-cursor__label { font: 500 11px/1 var(--font-mono, monospace); letter-spacing: .06em; text-transform: uppercase; color: var(--bg, #fff); opacity: 0; transition: opacity var(--dur-ui); }
.gc-cursor.is-big .gc-cursor__label { opacity: 1; }

/* Hover preview */
.gc-preview {
  position: fixed; left: 0; top: 0; z-index: 900; pointer-events: none;
  width: min(26vw, 360px); aspect-ratio: 4 / 5; margin: calc(min(26vw, 360px) * -0.625) 0 0 calc(min(26vw, 360px) * -0.5);
  background: center / cover no-repeat; border-radius: var(--radius-sm, 8px);
  opacity: 0; visibility: hidden; transform: scale(.85);
}

/* Preloader shell */
[data-preloader] { position: fixed; inset: 0; z-index: 2000; background: var(--fg); color: var(--bg); clip-path: inset(0 0 0 0); }

/* Section theme shift: the host animates --bg/--fg, children inherit. */
[data-palette] { transition: none; }

/* Micro-interactions: text roll + underline draw (mo_micro_interactions) */
.roll { display: inline-grid; overflow: hidden; vertical-align: top; }
.roll > span { grid-area: 1 / 1; transition: transform var(--dur-ui) var(--ease-out); }
.roll > span + span { transform: translateY(105%); }
:is(a, button):hover > .roll > span:first-child, .roll:hover > span:first-child { transform: translateY(-105%); }
:is(a, button):hover > .roll > span + span, .roll:hover > span + span { transform: none; }
.u-link { background: linear-gradient(currentColor 0 0) 100% 100% / 0 1px no-repeat; transition: background-size .45s var(--ease-out); }
.u-link:hover, .u-link:focus-visible { background-position: 0 100%; background-size: 100% 1px; }

@media (prefers-reduced-motion: reduce) {
  [data-motion] [data-reveal], [data-motion] [data-intro] { visibility: visible !important; }
  .gc-cursor, .gc-preview { display: none; }
}