/* A reserved text slot keeps the header still throughout the rotation. */
.brand.home-brand { max-width:100%; flex-shrink:1; min-width:0; }
.brand-rotator {
  position:relative;
  display:block;
  flex:0 1 250px;
  width:250px;
  min-width:0;
  height:36px;
  overflow:hidden;
  perspective:500px;
}
.brand-rotator__face {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  white-space:nowrap;
  backface-visibility:hidden;
  transform-origin:50% 50%;
  animation-duration:10s;
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
  animation-iteration-count:infinite;
}
.brand-rotator__name { animation-name:brand-name-roll; }
.brand-rotator__tagline {
  gap:.25em;
  color:#ffffff;
  font-size:16px;
  font-weight:700;
  letter-spacing:-.35px;
  line-height:1.25;
  opacity:0;
  transform:translateY(70%) rotateX(-65deg);
  animation-name:brand-tagline-roll;
}
.brand-rotator__tagline span { color:#6ee7b7; }
/* Keep room for the catalog's separate home link, including narrow phones. */
.public-header .catalog-brand { flex:1 1 0; min-width:0; max-width:100%; }
.public-header .catalog-brand + a { flex:none; white-space:nowrap; }
@media(max-width:380px) {
  .catalog-brand .brand-rotator__tagline { font-size:13px; letter-spacing:-.2px; }
}
@keyframes brand-name-roll {
  0%,30%,90%,100% { opacity:1; transform:translateY(0) rotateX(0); }
  40%,80% { opacity:0; transform:translateY(-70%) rotateX(65deg); }
  80.01% { opacity:0; transform:translateY(70%) rotateX(-65deg); }
}
@keyframes brand-tagline-roll {
  0%,30% { opacity:0; transform:translateY(70%) rotateX(-65deg); }
  40%,80% { opacity:1; transform:translateY(0) rotateX(0); }
  90%,100% { opacity:0; transform:translateY(-70%) rotateX(65deg); }
}
@media(prefers-reduced-motion:reduce) {
  .brand-rotator__face { animation:none; }
  .brand-rotator__name { opacity:1; transform:none; }
  .brand-rotator__tagline { display:none; }
}