/* attain — animated wordmark (adapted from the Claude Design drop-in). Pair with attain-logo.js.
   Fonts: Libre Franklin 600 (the word) and Space Grotesk 700 (the "AI"), both self-hosted. */
@font-face { font-family: 'Libre Franklin'; src: url('/fonts/libre-franklin-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

.attain-logo {
  --al-ink: #221E18;          /* attain ink */
  --al-rust: #AF441E;         /* attain rust, for the "AI" */
  --al-size: 22px;            /* text height */
  --al-lift: 0.06em;          /* how far the A and I rise mid-change */
  --al-dur: 720ms;
  --al-ease: cubic-bezier(.76, 0, .24, 1);
  --al-fade: 400ms;           /* the letter crossfade: shorter than the move, */
  --al-fade-delay: 160ms;     /* and starting a little after it, so it's crisp */

  display: inline-flex;
  align-items: baseline;
  /* Reserve the width of "attAIn" so nothing around the logo shifts as it changes. */
  min-width: var(--al-wmax, auto);
  font-size: var(--al-size);
  line-height: 1.16;
  color: var(--al-ink);
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

.attain-logo--dark {
  --al-ink: #EDE6D8;
  --al-rust: #D9774A;         /* a lighter rust: the normal one is too dim on dark */
}

/* Every letter sits on one shared baseline, whichever font it uses. */
.attain-logo__word { display: inline-flex; align-items: baseline; }

.attain-logo__l,
.attain-logo__lc,
.attain-logo__uc {
  white-space: pre;
  letter-spacing: -0.02em;
}

.attain-logo__l,
.attain-logo__lc {
  font-family: 'Libre Franklin', Helvetica, Arial, sans-serif;
  font-weight: 600;
  color: var(--al-ink);
}

.attain-logo__uc {
  font-family: 'Space Grotesk', 'Libre Franklin', Helvetica, sans-serif;
  font-weight: 700;
  color: var(--al-rust);
  /* Invisible from the very first moment, NOT from when the logo becomes ready:
     otherwise the first paint starts them visible and the crossfade animates
     them away, which looked like "AI" fading out over "ai" on a fresh page. */
  opacity: 0;
}

/* The two changing letters: both forms are stacked in one grid cell and
   aligned by baseline, so "AI" lands exactly on the word's baseline. */
.attain-logo__s {
  display: inline-grid;
  align-items: baseline;
  justify-items: start;
}
.attain-logo__s > span { grid-area: 1 / 1; }

/* Before measuring: plain lowercase text, correct at first paint. */
.attain-logo:not(.is-ready) .attain-logo__uc { display: none; }

.attain-logo.is-ready .attain-logo__s {
  width: var(--al-wlc);
  transition: width var(--al-dur) var(--al-ease);
}
.attain-logo.is-ready .attain-logo__s > span {
  transition: opacity var(--al-fade) var(--al-ease) var(--al-fade-delay);
}

/* attAIn */
.attain-logo.is-lifted .attain-logo__s { width: var(--al-wuc); }
.attain-logo.is-lifted .attain-logo__lc { opacity: 0; }
.attain-logo.is-lifted .attain-logo__uc { opacity: 1; }

/* The lift is part of the motion only: rise during the change, then settle
   back onto the baseline (two names, so the animation replays each way). */
.attain-logo.is-ready.is-lifted .attain-logo__s { animation: al-lift-up var(--al-dur) var(--al-ease); }
.attain-logo.is-ready.has-moved:not(.is-lifted) .attain-logo__s { animation: al-lift-down var(--al-dur) var(--al-ease); }
@keyframes al-lift-up { 0%, 100% { transform: none; } 50% { transform: translateY(calc(var(--al-lift) * -1)); } }
@keyframes al-lift-down { 0%, 100% { transform: none; } 50% { transform: translateY(calc(var(--al-lift) * -1)); } }

/* Measurement pass only: natural widths, no animation. The capitals stay
   invisible throughout — opacity doesn't affect the width we measure. */
.attain-logo.is-measuring .attain-logo__s { width: auto !important; transition: none !important; animation: none !important; }
.attain-logo.is-measuring .attain-logo__s > span { transition: none !important; }

/* Reduce motion: the same change, instantly. */
@media (prefers-reduced-motion: reduce) {
  .attain-logo.is-ready .attain-logo__s,
  .attain-logo.is-ready .attain-logo__s > span { transition: none; animation: none !important; }
}