/*
 * Meliorans brand marks and their motion. Shared by the public site and the
 * admin (both load /css/brand.css and /js/brand.js), so the logo behaves the
 * same everywhere.
 *
 *   .mh  Hallmark: the struck maker's mark (octagonal frame + Caslon M).
 *        data-motion: draw | loading | stamp | idle (idle re-traces on hover)
 *   .mi  Imprint: the MELIORANS wordmark over a hairline and EST. MMXXVI.
 *        data-motion: reveal | none
 *   .m-intro  First-visit overlay that plays draw + reveal, then lifts away.
 *
 * Colour comes from currentColor so a mark sits on any tone. Every animation
 * is skipped under prefers-reduced-motion, where the marks render at rest.
 */
:root {
  --brand-ink: #111110;
  --brand-paper: #FBFAF7;
  --brand-ease: cubic-bezier(.6, 0, .2, 1);
  --brand-strike: cubic-bezier(.2, .8, .2, 1);
}

/* ── Hallmark ─────────────────────────────────────────── */
.mh { display: inline-block; width: 1em; height: 1em; overflow: visible; vertical-align: middle; flex: none; }
.mh-frame, .mh-trace, .mh-ring { fill: none; stroke: currentColor; stroke-width: 3; stroke-linejoin: miter; }
.mh-trace, .mh-ring { opacity: 0; }
.mh-m { fill: currentColor; transform-box: fill-box; transform-origin: 50% 50%; }
.mh-ring { transform-box: fill-box; transform-origin: 50% 50%; }

@media (prefers-reduced-motion: no-preference) {
  /* draw: the frame is engraved, then the letter is struck into it */
  .mh[data-motion="draw"] .mh-frame { stroke-dasharray: 100; stroke-dashoffset: 100; animation: mh-engrave .9s var(--brand-ease) forwards; }
  .mh[data-motion="draw"] .mh-m { opacity: 0; animation: mh-strike .55s .72s var(--brand-strike) forwards; }

  /* loading: a bright segment runs the frame; the letter breathes */
  .mh[data-motion="loading"] .mh-frame { opacity: .22; }
  .mh[data-motion="loading"] .mh-trace { opacity: 1; stroke-dasharray: 22 78; animation: mh-run 1.25s linear infinite; }
  .mh[data-motion="loading"] .mh-m { animation: mh-breathe 1.25s ease-in-out infinite; }

  /* stamp: the mark presses down and leaves an impression ring */
  .mh[data-motion="stamp"] { animation: mh-press .6s var(--brand-strike); }
  .mh[data-motion="stamp"] .mh-ring { animation: mh-impress .9s .12s ease-out; }

  /* idle: re-engrave the frame on hover or focus of the mark's link */
  .mh[data-motion="idle"] .mh-frame { stroke-dasharray: 100; stroke-dashoffset: 0; }
  a:hover > .mh[data-motion="idle"] .mh-frame,
  a:focus-visible > .mh[data-motion="idle"] .mh-frame,
  .mh[data-motion="idle"]:hover .mh-frame { animation: mh-retrace .8s var(--brand-ease); }
}

@keyframes mh-engrave { to { stroke-dashoffset: 0; } }
@keyframes mh-strike { 0% { opacity: 0; transform: scale(1.22); } 55% { opacity: 1; transform: scale(.96); } 100% { opacity: 1; transform: scale(1); } }
@keyframes mh-run { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -100; } }
@keyframes mh-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes mh-press { 0% { transform: scale(1.14); } 45% { transform: scale(.93); } 100% { transform: scale(1); } }
@keyframes mh-impress { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.45); } }
@keyframes mh-retrace { 0% { stroke-dashoffset: 100; } 100% { stroke-dashoffset: 0; } }

/* ── Imprint wordmark ─────────────────────────────────── */
.mi { display: inline-grid; justify-items: center; gap: .32em; line-height: 1; color: inherit; font-size: inherit; }
.mi-word { font-family: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif; font-weight: 400; letter-spacing: .2em; margin-right: -.2em; white-space: nowrap; display: flex; }
.mi-word > span { display: inline-block; }
.mi-rule { width: 44%; height: 1px; background: currentColor; opacity: .85; }
.mi-est { font-family: "Geist", system-ui, sans-serif; font-weight: 400; font-size: .26em; letter-spacing: .48em; margin-right: -.48em; text-transform: uppercase; white-space: nowrap; }
.mi--line { grid-auto-flow: column; align-items: center; gap: .7em; }
.mi--line .mi-rule, .mi--line .mi-est { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .mi[data-motion="reveal"] .mi-word > span { clip-path: inset(100% 0 0 0); transform: translateY(.18em); animation: mi-ink .7s var(--brand-strike) forwards; animation-delay: calc(var(--i) * 55ms + var(--mi-delay, 0ms)); }
  .mi[data-motion="reveal"] .mi-rule { transform: scaleX(0); animation: mi-rule .8s var(--brand-ease) forwards; animation-delay: calc(480ms + var(--mi-delay, 0ms)); }
  .mi[data-motion="reveal"] .mi-est { opacity: 0; letter-spacing: .9em; animation: mi-est .9s var(--brand-ease) forwards; animation-delay: calc(620ms + var(--mi-delay, 0ms)); }
  a:hover > .mi .mi-rule, a:focus-visible > .mi .mi-rule { animation: mi-rule .6s var(--brand-ease); }
}
@keyframes mi-ink { to { clip-path: inset(-20% -10% -20% -10%); transform: none; } }
@keyframes mi-rule { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mi-est { to { opacity: 1; letter-spacing: .48em; } }

/* ── First-visit intro ────────────────────────────────── */
.m-intro { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; align-content: center; gap: 28px;
  background: var(--brand-paper); color: var(--brand-ink); cursor: pointer;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); }
.m-intro .mh { font-size: 76px; }
.m-intro .mi { font-size: clamp(22px, 4vw, 34px); --mi-delay: 900ms; }
.m-intro.is-leaving { animation: m-intro-lift .8s var(--brand-ease) forwards; }
.m-intro.is-leaving > * { animation: m-intro-fade .35s ease forwards; }
@keyframes m-intro-lift { to { clip-path: inset(0 0 100% 0); } }
@keyframes m-intro-fade { to { opacity: 0; transform: translateY(-10px); } }

/* Inline loading state for buttons and panels */
.m-busy { display: inline-flex; align-items: center; gap: .6em; }
.m-busy .mh { font-size: 1.25em; }