/* ============================================================
   THE BARAN AGENCY | motion layer (prefix mx-) and 3D mark (m3-)
   Pairs with assets/motion.js and assets/mark3d.js.
   Quiet by design: every effect is opt-out under reduced motion.
   ============================================================ */

/* ---------- 1. cross-document page transitions ---------- */
/* Browsers without View Transitions ignore all of this. */
@view-transition { navigation: auto; }

.nav { view-transition-name: mx-nav; }

/* the nav holds still while the page underneath changes */
::view-transition-group(mx-nav),
::view-transition-old(mx-nav),
::view-transition-new(mx-nav) { animation: none; }

/* the page: old view lifts out fast, new view fades and rises */
::view-transition-old(root) {
  animation: mx-vt-out 160ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: mx-vt-in 280ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1)) 40ms both;
}
@keyframes mx-vt-out { to { opacity: 0; } }
@keyframes mx-vt-in { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* ---------- 2. scroll progress hairline ---------- */
.mx-progress {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; pointer-events: none;
  background: var(--accent-bright);
  transform: scaleX(0); transform-origin: 0 50%;
  will-change: transform;
}
@supports (animation-timeline: scroll()) {
  .mx-progress--css {
    animation: mx-progress linear both;
    animation-timeline: scroll(root block);
  }
  @keyframes mx-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}
.nav:has(.nav__links.is-open) .mx-progress { opacity: 0; }

/* ---------- 3. magnetic primary buttons ---------- */
/* motion.js drives the CSS `translate` property, which composes with the
   existing hover `transform` rather than replacing it. */
.mx-mag { will-change: translate; }

/* ---------- 4. cursor spotlight ---------- */
/* motion.js sets an inline radial gradient that reads these variables,
   so it layers over each panel's own background color. */
.mx-spot { --mx-x: 50%; --mx-y: 50%; --mx-a: 0; }
.mx-spot--ink { --mx-spot: 143 184 108; --mx-spot-max: 0.07; }
.mx-spot--paper { --mx-spot: 63 107 53; --mx-spot-max: 0.05; }

/* ---------- 5. section chapter markers ---------- */
.mx-chapter {
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px; pointer-events: none; z-index: 1;
  background: var(--accent-bright);
  transform: scaleX(0); transform-origin: 0 50%;
}
.mx-chapter--paper { background: var(--accent); }
.mx-chapter.is-drawn { animation: mx-chapter 1500ms var(--ease, cubic-bezier(0.16, 1, 0.3, 1)) both; }
@keyframes mx-chapter {
  0% { transform: scaleX(0); transform-origin: 0 50%; }
  52% { transform: scaleX(1); transform-origin: 0 50%; }
  52.01% { transform: scaleX(1); transform-origin: 100% 50%; }
  100% { transform: scaleX(0); transform-origin: 100% 50%; }
}

/* ---------- 6. kicker scramble ---------- */
.mx-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 3D mark ---------- */
canvas[data-mark3d] { display: block; max-width: 100%; height: auto; }
html:not(.js) canvas[data-mark3d] { display: none; }
.m3-fallback { display: block; max-width: 100%; color: var(--accent-bright); }
.paper .m3-fallback { color: var(--accent); }

/* placement helpers used by the integration snippets */
.m3--center { margin: 0 auto clamp(18px, 3vh, 28px); }
.m3-split {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 6vw, 96px); align-items: center;
}
.m3--hero { width: clamp(200px, 22vw, 290px); }
@media (max-width: 760px) {
  .m3-split { grid-template-columns: 1fr; gap: 8px; }
  .m3--hero { order: -1; width: 112px; margin-left: -10px; }
}

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