/* ============================================================================
   motion.css — what survived.

   This file used to carry a staged hero cascade, a word-mask entrance on every
   heading, a scroll-progress line and amplified fade-up reveals. Most of that
   is gone, because those patterns work against the site:

   - Fade-up-on-scroll is the strongest 2021-23 template tell, and it is
     measurably harmful: an element at opacity 0 cannot be an LCP candidate,
     so fading content in inflates the site's worst Core Web Vital.
   - Word splitting and line masking stopped signalling craft in 2025, when
     GSAP made SplitText free and Webflow shipped it as a checkbox in the
     visual builder. It is a commodity effect now.

   What is left is the motion that answers the user rather than decorating
   the page:

   1. cross-document view transitions  (native, no JS)
   2. hover and press states
   3. the method bars, moved off the layout thread

   Emil Kowalski's test is how often a user sees a thing: the more often, the
   quieter it should be. Nothing here runs longer than 340ms except the bars.
   ========================================================================== */

:root{
  --ease: cubic-bezier(.16,1,.3,1);
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --dur-fast: .18s;
  --dur: .34s;
}

/* ---------------------------------------------------------------------------
   1. NAV — acknowledge that the page has moved.

   A shadow and a firmer ground, not a height change: animating height on a
   sticky element that repaints every scroll frame is layout thrash.
   --------------------------------------------------------------------------- */
nav{
  transition:
    box-shadow var(--dur) var(--ease-out),
    background-color var(--dur) var(--ease-out);
}
html.scrolled nav{
  background: rgba(247,246,243,.94);
  box-shadow:
    0 1px 0 rgba(17,17,17,.05),
    0 10px 30px -22px rgba(17,17,17,.45);
}

/* Nav links: the underline draws from the left rather than appearing. */
.nlinks a{ position: relative; }
.nlinks a::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -5px;
  height: 1px;
  background: var(--gold-2);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur) var(--ease-out);
}
.nlinks a:hover::after,
.nlinks a:focus-visible::after{ transform: scaleX(1); }
/* The current page keeps its underline drawn. */
.nlinks a.on::after{
  transform: scaleX(1);
  background: var(--line-2);
}

/* ---------------------------------------------------------------------------
   2. METHOD BARS — the same effect, off the layout thread.

   site.css animates `width`, which forces a layout pass on every frame of a
   900ms animation, four rows over. scaleX from the left edge is pixel-
   identical and runs on the compositor.
   --------------------------------------------------------------------------- */
.mbar{
  width: 100%;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .9s var(--ease);
  will-change: transform;
}
.meth.is-in .mbar{
  width: 100%;
  transform: scaleX(1);
}

.mrow .mn{
  transition: transform var(--dur) var(--ease-out), color var(--dur) linear;
}
.mrow:hover .mn{
  transform: translateX(4px);
  /* .mn sits at --gold-2, already 4.1:1 on paper and under the 4.5:1 floor.
     A hover state must not make that worse, so it moves toward ink. */
  color: var(--ink);
}

/* ---------------------------------------------------------------------------
   3. PORTFOLIO ROWS and BUTTONS — interface feedback, not decoration.

   A button that does not acknowledge the press feels broken on touch, where
   there is no hover state to confirm the target was hit.
   --------------------------------------------------------------------------- */
.pfc{ transition: transform var(--dur) var(--ease-out); }
.pfc:hover{ transform: translateX(6px); }
.pfc .pfn{ transition: color var(--dur) linear; }
.pfc:hover .pfn{ color: var(--ink); }

.btn, .btn-o{
  transition:
    background var(--dur-fast) linear,
    color var(--dur-fast) linear,
    transform var(--dur-fast) var(--ease-out);
}
.btn:active, .btn-o:active{ transform: scale(.975); }

/* ---------------------------------------------------------------------------
   4. CROSS-PAGE TRANSITIONS.

   Five static pages sharing a nav and a contact block. Without this every
   click is a white flash and a reload. Native, so a browser that has not
   shipped it (Firefox, as of now) simply navigates as it always did.
   --------------------------------------------------------------------------- */
@view-transition{ navigation: auto; }

::view-transition-old(root){ animation: vt-out .18s linear both; }
::view-transition-new(root){ animation: vt-in .28s var(--ease-out) both; }
@keyframes vt-out{ to{ opacity: 0; } }
@keyframes vt-in{ from{ opacity: 0; } to{ opacity: 1; } }

/* The nav and footer are the same object on every page, so they hold still
   rather than crossfading with the content. */
nav{ view-transition-name: site-nav; }
footer{ view-transition-name: site-foot; }

/* ---------------------------------------------------------------------------
   5. REDUCED MOTION.
   site.css already kills animation and transition globally under this query.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .mbar{ transform: scaleX(1) !important; }
  .nlinks a::after{ transition: none !important; }
  @view-transition{ navigation: none; }
}