/* logo-mark.css — the animated hourglass/orbit brand mark.
   Ported from the supplied source asset as a self-contained two-tone
   (navy/gold) mark; it keeps its own hardcoded palette rather than the
   site's --bento-* tokens, since it's a fixed brand asset, not UI chrome.
   Used icon-only in the site-wide nav (.logo-mark) and as icon+wordmark+
   quote on the landing page's first bento card (.logo-lockup). Reduced
   motion is handled globally by base.css's `*,*::before,*::after` rule. */

.logo-mark {
  width: 40px;
  height: auto;
  display: block;
  max-width: 100%;
  overflow: visible;
}

.logo-mark__glass {
  animation: lm-breathe 9s ease-in-out infinite;
  transform-box: view-box;
  transform-origin: 60px 70px;
}
@keyframes lm-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.014); }
}

.logo-mark__circuit {
  fill: none;
  stroke: #C8901F;
  stroke-width: 1;
  opacity: .22;
  stroke-dasharray: 3 6;
  animation: lm-circuit-flow 14s linear infinite;
}
@keyframes lm-circuit-flow { to { stroke-dashoffset: -180; } }

.logo-mark__grain {
  offset-rotate: 0deg;
  offset-distance: 0%;
  transform-box: fill-box;
  transform-origin: center;
  animation: lm-travel 9s linear infinite;
  animation-delay: var(--gd);
}
.logo-mark__grain--g-r {
  offset-path: path('M 60,36 C 60,52 60,60 60,70 C 60,84 60,95 63,103 C 71,117 89,121 101,112 C 113,103 115,84 113,70 C 111,52 109,35 99,27 C 86,18 68,25 60,36');
  animation-duration: 9s;
}
.logo-mark__grain--g-l {
  offset-path: path('M 60,36 C 60,52 60,60 60,70 C 60,84 60,95 57,103 C 49,117 31,121 19,112 C 7,103 5,84 7,70 C 9,52 11,35 21,27 C 34,18 52,25 60,36');
  animation-duration: 9.8s;
}
@keyframes lm-travel { to { offset-distance: 100%; } }

.logo-mark__waist {
  animation: lm-waist-pulse 1.5s ease-in-out infinite;
  transform-box: view-box;
  transform-origin: 60px 70px;
}
@keyframes lm-waist-pulse {
  0%, 100% { opacity: .30; transform: scale(.85); }
  50% { opacity: .85; transform: scale(1.25); }
}

.logo-mark__plate-gleam {
  animation: lm-plate-gleam 6s ease-in-out infinite;
}
@keyframes lm-plate-gleam {
  0%, 100% { opacity: .15; }
  50% { opacity: .6; }
}

.logo-mark__heap {
  animation: lm-heap-shift 9s ease-in-out infinite;
  transform-box: view-box;
}
.logo-mark__heap--top { transform-origin: 60px 70px; animation-delay: -4.5s; }
.logo-mark__heap--bot { transform-origin: 60px 112px; }
@keyframes lm-heap-shift {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(.88); }
}

.logo-mark__mote {
  animation: lm-mote var(--md) ease-in-out infinite alternate;
  opacity: .55;
  transform-box: view-box;
  transform-origin: center;
}
@keyframes lm-mote { to { transform: translate(var(--mx), var(--my)); } }

/* ---------- Nav lockup: mark + compact animated wordmark ----------
   Used by logo_nav() in every island nav. The wordmark reuses .logo-word so
   the letters lift and the O keeps orbiting exactly as on the landing card;
   only the scale changes. It shrinks with the pill rather than disappearing,
   so the brand is legible on a phone as well as a desktop. */
.logo-navmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.logo-navmark__mark { width: 32px; flex: none; }

/* Qualified by the wrapper so these beat the landing card's .logo-word sizes,
   which are declared further down this file. */
.logo-navmark .logo-word--nav {
  font-size: 1.1875rem;   /* 19px */
  font-weight: 600;
  letter-spacing: -.01em;
  gap: 0 .22em;
  flex-wrap: nowrap;
  white-space: nowrap;
}
@media (max-width: 768px) {
  .logo-navmark { gap: 7px; }
  .logo-navmark__mark { width: 28px; }
  .logo-navmark .logo-word--nav { font-size: 1.0625rem; }  /* 17px */
}
@media (max-width: 400px) {
  .logo-navmark { gap: 6px; }
  .logo-navmark .logo-word--nav { font-size: 0.9375rem; }  /* 15px */
}
/* 360px-class phones: the footer lockup steps down once more. */
@media (max-width: 370px) {
  .logo-navmark { gap: 5px; }
  .logo-navmark__mark { width: 25px; }
  .logo-navmark .logo-word--nav { font-size: 0.875rem; }  /* 14px */
}

/* ---------- Island-nav mark: the animated hourglass alone ----------
   No wordmark, so the mark is drawn as large as the 44px nav row allows
   (same size on every screen). */
.logo-navmark--solo { gap: 0; }
.logo-navmark--solo .logo-navmark__mark {
  width: auto;
  height: 44px;
}

/* ---------- The lively mark: nav mark and landing card mark ----------
   One motion for both, so the big mark on the landing page moves exactly
   like the one in the island nav: the orbit circuit is a real line rather
   than a 22% ghost, the grains riding it are half again as big, the waist
   pulses faster, and the whole glass rocks gently like it is being turned.
   Everything is in viewBox units, so it scales with the mark. Reduced-motion
   users still get a still mark (base.css). */
.logo-mark--lively .logo-mark__circuit {
  opacity: .55;
  stroke-width: 2.2;
  stroke-dasharray: 4 5;
  animation-duration: 7s;
}
.logo-mark--lively .logo-mark__grain { transform: scale(1.55); }
.logo-mark--lively .logo-mark__waist { animation-duration: 1.2s; }
.logo-mark--lively .logo-mark__plate-gleam { animation-duration: 3.5s; }
.logo-mark--lively .logo-mark__glass { animation: lm-nav-rock 6s ease-in-out infinite; }
@keyframes lm-nav-rock {
  0%, 100% { transform: rotate(-4deg) scale(1); }
  50%      { transform: rotate(4deg) scale(1.03); }
}
.logo-mark--lively .logo-mark__mote { opacity: .85; }
/* A small lift under the pointer, so the mark reads as the home button. */
.logo-navmark--solo .logo-navmark__mark {
  transition: transform var(--dur-base, 250ms) cubic-bezier(0.25, 0.1, 0.25, 1);
}
a:hover > .logo-navmark--solo .logo-navmark__mark { transform: scale(1.08); }

/* ---------- Wordmark (landing bento card only) ---------- */
.logo-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(14px, 2.4vw, 26px);
  text-align: center;
}
.logo-lockup__mark {
  width: clamp(96px, 16vw, 150px);
}

.logo-word {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 .3em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(30px, 6vw, 56px);
  line-height: 1;
  letter-spacing: -.015em;
  margin: 0;
}
.logo-word__part { display: inline-flex; align-items: baseline; }

.logo-word__letter { display: inline-block; }
.logo-word__letter--h {
  color: #16243F;
  animation: lm-lift 6.5s ease-in-out infinite;
  animation-delay: var(--d);
}
.logo-word__letter--o {
  background: linear-gradient(100deg, #9A6B18 0%, #C8901F 30%, #E0A92C 48%, #C8901F 66%, #9A6B18 100%);
  background-size: 460% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: lm-gleam 7s cubic-bezier(.45,.05,.3,1) infinite, lm-lift 6.5s ease-in-out infinite;
  animation-delay: 0s, var(--d);
}
@keyframes lm-gleam {
  0% { background-position: 100% 0; }
  58%, 100% { background-position: 0% 0; }
}
@keyframes lm-lift {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-.042em); }
}

.logo-orbit-icon {
  width: .88em;
  height: .88em;
  display: inline-block;
  position: relative;
  top: .02em;
  margin-inline: .015em;
  overflow: visible;
}
.logo-orbit-icon__gleam {
  transform-box: view-box;
  transform-origin: 50px 50px;
  animation: lm-spin 6.5s linear infinite;
}
@keyframes lm-spin { to { transform: rotate(360deg); } }
.logo-orbit-icon__sat {
  offset-path: path('M 8,50 a 42,42 0 1,0 84,0 a 42,42 0 1,0 -84,0');
  offset-rotate: 0deg;
  offset-distance: 0%;
  transform-box: fill-box;
  transform-origin: center;
  animation: lm-travel 5s linear infinite;
}

/* ---------- Quote — italic, slow perpetual fade/lift-in ---------- */
.logo-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(17px, 2.6vw, 24px);
  line-height: 1.28;
  color: #16243F;
  margin: 0;
  max-width: 26ch;
  text-align: center;
  text-wrap: balance;
}
.logo-quote__line {
  display: inline-block;
  animation: lm-quote-open 12s cubic-bezier(.16,.72,.28,1) infinite;
}

/* The opening and closing marks: gold, a size larger than the sentence, and
   they swing open and closed on the same 12s cadence as the line itself —
   the open mark tips in from the left as the line arrives, the close mark
   from the right, so the sentence reads as being taken between them. */
.logo-quote__mark {
  display: inline-block;
  color: #C8901F;
  font-size: 1.75em;
  line-height: 1;
  /* The glyphs sit at cap height; dropping them lets them read as bracketing
     the sentence rather than floating above it. */
  vertical-align: -.24em;
  transform-origin: 50% 70%;
}
.logo-quote__mark--open {
  margin-right: .04em;
  animation: lm-quote-mark-open 12s cubic-bezier(.16,.72,.28,1) infinite;
}
.logo-quote__mark--close {
  margin-left: .04em;
  animation: lm-quote-mark-close 12s cubic-bezier(.16,.72,.28,1) infinite;
}
@keyframes lm-quote-mark-open {
  0%       { opacity: 0; transform: translateX(.28em) rotate(-16deg) scale(.7); }
  40%, 82% { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); }
  100%     { opacity: 0; transform: translateX(.16em) rotate(-10deg) scale(.82); }
}
@keyframes lm-quote-mark-close {
  0%       { opacity: 0; transform: translateX(-.28em) rotate(16deg) scale(.7); }
  40%, 82% { opacity: 1; transform: translateX(0) rotate(0deg) scale(1); }
  100%     { opacity: 0; transform: translateX(-.16em) rotate(10deg) scale(.82); }
}
@keyframes lm-quote-open {
  0% { opacity: 0; transform: translateY(.5em); filter: blur(4px); }
  40%, 82% { opacity: 1; transform: translateY(0); filter: blur(0); }
  100% { opacity: 0; transform: translateY(-.3em); filter: blur(3px); }
}