/* Use the supplied vector artwork at its natural proportions. */
.brand img {
  aspect-ratio: 590.73225 / 168.81589;
  width: 100%;
  height: auto;
}

.site-header .brand {
  position: relative;
}

/* A brief arrival and a single light sweep, confined to the logo artwork. */
@media (prefers-reduced-motion: no-preference) {
  .site-header .brand {
    animation: trutemps-arrive 650ms cubic-bezier(.2, .7, .25, 1) 1 both;
  }

  .site-header .brand::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(110deg, transparent 42%, rgb(255 255 255 / 85%) 50%, transparent 58%);
    background-size: 300% 100%;
    background-position: 100% 0;
    -webkit-mask: url("assets/trutemps-logo.svg") center / contain no-repeat;
    mask: url("assets/trutemps-logo.svg") center / contain no-repeat;
    opacity: 0;
    animation: trutemps-shine 1200ms ease-in-out 450ms 1 both;
  }
}

@keyframes trutemps-arrive {
  from { opacity: .5; transform: translateY(5px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes trutemps-shine {
  0% { opacity: 0; background-position: 100% 0; }
  15%, 80% { opacity: 1; }
  100% { opacity: 0; background-position: 0% 0; }
}