/* ===== Logo — cloud + sun, "cristinaiftodi" =====
   Ported from the tested standalone snippet. The hover choreography is kept
   verbatim: the sun rises into place from below the cloud, the icon bobs once,
   and the name takes the cloud's blue.

   Adapted for the site:
   • #444 → var(--c-ink), so the name flips with light/dark. The cloud and sun
     hexes stay literal — they're brand colours, the same in both themes, and
     the hover blue is that same cloud colour.
   • the snippet's font stack → the site's tokens: --font-display (Georgia)
     for the italic half, --font-body for the upright half. That's what the
     snippet's own "Georgia, serif" / "Inter, sans-serif" fallbacks were
     reaching for.

   Placement (Hero's top-left) lives in hero.css, next to .hero__controls,
   which mirrors it on the right. */

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* The source SVG was a 152×97 artboard with the cloud floating in the middle
   of it — ~18px of empty box on each side at this size, which pushed the name
   miles away from the mark no matter what `gap` said. The viewBox is cropped
   to the artwork instead (31 25 85 50), with just enough margin for the sun's
   hover position, which reaches further left and higher than the cloud. So the
   box now hugs the cloud and `gap` means what it says. */
.logo__icon {
  width: 43px;
  aspect-ratio: 85 / 50;
  position: relative;
  flex-shrink: 0;
}
.logo__icon svg { width: 100%; height: 100%; display: block; }

.logo__cloud { fill: #749BFF; }

.logo__sun {
  fill: var(--brand-sun);
  opacity: 0;
  transform: translate(-3px, 10px) scale(0.85);   /* tucked below the cloud */
  transform-origin: 34% 46%;
  /* TWO DIFFERENT DURATIONS ON PURPOSE — not a leftover.
     The sun fades in (.3s) faster than it travels (.45s), so it reads as
     light appearing and then rising, rather than as one object sliding
     into place. Any duration pass has to keep these two apart; snapping
     both to one step kills the effect.
     Both are hand-tuned against the cloud's shape and stay literals — see
     MOTION_AUDIT.md. Only the curve is tokenised here. */
  transition: transform .45s var(--ease-overshoot),
              opacity .3s ease;
}
.logo:hover .logo__sun,
.logo:focus-visible .logo__sun {
  opacity: 1;
  transform: translate(-3px, -2px) scale(1.08);
}

.logo__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  color: var(--c-ink);
  letter-spacing: -0.01em;
  /* Was cubic-bezier(.25, .8, .35, 1), the sheet's only use of that curve.
     Folded into the house curve: on a 350 ms colour fade the two are not
     tellable apart, and one fewer curve is one fewer thing to keep in sync.
     The .35s is hand-tuned to the wordmark and stays a literal. */
  transition: color .35s var(--ease-out);
  white-space: nowrap;
}
.logo__name em {
  font-style: italic;
  font-weight: 500;
}
.logo__name b {
  font-style: normal;
  font-weight: 500;
  font-family: var(--font-body);
}
.logo:hover .logo__name,
.logo:focus-visible .logo__name { color: #749BFF; }

.logo:hover .logo__icon { animation: logo-bob .5s ease; }
@keyframes logo-bob {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}

.logo:focus-visible {
  outline: 2px solid var(--c-ink);
  outline-offset: 4px;
  border-radius: var(--radius-sm);
}

/* tighter on small screens */
@media (max-width: 600px) {
  .logo { gap: var(--space-1); }
  .logo__icon { width: 32px; }
  .logo__name { font-size: var(--text-md); }
}

/* Below 360px the wordmark and the four control buttons cannot both fit the
   gutter — they overflowed by 12px, and did so before this pass too. The mark
   keeps the cloud and drops the lettering; .logo's aria-label still carries
   the name, so nothing is lost to a screen reader.

   360, not 380: measured, the pair needs 282px and a 375px screen offers 312,
   so the wordmark survives on the most common phone width. It only has to go
   at 320, where there are 272. The breakpoint matches the nav's own. */
@media (max-width: 360px) {
  .logo__name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .logo__sun { transition: opacity .3s ease; }
  .logo:hover .logo__sun { transform: translate(-3px, -2px) scale(1); }
  .logo:hover .logo__icon { animation: none; }
}