/*
 * Animated trusttidetax logo — shared across every page.
 * Usage: <span class="ttx-logo-anim" style="--logo-h:44px"> ... </span>
 * (see snippet in any page that already uses it). --logo-h sets the
 * mark's rendered height; every other dimension scales from it so the
 * same markup drops in at any size (nav, footer, etc).
 * Source: design_handoff_animated_logo (Sept 2026) — mark pinwheel spin,
 * float bob, and center-dot pulse. Wordmark + wave stay static.
 */
@keyframes ttxLogoSpin { to { transform: rotate(360deg); } }
@keyframes ttxLogoFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes ttxLogoDotPulse {
  0%, 100% { transform: scale(1); opacity: .9; }
  50% { transform: scale(1.9); opacity: 0; }
}

.ttx-logo-anim {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--logo-h) * 0.18557);
}
/* Double-classed (.ttx-logo-anim .ttx-logo-*) on purpose: every page that
   hosts this component has a pre-existing "<container> img{height:...}"
   rule left over from the old single flat logo image (e.g. ".logo img",
   ".footer-logo-chip img", ".ttx-gnav-logo img"). Those have specificity
   (0,1,1), so a bare ".ttx-logo-mark{...}" (0,1,0) loses to them. Scoping
   under the wrapper bumps us to (0,2,0), which always wins without having
   to touch every legacy rule on every page. */
.ttx-logo-anim .ttx-logo-mark-wrap {
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--logo-h) * 1.08939);
  height: var(--logo-h);
  overflow: visible;
  animation: ttxLogoFloat 3.2s ease-in-out infinite;
}
.ttx-logo-anim .ttx-logo-mark {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform-origin: 48.3% 51.8%;
  animation: ttxLogoSpin 9s linear infinite;
}
.ttx-logo-anim .ttx-logo-dot {
  position: absolute;
  left: 48.3%;
  top: 51.8%;
  width: calc(var(--logo-h) * 0.19588);
  height: calc(var(--logo-h) * 0.19588);
  margin: calc(var(--logo-h) * -0.09794) 0 0 calc(var(--logo-h) * -0.09794);
  border-radius: 999px;
  background: #f0a81e;
  animation: ttxLogoDotPulse 2.4s ease-out infinite;
}
/* Widths are set from each image's own proportions (wordmark.png 1808x314,
   wave.png 2850x249) instead of "width: auto". Safari sizes an auto-width
   image in a flex column from its full natural width (1808px) and then
   stretches it to that width at the small height, which drew the wordmark
   and wave as long smeared bars across the whole header on Macs. */
.ttx-logo-anim .ttx-logo-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
  width: calc(var(--logo-h) * 3.91776);
  gap: calc(var(--logo-h) * 0.04124);
}
.ttx-logo-anim .ttx-logo-word {
  display: block;
  flex: 0 0 auto;
  height: calc(var(--logo-h) * 0.68041);
  width: calc(var(--logo-h) * 3.91776);   /* 0.68041 x 1808/314 */
  max-width: none;
}
.ttx-logo-anim .ttx-logo-wave {
  /* Rendered taller than the source asset's own proportions (0.15464 would
     match it exactly) because at nav/footer sizes the wave's thin curved
     stroke is only 1-2 physical pixels tall and aliases into visible gaps
     when the browser downscales it. Thickening it here keeps the curve
     solid at small sizes without touching the source art. */
  display: block;
  flex: 0 0 auto;
  height: calc(var(--logo-h) * 0.26);
  width: calc(var(--logo-h) * 3.25174);   /* 83% of the wordmark */
  margin-left: calc(var(--logo-h) * 0.27424); /* 7% of the wordmark */
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .ttx-logo-anim .ttx-logo-mark-wrap,
  .ttx-logo-anim .ttx-logo-mark,
  .ttx-logo-anim .ttx-logo-dot {
    animation: none;
  }
}