/* A continuous gold light treatment for the existing text logo. */
.brand {
  position: relative;
  isolation: isolate;
}

.brand::before,
.brand::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

/* Soft, irregular beams stay close to the lockup and clear of navigation. */
.brand::before {
  inset: -29px -10px -29px -22px;
  background: repeating-conic-gradient(
    from -34deg at 20% 52%,
    transparent 0deg 12deg,
    rgb(241 185 80 / 0.12) 14deg,
    rgb(255 226 158 / 0.5) 16deg,
    transparent 20deg 44deg,
    rgb(224 172 70 / 0.25) 47deg,
    transparent 51deg 72deg
  );
  -webkit-mask-image: radial-gradient(ellipse at 24% 50%, #000 3%, #0008 35%, transparent 70%);
  mask-image: radial-gradient(ellipse at 24% 50%, #000 3%, #0008 35%, transparent 70%);
  transform-origin: 20% 52%;
  opacity: 0.5;
  animation: brand-rays 12s ease-in-out infinite alternate;
}

.brand::after {
  inset: -19px -5px -19px -16px;
  background: radial-gradient(ellipse at 17% 50%, rgb(242 186 80 / 0.22), rgb(209 145 44 / 0.065) 40%, transparent 72%);
  opacity: 0.7;
  animation: brand-halo 5.8s ease-in-out infinite;
}

.brand-monogram {
  color: #edc986;
  text-shadow: 0 0 7px #f5c66c55, 0 0 20px #d7993b33;
  animation: brand-gold-pulse 5.8s ease-in-out infinite;
}

.brand-monogram > span {
  color: #fff1d7;
  text-shadow: 0 0 8px #ffdfa66b;
}

.brand-monogram::before,
.brand-monogram::after {
  content: "";
  position: absolute;
  pointer-events: none;
  width: 18px;
  height: 18px;
  background:
    linear-gradient(transparent 43%, #fff5d6 50%, transparent 57%),
    linear-gradient(90deg, transparent 43%, #fff5d6 50%, transparent 57%);
  filter: drop-shadow(0 0 3px #f2c770);
  opacity: 0;
  animation: brand-glint 7.6s ease-in-out infinite;
}

.brand-monogram::before { top: -5px; left: 9px; }
.brand-monogram::after { bottom: -1px; right: -1px; width: 12px; height: 12px; animation-delay: -3.8s; }

.brand-name {
  position: relative;
  color: #eed6a9;
  text-shadow: 0 0 14px rgb(220 172 84 / 0.24);
}

.brand-sub {
  color: #dbc49c;
  text-shadow: 0 0 9px rgb(238 186 90 / 0.3);
  animation: brand-sub-pulse 5.8s ease-in-out infinite;
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .brand-name {
    background: linear-gradient(110deg, #d1ae71 10%, #eed6a9 34%, #fff9e9 44%, #eac786 52%, #d1ae71 65%, #eed6a9 88%);
    background-size: 260% 100%;
    background-position: 100% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: brand-letter-shine 8s ease-in-out infinite;
  }
}

/* A fine light sweep, contained beneath the wordmark. */
.brand-name::after {
  content: "";
  position: absolute;
  top: 1.5em;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #efc97c66, #fff4d9, #efc97c66, transparent);
  transform-origin: left;
  opacity: 0;
  pointer-events: none;
  animation: brand-light-line 8s ease-in-out infinite;
}

.brand:hover::before,
.brand:focus-visible::before { animation-duration: 7s; }
.footer-brand { --brand-motion-delay: -2.4s; }
.footer-brand::before,
.footer-brand::after,
.footer-brand .brand-monogram,
.footer-brand .brand-name,
.footer-brand .brand-sub { animation-delay: var(--brand-motion-delay); }

.brand-motion-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 0;
  min-height: 36px;
  color: #b8b09f;
  font: inherit;
  font-size: 12px;
  text-align: left;
}
.brand-motion-toggle:hover { color: #eed6a9; }
.brand-motion-toggle[hidden] { display: none; }

/* Pause when requested, when hidden, or while a lockup is off screen. */
html[data-brand-motion="paused"] .brand,
html[data-brand-motion="paused"] .brand *,
html[data-brand-motion="paused"] .brand::before,
html[data-brand-motion="paused"] .brand::after,
html[data-brand-motion="paused"] .brand *::before,
html[data-brand-motion="paused"] .brand *::after,
html[data-brand-hidden] .brand,
html[data-brand-hidden] .brand *,
html[data-brand-hidden] .brand::before,
html[data-brand-hidden] .brand::after,
html[data-brand-hidden] .brand *::before,
html[data-brand-hidden] .brand *::after,
.brand[data-brand-asleep],
.brand[data-brand-asleep] *,
.brand[data-brand-asleep]::before,
.brand[data-brand-asleep]::after,
.brand[data-brand-asleep] *::before,
.brand[data-brand-asleep] *::after,
.motion-paused .brand,
.motion-paused .brand *,
.motion-paused .brand::before,
.motion-paused .brand::after,
.motion-paused .brand *::before,
.motion-paused .brand *::after { animation-play-state: paused !important; }

@keyframes brand-rays {
  0% { transform: rotate(-9deg) scale(0.92); opacity: 0.32; }
  50% { opacity: 0.68; }
  100% { transform: rotate(13deg) scale(1.04); opacity: 0.44; }
}
@keyframes brand-halo {
  0%, 100% { opacity: 0.38; transform: scale(0.96); }
  48% { opacity: 0.95; transform: scale(1.035); }
  67% { opacity: 0.65; transform: scale(1); }
}
@keyframes brand-gold-pulse {
  0%, 100% { color: #d8b679; text-shadow: 0 0 5px #f5c66c40, 0 0 15px #d7993b22; }
  48% { color: #fff0c6; text-shadow: 0 0 8px #ffe3a4a6, 0 0 22px #e7ad565c, 0 0 35px #d7993b29; }
  67% { color: #e9c481; text-shadow: 0 0 8px #f5c66c66, 0 0 19px #d7993b33; }
}
@keyframes brand-sub-pulse {
  0%, 100% { color: #c3b18f; text-shadow: 0 0 4px #edbc6120; }
  48% { color: #f8dfaa; text-shadow: 0 0 10px #edbc6166; }
}
@keyframes brand-glint {
  0%, 29%, 53%, 100% { opacity: 0; transform: scale(0.45) rotate(0deg); }
  39% { opacity: 0.85; transform: scale(1) rotate(13deg); }
  45% { opacity: 0.28; transform: scale(0.7) rotate(20deg); }
}
@keyframes brand-letter-shine {
  0%, 13% { background-position: 100% 50%; }
  76%, 100% { background-position: 0% 50%; }
}
@keyframes brand-light-line {
  0%, 15%, 83%, 100% { opacity: 0; transform: scaleX(0.08); }
  42% { opacity: 0.75; transform: scaleX(0.72); }
  68% { opacity: 0.12; transform: scaleX(1); }
}

@media (max-width: 640px) {
  .brand::before { inset: -19px -3px -19px -13px; }
  .brand::after { inset: -13px -3px -13px -10px; }
  .brand-monogram::before { width: 14px; height: 14px; top: -3px; }
}
@media (prefers-reduced-motion: reduce) {
  .brand, .brand *, .brand::before, .brand::after, .brand *::before, .brand *::after { animation: none !important; }
  .brand::before { opacity: 0.16; transform: none; }
  .brand::after { opacity: 0.38; }
  .brand-monogram::before, .brand-monogram::after, .brand-name::after { opacity: 0; }
  .brand-motion-toggle { display: none; }
}
@media (forced-colors: active) {
  .brand-name, .brand-sub, .brand-monogram, .brand-monogram > span { color: LinkText; background: none; text-shadow: none; animation: none; }
  .brand::before, .brand::after, .brand-monogram::before, .brand-monogram::after, .brand-name::after { display: none; }
}