/* TFR navigation logo 1.0.0 — original animation mathematics, namespaced. */
.tfr-nav-logo {
  --tfr-logo-max-width: 380px;
  --tfr-logo-mobile-width: 180px;
  --tfr-logo-scroll-distance: 420px;
  --tfr-logo-progress: 0;
  --tfr-logo-scale: 1;
  --tfr-logo-neutral: #FFFFFF;
  --tfr-logo-accent: #F04B32;
  display: block;
  position: relative;
  flex: 0 1 var(--tfr-logo-max-width);
  width: min(100%, var(--tfr-logo-max-width), 928.5px);
  max-width: min(100%, var(--tfr-logo-max-width), 928.5px);
  min-width: 0;
  aspect-ratio: 928.5 / 61.25;
  padding: 0;
  border: 0;
  overflow: hidden;
  line-height: 0;
  text-decoration: none;
}
.tfr-nav-logo:focus-visible { outline: 2px solid var(--tfr-logo-accent); outline-offset: 5px; }
/* Automatic connection to this theme's existing dataset and system preference. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .tfr-nav-logo { --tfr-logo-neutral: #1E1E1E; }
}
:root[data-theme="light"] .tfr-nav-logo { --tfr-logo-neutral: #1E1E1E; }
:root[data-theme="dark"] .tfr-nav-logo { --tfr-logo-neutral: #FFFFFF; }
/* Explicit per-logo overrides take precedence over the automatic mode. */
:root .tfr-nav-logo.logo--light { --tfr-logo-neutral: #1E1E1E; }
:root .tfr-nav-logo.logo--dark { --tfr-logo-neutral: #FFFFFF; }
.tfr-nav-logo__canvas {
  position: absolute;
  inset: 0 auto auto 0;
  display: block;
  width: 928.5px;
  height: 61.25px;
  overflow: hidden;
  transform: scale(var(--tfr-logo-scale));
  transform-origin: left top;
}
/* A CSS-only proportional fallback before JS, or if JavaScript is disabled. */
@supports (zoom: 1) {
  .tfr-nav-logo { container-type: inline-size; }
  .tfr-nav-logo__canvas { zoom: calc(100cqw / 928.5px); transform: none; }
  .tfr-nav-logo[data-tfr-logo-scaled] .tfr-nav-logo__canvas { zoom: 1; transform: scale(var(--tfr-logo-scale)); }
}
.tfr-nav-logo__word {
  position: absolute;
  display: block;
  left: var(--tfr-logo-word-left);
  top: 0;
  width: 445.5px;
  height: 61.25px;
  transform: translateX(calc(var(--tfr-logo-collapse-x) * max(0, min(1, (var(--tfr-logo-progress) - 0.08) / 0.72))));
  transition: transform 40ms linear;
}
.tfr-nav-logo__letter {
  --tfr-logo-letter-progress: max(0, min(1, (var(--tfr-logo-progress) - (0.05 + var(--tfr-logo-stagger) * 0.035)) / 0.5));
  position: absolute;
  display: block;
  left: var(--tfr-logo-letter-left);
  top: var(--tfr-logo-letter-top);
  width: var(--tfr-logo-letter-width);
  height: var(--tfr-logo-letter-height);
  max-width: none;
  background-color: var(--tfr-logo-neutral);
  -webkit-mask: var(--tfr-logo-image) center / 100% 100% no-repeat;
  mask: var(--tfr-logo-image) center / 100% 100% no-repeat;
  transform: translateX(calc(var(--tfr-logo-letter-shift) * var(--tfr-logo-letter-progress)));
  transform-origin: center;
  opacity: calc(1 - max(0, min(1, (var(--tfr-logo-letter-progress) - 0.58) / 0.42)));
  transition: transform 40ms linear, opacity 40ms linear;
}
.tfr-nav-logo__letter--accent { background-color: var(--tfr-logo-accent); }
.tfr-nav-logo__letter--initial { z-index: 2; transform: none; opacity: 1; }
.tfr-nav-logo__letter--period {
  --tfr-logo-letter-progress: max(0, min(1, (var(--tfr-logo-progress) - 0.08) / 0.72));
  opacity: 1;
}
@media (max-width: 520px) {
  .tfr-nav-logo {
    flex-basis: var(--tfr-logo-mobile-width);
    width: min(100%, var(--tfr-logo-mobile-width), 928.5px);
    max-width: min(100%, var(--tfr-logo-mobile-width), 928.5px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tfr-nav-logo { --tfr-logo-progress: 0 !important; }
  .tfr-nav-logo__word, .tfr-nav-logo__letter { transition: none; }
}
