/* A short signature gesture, followed by a long quiet interval. */
#nav .logo{--brand-sweep-start:180%;--brand-sweep-end:-80%}
[dir=rtl] #nav .logo{--brand-sweep-start:-80%;--brand-sweep-end:180%}
#nav .logo .logo-mark{
  transform-origin:50% 55%;
  animation:brand-emblem 10s 10s infinite;
}
@supports(background-clip:text){
  #nav .logo-word,#nav .logo-word b{
    --brand-ink:var(--white);
    background-image:linear-gradient(110deg,var(--brand-ink) 40%,#ffe8a3 48%,#fff9e6 50%,#ffe8a3 52%,var(--brand-ink) 60%);
    background-size:300% 100%;
    background-position:var(--brand-sweep-start) 0;
    background-clip:text;
    -webkit-background-clip:text;
    color:transparent;
    animation:brand-letter-shine 10s 10s infinite;
  }
  #nav .logo-word b{--brand-ink:var(--gold)}
}
@keyframes brand-emblem{
  0%,16%,100%{transform:translateY(0) rotateY(0) rotateZ(0) scale(1)}
  4%{transform:perspective(220px) translateY(-1px) rotateY(-16deg) rotateZ(-4deg) scale(1.06)}
  9%{transform:perspective(220px) translateY(-1px) rotateY(13deg) rotateZ(3deg) scale(1.06)}
}
@keyframes brand-letter-shine{
  0%{background-position:var(--brand-sweep-start) 0;animation-timing-function:ease-in-out}
  16%,100%{background-position:var(--brand-sweep-end) 0}
}
.page-hidden #nav .logo .logo-mark,.page-hidden #nav .logo-word,.page-hidden #nav .logo-word b{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  #nav .logo .logo-mark,#nav .logo-word,#nav .logo-word b{animation:none}
  #nav .logo-word,#nav .logo-word b{background:none;color:var(--brand-ink)}
}

/* The scripted sequence owns timing; glyph boxes keep the header width stable. */
#nav .logo.brand-sequenced .logo-mark{animation:none;position:relative;z-index:2}
#nav .logo.brand-sequenced .logo-word,#nav .logo.brand-sequenced .logo-word b{animation:none;background:none;color:var(--white)}
#nav .logo.brand-sequenced .logo-word b{color:var(--gold)}
#nav .brand-glyph{transition:none}
#nav .logo.brand-sequenced .logo-word{position:relative}