/* MatDrone motion — owned by MOTION (js/motion.js).
   Reveal initial states, split-text masks, custom cursor, scroll progress line, marquee layout.

   House rule: nothing is hidden unless html.has-motion is present. motion.js sets that class only
   when GSAP + ScrollTrigger loaded and the visitor has not asked for reduced motion. With a dead
   CDN, a dead script or reduced motion, everything below is simply visible. */

/* ---------- Reveals: hidden until scrolled ~15% into the viewport ----------
   Only opacity is held here. The travel of each type (up: 32px rise, scale: from 0.94,
   clip: inset wipe, split: lines rising behind a mask) is applied by GSAP on the frame the reveal
   starts, so a waiting element keeps its true box for layout and for the observers.
   .is-revealed is added as the reveal starts. Nothing inside #hero is touched (CHROME owns it). */
html.has-motion [data-reveal]:not(.is-revealed):not(:where(#hero *)),      /* up | fade | clip | scale */
html.has-motion [data-split]:not(.is-revealed):not(:where(#hero *)),       /* lines | words | chars */
html.has-motion [data-stagger]:not(.is-revealed):not(:where(#hero *)) > * /* children of a stagger parent */ {
  opacity: 0;
}

/* ---------- Split text ----------
   SplitText wraps each line (or word) in a mask with overflow: clip. Display type is set tight
   (line-height < 1) and the serif accent has descenders, so the mask gets breathing room that is
   cancelled by negative margins: no layout change, no cropped tails. */
.motion-mask {
  padding: 0.12em 0.08em 0.2em;
  margin: -0.12em -0.08em -0.2em;
}
/* Characters are split and later restored; keeping kerning off on both sides avoids a jump. */
html.has-motion [data-split="chars"] { font-kerning: none; }

/* ---------- Counters ---------- */
[data-count] { font-variant-numeric: tabular-nums; }

/* ---------- Marquee ----------
   Static by default (no GSAP, reduced motion): items wrap and stay readable.
   With motion, js wraps the children in .motion-track and scrolls that one layer. */
[data-marquee] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
html.has-motion [data-marquee] {
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}
@supports (overflow: clip) {
  /* clip sideways only, so tall glyphs and focus rings are not cropped */
  html.has-motion [data-marquee] { overflow: visible; overflow-x: clip; }
}
.motion-track {
  display: flex;
  flex: none;
  flex-wrap: nowrap;
  align-items: inherit;
  gap: inherit; /* set gap on the [data-marquee] element; it carries through */
  will-change: transform;
}
.motion-track > * { flex: none; }

/* ---------- Scroll progress: 2px line above the nav ---------- */
.progress-line {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(var(--z-nav) + 1);
  width: 100%;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
  will-change: transform;
}

/* ---------- Custom cursor ----------
   .cursor-root is a plain, unpositioned box on purpose: its children must sit in the page's own
   stacking context for mix-blend-mode to see the page. The three fixed children are zero-size
   anchors that js translates; the visible shapes inside them scale by state class. */
.cursor-dot,
.cursor-ring,
.cursor-disc {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  width: 0;
  height: 0;
  pointer-events: none;
  user-select: none;
  opacity: 0;
  transition: opacity var(--t-fast) linear;
  will-change: transform;
}
.cursor-dot,
.cursor-ring { mix-blend-mode: difference; }
.cursor-root.is-active > * { opacity: 1; }

.cursor-dot__core,
.cursor-ring__shape {
  position: absolute;
  border-radius: 50%;
  transition: transform var(--t) var(--ease-out), opacity var(--t-fast) linear;
}
.cursor-dot__core {
  top: -3px;
  left: -3px;
  width: 6px;
  height: 6px;
  background: var(--fg);
}
.cursor-ring__shape {
  top: -18px;
  left: -18px;
  width: 36px;
  height: 36px;
  border: 1px solid var(--fg);
}

/* Over links and buttons: the ring opens up, the dot tightens */
.cursor-root.is-link .cursor-ring__shape { transform: scale(1.75); }
.cursor-root.is-link .cursor-dot__core { transform: scale(0.5); }
.cursor-root.is-down .cursor-ring__shape { transform: scale(0.82); }
.cursor-root.is-link.is-down .cursor-ring__shape { transform: scale(1.45); }

/* Over [data-cursor]: dot and ring give way to a solid disc with the label.
   The disc is not blended, so the label stays legible over the 3D scene. */
.cursor-root.is-label .cursor-dot__core,
.cursor-root.is-label .cursor-ring__shape {
  transform: scale(0);
  opacity: 0;
}
.cursor-disc__body {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  min-width: 5.5rem;
  height: 5.5rem;
  padding: 0 1.125rem;
  border-radius: var(--r-pill);
  background: var(--fg);
  color: var(--bg);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--t) var(--ease-out);
}
.cursor-root.is-label .cursor-disc__body { transform: translate(-50%, -50%) scale(1); }
.cursor-root.is-label.is-down .cursor-disc__body { transform: translate(-50%, -50%) scale(0.92); }
.cursor-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  margin-right: -0.14em; /* cancel the trailing tracking so the label is optically centred */
}

/* The native cursor goes only while the custom one is live and tracking (class set by js after the
   first real mouse move, dropped over text fields and when the pointer leaves the window). */
html.has-cursor,
html.has-cursor * { cursor: none !important; }

@media (hover: none), (pointer: coarse) {
  .cursor-root { display: none; }
}
@media (forced-colors: active) {
  .cursor-root { display: none; }
  html.has-cursor,
  html.has-cursor * { cursor: auto !important; }
}

/* ---------- Anchor navigation ----------
   Sections receive focus after an in-page jump so keyboard and screen-reader users land there.
   They are not interactive, so no ring is drawn around a whole section. */
.is-anchor-target:focus,
.is-anchor-target:focus-visible { outline: none; }

/* ---------- Print: show everything, drop the chrome ---------- */
@media print {
  html.has-motion [data-reveal],
  html.has-motion [data-split],
  html.has-motion [data-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .cursor-root,
  .progress-line { display: none !important; }
}