/* Both brand marks share a five-second clock in site.js. Keep the reserved
   image slot identical in either state, including reduced-motion mode. */
.brand--animated .brand-visual {
  position: relative;
  width: var(--brand-width);
  aspect-ratio: 2169 / 725;
  display: block;
}
.brand--animated .brand-logo,
.brand--animated .brand-tagline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  animation: none !important;
  transition: opacity 240ms ease;
}
.brand--animated .brand-logo {
  object-fit: contain;
  opacity: 1;
}
.brand--animated .brand-tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  font: italic 18px / 1.15 Georgia, 'Times New Roman', serif;
  letter-spacing: 0;
  white-space: normal;
  text-wrap: balance;
  color: #e31937;
  text-align: center;
  opacity: 0;
}
.brand--animated .brand-tagline::before { top: 10%; }
.brand--animated .brand-tagline::after { bottom: 10%; }
.brand--animated[data-brand-state="tagline"] .brand-logo { opacity: 0; }
.brand--animated[data-brand-state="tagline"] .brand-tagline { opacity: 1; }
@media (max-width: 1000px) {
  .brand--animated .brand-tagline { font-size: 16px; padding: 8px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand--animated .brand-logo,
  .brand--animated .brand-tagline { transition: none; }
}