/* =========================================================
   Motion system — quiet, editorial, finance-appropriate.
   Everything here is gated behind html.motion, which is only
   set when the visitor has NOT asked for reduced motion.
   ========================================================= */

@property --bloom { syntax: "<percentage>"; inherits: false; initial-value: 62%; }

:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ---------- page-to-page transitions (cross-document View Transitions) ---------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root) { animation: vt-out .32s var(--ease-in-out) both; }
::view-transition-new(root) { animation: vt-in .6s var(--ease-out) .08s both; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-10px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(14px); } }

/* ---------- scroll progress hairline (gold) ---------- */
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1.5px;
  background: linear-gradient(90deg, var(--green), var(--brass));
  transform-origin: left; transform: scaleX(var(--progress, 0));
}
.site-header { transition: transform .5s var(--ease-out), box-shadow .4s, background-color .4s; }
.motion .site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-scrolled { box-shadow: 0 10px 30px -18px rgba(21,22,26,.35); }

/* ---------- split headings: words rise out of a mask ---------- */
.motion [data-split]:not(.split-ready) { opacity: 0; animation: failsafe 0s 2.4s forwards; }
@keyframes failsafe { to { opacity: 1; } }
.w { display: inline-block; overflow: hidden; vertical-align: top;
     padding: 0 .06em .14em 0; margin: 0 -.06em -.14em 0; }
.w > span { display: inline-block; will-change: transform; }
.motion [data-split] .w > span {
  transform: translateY(108%) rotate(2deg);
  transition: transform 1.1s var(--ease-out);
  transition-delay: calc(var(--wi, 0) * 55ms + var(--d, 0ms));
}
.motion [data-split].is-in .w > span { transform: none; }

/* ---------- generic reveal: rise + un-blur, staggered by --i ---------- */
.motion .reveal {
  opacity: 0; transform: translateY(26px); filter: blur(6px);
  transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out), filter 1s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.motion .reveal.in { opacity: 1; transform: none; filter: none; }

/* hero intro choreography (on load) */
.motion .hero-copy .eyebrow,
.motion .hero-copy .lede,
.motion .hero-copy .btn-row,
.motion .page-hero .eyebrow,
.motion .page-hero .lede,
.motion .page-hero .tags,
.motion .contact .eyebrow,
.motion .contact .lede,
.motion .contact .nap {
  opacity: 0; transform: translateY(16px);
  animation: rise 1s var(--ease-out) forwards;
}
.motion .hero-copy .eyebrow, .motion .page-hero .eyebrow, .motion .contact .eyebrow { animation-delay: .05s; }
.motion .hero-copy .lede, .motion .page-hero .lede, .motion .contact .lede { animation-delay: .55s; }
.motion .hero-copy .btn-row, .motion .page-hero .tags, .motion .contact .nap { animation-delay: .75s; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- engravings: "ink" blooms from the centre ---------- */
.motion .hero-art img, .motion .split-art img, .motion .cta-panel .art img {
  --bloom: -40%;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 var(--bloom), transparent calc(var(--bloom) + 38%));
          mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 var(--bloom), transparent calc(var(--bloom) + 38%));
  scale: 1.05; filter: blur(3px) contrast(1.15);
  transition: --bloom 2.2s var(--ease-out), scale 2.4s var(--ease-out), filter 1.8s var(--ease-out);
}
.motion .hero-art.inked img, .motion .split-art.inked img, .motion .cta-panel .art.inked img {
  --bloom: 62%; scale: 1; filter: none;
}

/* ---------- hairlines that draw themselves ---------- */
.motion .svc, .motion .rows li, .motion .stats .stat { position: relative; }
.motion .svc { border-top-color: transparent; }
.motion .rows { border-top-color: transparent; }
.motion .rows li { border-bottom-color: transparent; }
.motion .svc::before, .motion .rows li::after, .motion .rows li:first-child::before {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line-strong);
  transform-origin: left; transform: scaleX(0); transition: transform 1.4s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.motion .svc::before { top: -1px; left: var(--gutter); right: var(--gutter); }
.motion .rows li::after { bottom: -1px; }
.motion .rows li:first-child::before { top: 0; }
.motion .svc.drawn::before, .motion .rows li.drawn::after, .motion .rows li.drawn:first-child::before { transform: scaleX(1); }

/* ---------- icons draw their strokes ---------- */
.motion svg.ico :is(path, circle, rect) {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease-out) calc(var(--i, 0) * 90ms + .25s);
}
.motion .in svg.ico :is(path, circle, rect) { stroke-dashoffset: 0; }

/* ---------- practice cards: soft gold spotlight follows the cursor ---------- */
@media (hover: hover) {
  .practice { isolation: isolate; overflow: hidden; }
  .practice::before {
    content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .5s;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(168,131,74,.14), transparent 60%);
  }
  .practice:hover::before { opacity: 1; }
  .practice .h3 { transition: transform .5s var(--ease-out); }
  .practice:hover .h3 { transform: translateX(4px); }
  .practice .more { transition: letter-spacing .5s var(--ease-out); }
  .practice:hover .more { letter-spacing: .14em; }
}

/* ---------- A24-style list: hover one, the rest recede ---------- */
@media (hover: hover) {
  .rows li, .foot-top ul a { transition: opacity .45s var(--ease-out); }
  .rows:hover li { opacity: .38; }
  .rows li:hover { opacity: 1; }
  .rows h3 { transition: transform .6s var(--ease-out), color .3s; }
  .rows li:hover h3 { transform: translateX(10px); color: var(--green); }
  .foot-top ul:hover a { opacity: .45; }
  .foot-top ul a:hover { opacity: 1; }
}

/* ---------- buttons: label rolls up on hover ---------- */
.btn-label { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.25; height: 1.25em; }
.btn-label > span { display: inline-block; position: relative; transition: transform .55s var(--ease-out); }
.btn-label > span::after { content: attr(data-text); position: absolute; left: 0; top: 100%; }
@media (hover: hover) { .btn:hover .btn-label > span { transform: translateY(-100%); } }

/* ---------- marquee of practices (home) ---------- */
.marquee {
  overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee span {
  font-family: var(--serif); font-size: clamp(30px, 4vw, 54px); line-height: 1; letter-spacing: -.01em;
  padding: 26px 0; display: inline-flex; align-items: center; gap: 36px; margin-right: 36px; white-space: nowrap;
}
.marquee span:nth-child(even) { font-style: italic; color: var(--ink-3); }
.marquee span::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--brass); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* ---------- dark bands: slow drift + parallax ---------- */
.band-bg img { scale: 1.14; transform-origin: 50% 50%; }
.motion .band-bg img { animation: drift 28s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translateX(-1.5%); } to { transform: translateX(1.5%); } }

/* scroll-lit quote: words brighten as you read */
.motion .quote[data-words] .qw { opacity: .2; transition: opacity .5s var(--ease-out); }
.motion .quote[data-words] .qw.lit { opacity: 1; }

/* ---------- about: emblem card tilts and catches light ---------- */
.monogram { transform-style: preserve-3d; transition: transform .8s var(--ease-out); will-change: transform; }
.monogram::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(500px circle at var(--mx, 50%) var(--my, 30%), rgba(236,235,228,.12), transparent 55%);
}
.monogram:hover::after { opacity: 1; }
.motion .monogram .emblem { animation: breathe 9s ease-in-out infinite alternate; }
@keyframes breathe { from { scale: 1; } to { scale: 1.035; } }

/* ---------- footer wordmark slides with scroll ---------- */
.foot-word span { display: inline-block; will-change: transform; }

/* ---------- contact niceties ---------- */
.map iframe { transition: filter .8s var(--ease-out); }
.map:hover iframe { filter: grayscale(.2) contrast(1); }
.nap li { transition: padding-left .5s var(--ease-out); }
@media (hover: hover) { .nap li:hover { padding-left: 8px; } }
.field input, .field select, .field textarea { transition: border-color .3s, box-shadow .3s, transform .4s var(--ease-out); }
.field input:focus, .field select:focus, .field textarea:focus { transform: translateY(-1px); }

/* ---------- step numbers: serif numerals rise ---------- */
.motion .step-n { overflow: hidden; }
.motion .step .step-n span { display: inline-block; transform: translateY(100%); transition: transform 1.2s var(--ease-out) calc(var(--i, 0) * 120ms + .1s); }
.motion .step.in .step-n span { transform: none; }

/* safety: never animate for people who asked not to */
@media (prefers-reduced-motion: reduce) {
  .motion * { animation: none !important; transition: none !important; }
}

/* magnetic CTA easing */
.btn { transition: background .25s var(--ease), color .25s var(--ease), border-color .25s, translate .45s var(--ease-out); }
@media (hover: hover) {
  .motion .rows:hover li.reveal.in { opacity: .38; transition: opacity .45s var(--ease-out), transform 1.1s var(--ease-out), filter 1s; transition-delay: 0s; }
  .motion .rows li.reveal.in:hover { opacity: 1; }
}