.logo-signal {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease-out;
  --logo-accent: var(--accent, var(--chrome-accent, #ed1e40));
  --logo-highlight: color-mix(in srgb, var(--logo-accent) 45%, var(--ink, var(--chrome-ink, #f4f1f6)));
}

.logo-active .logo-signal { opacity: 1; }

.logo-band,
.logo-letter,
.logo-letter::after,
.logo-sweep {
  position: absolute;
  inset: 0;
  background: var(--logo-accent);
  -webkit-mask: var(--brand-mask, url("adam-yale-logo-light.png")) center / contain no-repeat;
  mask: var(--brand-mask, url("adam-yale-logo-light.png")) center / contain no-repeat;
  opacity: 0;
}

.logo-band { clip-path: inset(var(--cut-top) 0 var(--cut-bottom)); }
.logo-letter-a { clip-path: inset(0 50% 0 0); --part-shift: -3px; --part-angle: 7deg; transform-origin: 40% 65%; }
.logo-letter-y { clip-path: inset(0 0 0 50%); --part-shift: 3px; --part-angle: -7deg; transform-origin: 60% 65%; }
.logo-letter::after { content: ""; background: var(--logo-highlight); }
.logo-sweep {
  background: var(--logo-highlight);
  clip-path: polygon(-25% 0, -17% 0, -37% 100%, -45% 100%);
}

.logo-playing .brand-logo { animation: logo-base 1900ms linear infinite; }
.logo-playing .logo-band { animation: logo-band 1900ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) var(--delay) infinite; }
.logo-playing .logo-letter { animation: logo-letter 1900ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) infinite; }
.logo-playing .logo-letter::after { animation: logo-echo 1900ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) infinite; }
.logo-playing .logo-sweep { animation: logo-sweep 1900ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) infinite; }
.logo-settling .brand-logo { animation: none; opacity: 1; transition: opacity 160ms ease-out; }

@keyframes logo-base {
  0%, 7%, 45%, 100% { opacity: 1; }
  11%, 39% { opacity: 0; }
}
@keyframes logo-band {
  0% { opacity: 0; transform: translateX(0); }
  5% { opacity: 1; transform: translateX(0); }
  10% { opacity: 1; transform: translateX(var(--shift)); }
  15% { opacity: 1; transform: translateX(calc(var(--shift) * -.55)); }
  22% { opacity: 1; transform: translateX(0); }
  27%, 100% { opacity: 0; transform: translateX(0); }
}
@keyframes logo-letter {
  0%, 19% { opacity: 0; transform: translateX(0) rotate(0); }
  24% { opacity: 1; transform: translateX(0) rotate(0); }
  32% { opacity: 1; transform: translateX(var(--part-shift)) rotate(var(--part-angle)); }
  43% { opacity: 1; transform: translateX(0) rotate(0); }
  47%, 100% { opacity: 0; transform: translateX(0) rotate(0); }
}
@keyframes logo-echo {
  0%, 26%, 43%, 100% { opacity: 0; transform: translateX(0); }
  31% { opacity: .65; transform: translateX(calc(var(--part-shift) * -1)); }
  38% { opacity: 0; transform: translateX(var(--part-shift)); }
}
@keyframes logo-sweep {
  0%, 47% { opacity: 0; clip-path: polygon(-25% 0, -17% 0, -37% 100%, -45% 100%); }
  49% { opacity: .85; }
  70% { opacity: .85; clip-path: polygon(145% 0, 153% 0, 133% 100%, 125% 100%); }
  74%, 100% { opacity: 0; clip-path: polygon(145% 0, 153% 0, 133% 100%, 125% 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .brand.logo-playing .brand-logo { animation: none; opacity: .78; }
  .brand.logo-settling .brand-logo { opacity: 1; }
  .brand .logo-signal { display: none; }
}