:root {
  --brand-signature-font: 'Dancing Script', 'Great Vibes', 'Allura', 'Sacramento', cursive;
  --brand-signature-gold: var(--aston-gold, #e0b050);
  --brand-signature-gold-light: #f0c46b;
  --brand-signature-gold-deep: #d6a34a;
  --brand-signature-glow: rgba(224, 176, 80, 0.24);
  --brand-signature-glow-strong: rgba(224, 176, 80, 0.58);
  --brand-signature-ease: cubic-bezier(.24, 1, .36, 1);
  --brand-signature-duration: 1.4s;
}

.brand-signature {
  display: inline-block;
  position: relative;
  vertical-align: baseline;
  line-height: 1.02;
  white-space: nowrap;
  letter-spacing: 0.01em;
  font-family: var(--brand-signature-font);
  font-weight: 700;
  font-style: normal;
  font-size: 1.12em;
  color: transparent;
  background: linear-gradient(
    135deg,
    var(--brand-signature-gold) 0%,
    var(--brand-signature-gold-light) 48%,
    var(--brand-signature-gold-deep) 100%
  );
  background-clip: text;
  text-decoration: none;
  text-shadow: none;
  transform: translateZ(0) rotate(-1.15deg);
  transform-origin: left center;
  padding-inline: 0.02em 0.12em;
  text-rendering: optimizeLegibility;
  transition: filter 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.brand-signature:hover {
  filter: drop-shadow(0 0 8px rgba(224, 176, 80, 0.22));
  transform: translateZ(0) rotate(-1.15deg) translateY(-0.01em);
}

.app-brand-copy .brand-signature,
.ls-brand-name.brand-signature,
.public-auth-brand-copy .brand-signature,
.brand-name.brand-signature,
.footer-brand-name.brand-signature,
.app-topbar__heading > .brand-signature {
  font-size: clamp(1.45rem, 1.18rem + 0.78vw, 2.15rem);
  line-height: 0.94;
  letter-spacing: 0;
}

.brand-signature.animate-write,
.brand-signature.is-animated {
  overflow: hidden;
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  animation: brand-signature-write var(--brand-signature-duration) var(--brand-signature-ease) var(--brand-signature-delay, 0ms) both;
}

.brand-signature.animate-write::after,
.brand-signature.is-animated::after {
  content: '';
  position: absolute;
  top: 12%;
  left: 0;
  width: 2px;
  height: 76%;
  border-radius: 999px;
  background: var(--brand-signature-gold);
  box-shadow:
    0 0 12px var(--brand-signature-glow-strong),
    0 0 22px rgba(240, 196, 107, 0.32);
  opacity: 1;
  animation:
    brand-signature-cursor-track var(--brand-signature-duration) var(--brand-signature-ease) var(--brand-signature-delay, 0ms) both,
    brand-signature-cursor-glint .78s ease-in-out var(--brand-signature-delay, 0ms) 2,
    brand-signature-cursor-fade .22s ease calc(var(--brand-signature-delay, 0ms) + 1.22s) forwards;
}

@keyframes brand-signature-write {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    filter: drop-shadow(0 0 0 rgba(224, 176, 80, 0));
  }

  20% {
    opacity: 0.94;
  }

  62% {
    opacity: 1;
    filter: drop-shadow(0 0 12px rgba(224, 176, 80, 0.32));
  }

  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    filter: drop-shadow(0 0 0 rgba(224, 176, 80, 0));
  }
}

@keyframes brand-signature-cursor-track {
  0% {
    transform: translateX(-0.12em) rotate(6deg);
  }

  100% {
    transform: translateX(calc(100% - 0.02em)) rotate(6deg);
  }
}

@keyframes brand-signature-cursor-glint {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

@keyframes brand-signature-cursor-fade {
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-signature,
  .brand-signature.animate-write,
  .brand-signature.is-animated {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    filter: none !important;
    transition: none !important;
  }

  .brand-signature::after,
  .brand-signature.animate-write::after,
  .brand-signature.is-animated::after {
    display: none !important;
    animation: none !important;
  }
}