/* ==========================================================================
   Oxenex motion v1
   Drop-in: load after the site's own stylesheet. Uses the site's existing
   tokens (--ink, --blue, --text, --muted, --line, --motion-ease) and falls
   back to the same values if they are missing.
   ========================================================================== */

:root {
  --mx-ink: var(--ink, #0a0b14);
  --mx-blue: var(--blue, #1b2d8c);
  --mx-text: var(--text, #f0f1f5);
  --mx-muted: var(--muted, #b0b8ce);
  --mx-ease: var(--motion-ease, cubic-bezier(.2, .7, .2, 1));
  --mx-fast: 200ms;
  --mx-base: 450ms;
  --mx-slow: 800ms;
  --mx-header-h: 98px;
  --mx-gutter: 75px;
}

/* --------------------------------------------------------------------------
   1. Intro (home page only): large lockup that docks into the header logo.
      The header bar stays hidden until the lockup has docked.
   -------------------------------------------------------------------------- */

.mx-lockup {
  position: fixed;
  top: calc(var(--mx-header-h) + clamp(1.5rem, 5vh, 3.5rem));
  left: var(--mx-gutter);
  z-index: 120;
  width: min(58vw, 900px);
  pointer-events: none;
}

/* logo.svg and brand-signature.svg share the geometry of logo-full.svg;
   the margins trim logo.svg's empty viewBox area so the lockup sits on the text column */
.mx-lockup-mark {
  display: block;
  width: 100%;
  height: auto;
  margin: -8.78% 0 -10.15% -6.21%;
  transform-origin: 0 0;
  will-change: transform;
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s var(--mx-ease), opacity .25s linear .3s;
}

.mx-lockup-tag {
  display: block;
  width: 87.6%;
  height: auto;
  margin-top: 6.1%;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--mx-slow) var(--mx-ease) .55s,
              transform var(--mx-slow) var(--mx-ease) .55s;
}

.mx-loaded .mx-lockup-mark { clip-path: inset(0 0 0 0); }
.mx-loaded .mx-lockup-tag { opacity: var(--mx-tag-o, 1); transform: none; }
.mx-settled .mx-lockup-tag { transition: none; }
.mx-docked .mx-lockup-mark { opacity: 0; }
.mx-docked .mx-lockup-tag { visibility: hidden; }

/* header bar: hidden from first paint until the lockup docks
   (.mx-js and .mx-home are set in <head> before the stylesheet applies) */
.mx-home .topbar { transition: opacity var(--mx-base) var(--mx-ease), transform var(--mx-base) var(--mx-ease); }
.mx-home.mx-js:not(.mx-docked):not(.mx-reduced) .topbar { opacity: 0; pointer-events: none; }
.mx-home.mx-js:not(.mx-docked):not(.mx-reduced) .topbar:focus-within { opacity: 1; pointer-events: auto; }

.mx-intro { position: relative; }
.mx-intro-space { height: calc(var(--mx-lock-h, 30vw) + clamp(4rem, 13vh, 9rem)); }

.mx-band {
  position: relative;
  height: clamp(320px, 62vh, 720px);
  background: var(--mx-blue);
  color: rgba(240, 241, 245, .78);
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   2. Line fields (generated or the site's own SVG)
   -------------------------------------------------------------------------- */

.mx-lines-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.mx-lines-svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* the site's own SVG files: drawn in, then a slow drift */
.mx-own g, .mx-own path { stroke: currentColor; fill: none; }
.mx-own.mx-drift { animation: mx-drift 18s ease-in-out infinite alternate; }
@keyframes mx-drift {
  from { transform: translate3d(0, 0, 0) scale(1.02); }
  to   { transform: translate3d(-1.5%, .8%, 0) scale(1.05); }
}

/* --------------------------------------------------------------------------
   3. Headline fill on scroll
   -------------------------------------------------------------------------- */

.mx-word { display: inline; }
.mx-ch { opacity: calc(.16 + var(--f, 0) * .84); }

/* --------------------------------------------------------------------------
   4. Divider lines draw from left to right
   -------------------------------------------------------------------------- */

.mx-rule {
  background-image: linear-gradient(var(--mx-rule), var(--mx-rule));
  background-repeat: no-repeat;
  background-origin: border-box;
  background-position: 0 0;
  background-size: 0% 1px;
  transition: background-size 1.1s var(--mx-ease);
}
.mx-rule.mx-in { background-size: 100% 1px; }

/* --------------------------------------------------------------------------
   6. Navigation: current section marker, header hides on scroll down
   -------------------------------------------------------------------------- */

.mx-nav-ind {
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 1px;
  width: 0;
  background: var(--mx-text);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--mx-base) var(--mx-ease),
              width var(--mx-base) var(--mx-ease),
              opacity var(--mx-fast) linear;
}
.nav a.mx-current { color: #fff; }

.mx-topbar { transition: transform var(--mx-base) var(--mx-ease); }
.mx-topbar.mx-hidden { transform: translateY(-100%); }

/* --------------------------------------------------------------------------
   7. Safety net for the existing reveal animation
   -------------------------------------------------------------------------- */

.mx-force { opacity: 1 !important; transform: none !important; }

/* --------------------------------------------------------------------------
   8. Contact: copy address
   -------------------------------------------------------------------------- */

.mx-copy {
  margin-top: 1rem;
  padding: .55rem 0;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line, #ffffff24);
  color: var(--mx-muted);
  font: inherit;
  font-size: .9rem;
  cursor: pointer;
  transition: color var(--mx-fast) linear, border-color var(--mx-fast) linear;
}
.mx-copy:hover, .mx-copy:focus-visible { color: var(--mx-text); border-color: var(--mx-text); }
.mx-copy:focus-visible { outline: 1px solid var(--mx-text); outline-offset: 4px; }

/* --------------------------------------------------------------------------
   9. Page transitions to project pages (Chromium; others ignore it)
   -------------------------------------------------------------------------- */

@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mx-out .28s var(--mx-ease) both; }
::view-transition-new(root) { animation: mx-in .45s var(--mx-ease) both; }
@keyframes mx-out { to { opacity: 0; transform: translateY(-12px); } }
@keyframes mx-in { from { opacity: 0; transform: translateY(16px); } }

/* --------------------------------------------------------------------------
   Responsive and reduced motion
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {
  :root { --mx-gutter: 22px; --mx-header-h: 72px; }
  .mx-lockup { width: 80vw; }
  .mx-band { height: 52vh; }
}

@media (prefers-reduced-motion: reduce) {
  .mx-lockup-mark, .mx-lockup-tag, .mx-rule,
  .mx-nav-ind, .mx-topbar, .mx-home .topbar { transition: none !important; }
  .mx-own.mx-drift { animation: none; }
  .mx-ch { opacity: 1; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* reduced motion: the lockup stays in the page flow, nothing docks */
.mx-reduced .mx-lockup { position: absolute; }
.mx-reduced .mx-lockup-tag { transition: none; }
.mx-reduced .mx-lockup-mark { clip-path: none; }
.mx-reduced .mx-lockup-tag { opacity: 1; transform: none; }
.mx-reduced .mx-header-logo { opacity: 1; }
.mx-reduced.mx-docked .mx-lockup-mark { opacity: 1; }