/* ---------------------------------------------------------------------------
   MithilAI logo

   Every surface uses the supplied wordmark artwork. Nothing here re-sets the
   name in a web font -- the letterforms are always the image itself.

   In the header two identical copies are stacked inside a clipping window, so
   hovering rolls the artwork up and its duplicate takes its place. Pure CSS,
   no JavaScript.

   Two variants exist because the supplied artwork is illegible on a single
   ground: the pale #FFDD59 "AI" measures 1.33:1 on white and the deep #284907
   "Mithil" measures 1.57:1 on the dark footer. Light grounds get the gold
   variant, the dark footer the ivory knockout.

   Heights are fixed in px, not em, so the logo renders identically on every
   page regardless of the inherited type scale.
   --------------------------------------------------------------------------- */

.mi-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ---------------------------------------------------------- header wordmark */

/* The clipping window. Its height is what the eye reads as the logo size, and
   it must match the image height below exactly or the roll will not land. */
.mi-logo__roll {
  display: block;
  overflow: hidden;
  height: 56px;
}

/* Timing lifted from accenture.com, whose logo runs
   `550ms cubic-bezier(0.85, 0, 0, 1)`. The curve leaves the mark almost
   instantly, then spends most of its time easing into a long, soft stop --
   that stretched tail is what gives the motion its character. */
.mi-logo__slide {
  display: block;
  transition: transform 550ms cubic-bezier(.85, 0, 0, 1);
}

.mi-logo__slide img {
  display: block;
  height: 56px;
  width: auto;
}

.mi-logo--word:hover .mi-logo__slide,
.mi-logo--word:focus-visible .mi-logo__slide {
  transform: translateY(-56px);
}

/* Matches the shrink the header already applies once it sticks. */
.mi-nav.is-stuck .mi-logo__roll { height: 47px; }
.mi-nav.is-stuck .mi-logo__slide img { height: 47px; }
.mi-nav.is-stuck .mi-logo--word:hover .mi-logo__slide,
.mi-nav.is-stuck .mi-logo--word:focus-visible .mi-logo__slide {
  transform: translateY(-47px);
}

.mi-logo:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
  border-radius: 2px;
}

/* Text fallback, used only if the artwork is missing from the media library. */
.mi-logo--text {
  font: 500 clamp(0.95rem, 1.5vw, 1.15rem) / 1.2 var(--mi-font, inherit);
  letter-spacing: -0.02em;
  color: #284907;
}

.mi-logo--text b { color: #A8811A; font-weight: 600; }

/* ------------------------------------------- wordmark on the other surfaces */

.mi-wordmark {
  display: inline-block;
  line-height: 0;
}

.mi-wordmark img {
  display: block;
  width: auto;
}

.mi-wordmark--sm img { height: 18px; }
.mi-wordmark--md img { height: 24px; }
.mi-wordmark--lg img { height: 50px; }
.mi-wordmark--xl img { height: 66px; }

a.mi-wordmark:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
  border-radius: 2px;
}

/* The preloader wordmark replaced a type mark that carried a bottom margin. */
.mi-preloader .mi-wordmark { margin-bottom: var(--mi-md, 24px); }

/* The footer wordmark replaced an h3, which carried the same rhythm. */
.mi-foot__col .mi-wordmark { margin-bottom: var(--mi-sm, 16px); }

@media (max-width: 640px) {
  .mi-logo__roll { height: 40px; }
  .mi-logo__slide img { height: 40px; }
  .mi-logo--word:hover .mi-logo__slide,
  .mi-logo--word:focus-visible .mi-logo__slide { transform: translateY(-40px); }

  .mi-wordmark--lg img { height: 38px; }
  .mi-wordmark--xl img { height: 46px; }
}

/* A roll that cannot animate would leave the second copy parked mid-window, so
   the effect is dropped entirely rather than disabled halfway. */
@media (prefers-reduced-motion: reduce) {
  .mi-logo__slide { transition: none; }

  .mi-logo--word:hover .mi-logo__slide,
  .mi-logo--word:focus-visible .mi-logo__slide { transform: none; }

  .mi-logo--word:hover { opacity: .72; }
}