/* The logo link, made by tt_logo() in lib/logo.php.

   At rest it matches brand/logo/tt-lockup.svg. On hover or keyboard focus the
   mark grows, a face appears on it and blinks twice, and the wordmark steps
   aside. It responds to the reader, so it is not a page's one orchestrated
   moment. With reduced motion it stays still.

   Set its height with --logo-h; everything else scales from that. Positions
   are the lockup's own, in its 100-unit-high viewBox. */

/* The default size, with no specificity, so any rule that sets --logo-h wins. */
:where(.tt-logo) {
  --logo-h: 36px;
}

.tt-logo {
  position: relative;
  display: block;
  flex: none;
  width: calc(var(--logo-h) * 5.943);
  height: var(--logo-h);
  text-decoration: none;
}

/* A taller hit area than the logo itself, for touch. */
.tt-logo::before {
  content: "";
  position: absolute;
  inset: -8px 0;
}

.tt-logo__mark {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--logo-h) * 1.2);
  height: var(--logo-h);
  max-width: none;
  overflow: visible;
  forced-color-adjust: none;
  transform-origin: 50% 57%; /* the centre of the dot */
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
}

.tt-logo__bar {
  fill: var(--tangent);
}

.tt-logo__dot {
  fill: var(--ink);
}

.tt-logo__face {
  fill: var(--frame);
  opacity: 0;
  transition: opacity 160ms cubic-bezier(0.2, 0, 0, 1) 80ms;
}

.tt-logo__eye {
  transform-box: fill-box;
  transform-origin: center;
}

.tt-logo__word {
  position: absolute;
  top: calc(var(--logo-h) * 0.16);
  left: calc(var(--logo-h) * 1.26);
  width: calc(var(--logo-h) * 4.583);
  height: calc(var(--logo-h) * 0.7);
  max-width: none;
  transition: transform 200ms cubic-bezier(0.2, 0, 0, 1);
}

/* Blinks at 0.65 s and 2.2 s after the face appears. */
@keyframes tt-logo-blink {
  0% { transform: none; }
  27.9% { transform: scaleY(0.13); }
  33.48% { transform: none; }
  94.42% { transform: scaleY(0.13); }
  100% { transform: scaleY(0.13); }
}

@media (prefers-reduced-motion: no-preference) {
  .tt-logo:focus-visible .tt-logo__mark {
    transform: scale(1.6);
  }

  .tt-logo:focus-visible .tt-logo__face {
    opacity: 1;
  }

  .tt-logo:focus-visible .tt-logo__eye {
    animation: tt-logo-blink 2330ms step-end;
  }

  .tt-logo:focus-visible .tt-logo__word {
    transform: translateX(calc(var(--logo-h) * 0.4));
  }
}

/* Hover only where there is a real pointer, so a tap doesn't leave it awake. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tt-logo:hover .tt-logo__mark {
    transform: scale(1.6);
  }

  .tt-logo:hover .tt-logo__face {
    opacity: 1;
  }

  .tt-logo:hover .tt-logo__eye {
    animation: tt-logo-blink 2330ms step-end;
  }

  .tt-logo:hover .tt-logo__word {
    transform: translateX(calc(var(--logo-h) * 0.4));
  }
}