/* Motion core. Nothing here hides content: every rule only shapes elements that motion-core.js creates
   or flags (.mc-motion is set on <html> only when motion is allowed and Lenis is running). */

/* Lenis owns the glide; a native smooth scroll would fight it. */
html.mc-motion { scroll-behavior: auto; }

/* Heading masks: room for descenders and the slight rotate, without moving the line box. */
.mc-line-mask, .mc-mask-line-mask { padding-block: 0.06em 0.16em; margin-block: -0.06em -0.16em; }

/* Questions: the hairline becomes a scalable rule so it can draw across. At rest it reads exactly as the border did. */
html.mc-motion .qa > div { position: relative; }
html.mc-motion .qa > div + div { border-top-color: transparent; }
html.mc-motion .qa > div + div::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(-1 * var(--rule-hair));
  height: var(--rule-hair);
  background: var(--color-rule);
  transform: scaleX(var(--mc-rule, 1));
  transform-origin: 0 50%;
  pointer-events: none;
}

/* Close: a soft violet and orchid glow that brightens as the card arrives. Opacity only. */
html.mc-motion .close { position: relative; isolation: isolate; }
html.mc-motion .close::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 65% at 30% 55%, var(--brand-glow-1-soft), transparent 70%),
    radial-gradient(45% 60% at 75% 45%, var(--brand-glow-2-soft), transparent 70%);
  opacity: var(--mc-glow, 1);
  pointer-events: none;
}

/* Footer wordmark, inlined so its letters can move. It keeps the image's box. */
.mc-mast { display: block; width: 100%; height: auto; overflow: hidden; }

/* Progress: a 3px rule in the brand gradient along the top edge. */
.mc-progress {
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: calc(var(--z-sticky-nav) + 1);
  background: linear-gradient(90deg, var(--brand-glow-1), var(--brand-glow-2));
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .mc-progress { display: none; }
}