/* ============================================================
   MOTION LAYER, site-wide professional motion & polish
   Loaded after all other styles, on every page.
   - Split-word masked headline reveals
   - Staggered scroll reveals (.mrv, applied by motion.js)
   - Custom cursor (dot + lerped ring, blend-difference)
   - Magnetic buttons
   - Page-transition curtain (html.pt-cover)
   - Auto-hiding nav
   - Kinetic type marquee (.mq-strip)
   - Film grain
   All effects respect prefers-reduced-motion.
   ============================================================ */

/* ---------- page transition curtain ---------- */
html::before {
  content: "";
  position: fixed;
  inset: 0;
  background: #0a0a0b;
  z-index: 2147483000;
  pointer-events: none;
  transform: translateY(-101%);
  transition: transform 0.55s cubic-bezier(0.76, 0, 0.24, 1);
  will-change: transform;
}
html.pt-cover::before { transform: translateY(0); }
html.pt-exit::before  { transform: translateY(101%); }
html.pt-notrans::before { transition: none !important; }

/* ---------- film grain ---------- */
body::after {
  content: "";
  position: fixed;
  inset: -120px;
  z-index: 2147482000;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 240px 240px;
}

/* ---------- split headline reveal ---------- */
.sw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding: 0 0.08em 0.13em 0.02em;
  margin: 0 -0.08em -0.13em -0.02em;
}
.swi {
  display: inline-block;
  transform: translateY(115%) rotate(2.5deg);
  transform-origin: 0 100%;
  transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}
.sw-in .swi { transform: none; }

/* ---------- generic staggered reveals ---------- */
body.m-on .mrv {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s ease var(--d, 0ms),
    transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms);
  will-change: opacity, transform;
}
body.m-on .mrv.in { opacity: 1; transform: none; }

/* ---------- custom cursor ---------- */
html.m-cursor,
html.m-cursor a,
html.m-cursor button,
html.m-cursor summary,
html.m-cursor .btn,
html.m-cursor .client,
html.m-cursor .em-card,
html.m-cursor label { cursor: none; }
.mcur,
.mcur-ring {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 2147483200;
  border-radius: 50%;
  mix-blend-mode: difference;
}
.mcur {
  width: 7px;
  height: 7px;
  background: #f2ede3;
  transform: translate(-50%, -50%);
}
.mcur-ring {
  width: 36px;
  height: 36px;
  border: 1.5px solid rgba(242, 237, 227, 0.85);
  transform: translate(-50%, -50%) scale(1);
  transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}
.mcur-ring.on {
  width: 58px;
  height: 58px;
  border-color: rgba(242, 237, 227, 1);
}
.mcur.off, .mcur-ring.off { opacity: 0; }

/* ---------- auto-hiding nav ---------- */
.nav { transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease; }
.nav.m-hide { transform: translateY(-115%); }

/* ---------- micro-polish ---------- */
.btn { will-change: transform; }
.btn .arr { display: inline-block; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.btn:hover .arr { transform: translateX(5px); }

::selection { background: var(--acid); color: #0a0a0b; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html::before { display: none; }
  .swi { transition: none; transform: none; }
  body.m-on .mrv { opacity: 1; transform: none; transition: none; }
  .mcur, .mcur-ring { display: none; }
}