.ora-lockup {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1591 / 351;
  overflow: visible;
  filter: drop-shadow(0 22px 44px rgba(0, 0, 0, 0.16));
}

.ora-halo {
  display: block;
  overflow: visible;
}

.ora-wordmark {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1591 / 351;
  overflow: visible;
}

.lockup-letter {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: letter-arrive 740ms cubic-bezier(0.18, 1.08, 0.3, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

.lockup-letter path {
  vector-effect: non-scaling-stroke;
}

.halo-motion {
  opacity: 0;
  transform: translate(670px, 0);
  transform-box: view-box;
  transform-origin: 1076px 176px;
  animation:
    halo-pass 1900ms forwards,
    halo-glow 1900ms ease-out forwards,
    halo-rest-glow-pulse 7200ms ease-in-out infinite;
  animation-delay: 320ms, 320ms, 2520ms;
  filter:
    drop-shadow(0 0 22px rgba(219, 180, 106, 0.3))
    drop-shadow(0 0 44px rgba(255, 231, 163, 0.14));
  will-change: transform, opacity, filter;
}

.halo-standalone-motion {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation:
    halo-standalone-presence 920ms ease-out forwards,
    halo-rest-glow-pulse 7200ms ease-in-out infinite;
  animation-delay: 120ms, 1180ms;
  filter:
    drop-shadow(0 0 14px rgba(219, 180, 106, 0.3))
    drop-shadow(0 0 28px rgba(255, 231, 163, 0.14));
  will-change: opacity, filter;
}

.halo-wordmark-motion {
  opacity: 1;
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: halo-rest-glow-pulse 7200ms ease-in-out 1180ms infinite;
  filter:
    drop-shadow(0 0 8px rgba(219, 180, 106, 0.24))
    drop-shadow(0 0 16px rgba(255, 231, 163, 0.12));
  will-change: filter;
}

.halo-strand-pulse,
.halo-strand-track {
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.halo-strand-pulse {
  animation: halo-rest-strand-pulse 7200ms ease-in-out 2520ms infinite;
  will-change: transform, opacity;
}

.halo-track-clockwise {
  animation: halo-track-clockwise var(--track-duration) linear var(--track-delay) infinite;
}

.halo-track-counter {
  animation: halo-track-counter var(--track-duration) linear var(--track-delay) infinite;
}

.halo-strand {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation:
    halo-draw 1040ms cubic-bezier(0.18, 0.8, 0.22, 1) forwards,
    halo-line-presence 1900ms ease-out forwards,
    halo-strand-clockwise-drift var(--strand-duration) ease-in-out infinite;
  animation-delay: var(--draw-delay), 320ms, var(--strand-drift-delay);
  will-change: stroke-dashoffset, stroke-opacity, transform;
}

.halo-strand.halo-strand-counter {
  animation-name: halo-draw, halo-line-presence, halo-strand-counter-drift;
}

.is-loading .lockup-letter,
.is-loading .halo-motion,
.is-loading .halo-standalone-motion,
.is-loading .halo-wordmark-motion,
.is-loading .halo-strand-pulse,
.is-loading .halo-strand-track,
.is-loading .halo-strand {
  animation-play-state: paused;
}

@keyframes letter-arrive {
  0% {
    opacity: 0;
    transform: translateX(-32px) scale(0.985);
  }

  62% {
    opacity: 1;
    transform: translateX(5px) scale(1.012);
  }

  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

@keyframes halo-pass {
  0% {
    opacity: 0;
    transform: translate(670px, 0);
    animation-timing-function: cubic-bezier(0.18, 0.84, 0.24, 0.98);
  }

  12% {
    opacity: 1;
  }

  50% {
    opacity: 1;
    transform: translate(1198px, 0);
    animation-timing-function: cubic-bezier(0.58, 0.02, 0.26, 0.98);
  }

  68% {
    opacity: 1;
    transform: translate(876px, 0);
    animation-timing-function: cubic-bezier(0.18, 0.9, 0.32, 1);
  }

  82% {
    opacity: 1;
    transform: translate(916px, 0);
    animation-timing-function: cubic-bezier(0.42, 0, 0.28, 1);
  }

  93% {
    opacity: 1;
    transform: translate(897px, 0);
    animation-timing-function: cubic-bezier(0.18, 1, 0.3, 1);
  }

  100% {
    opacity: 1;
    transform: translate(901px, 0);
  }
}

@keyframes halo-glow {
  0% {
    filter:
      drop-shadow(0 0 0 rgba(219, 180, 106, 0))
      drop-shadow(0 0 0 rgba(255, 231, 163, 0));
  }

  18% {
    filter:
      drop-shadow(0 0 24px rgba(219, 180, 106, 0.48))
      drop-shadow(0 0 52px rgba(255, 231, 163, 0.28))
      drop-shadow(0 0 86px rgba(250, 172, 24, 0.16));
  }

  48% {
    filter:
      drop-shadow(0 0 34px rgba(219, 180, 106, 0.72))
      drop-shadow(0 0 76px rgba(255, 231, 163, 0.42))
      drop-shadow(0 0 118px rgba(250, 172, 24, 0.26));
  }

  72% {
    filter:
      drop-shadow(0 0 28px rgba(219, 180, 106, 0.54))
      drop-shadow(0 0 62px rgba(255, 231, 163, 0.3))
      drop-shadow(0 0 96px rgba(250, 172, 24, 0.18));
  }

  100% {
    filter:
      drop-shadow(0 0 22px rgba(219, 180, 106, 0.34))
      drop-shadow(0 0 46px rgba(255, 231, 163, 0.18))
      drop-shadow(0 0 72px rgba(250, 172, 24, 0.1));
  }
}

@keyframes halo-standalone-presence {
  0% {
    opacity: 0;
    filter:
      drop-shadow(0 0 0 rgba(219, 180, 106, 0))
      drop-shadow(0 0 0 rgba(255, 231, 163, 0));
  }

  58% {
    opacity: 1;
    filter:
      drop-shadow(0 0 24px rgba(219, 180, 106, 0.54))
      drop-shadow(0 0 52px rgba(255, 231, 163, 0.28))
      drop-shadow(0 0 78px rgba(250, 172, 24, 0.16));
  }

  100% {
    opacity: 1;
    filter:
      drop-shadow(0 0 18px rgba(219, 180, 106, 0.34))
      drop-shadow(0 0 36px rgba(255, 231, 163, 0.18))
      drop-shadow(0 0 56px rgba(250, 172, 24, 0.1));
  }
}

@keyframes halo-draw {
  0% {
    stroke-dashoffset: 1;
  }

  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes halo-rest-glow-pulse {
  0%,
  18%,
  40%,
  56%,
  100% {
    filter:
      drop-shadow(0 0 22px rgba(219, 180, 106, 0.34))
      drop-shadow(0 0 46px rgba(255, 231, 163, 0.18))
      drop-shadow(0 0 72px rgba(250, 172, 24, 0.1));
  }

  26% {
    filter:
      drop-shadow(0 0 36px rgba(219, 180, 106, 0.62))
      drop-shadow(0 0 76px rgba(255, 231, 163, 0.38))
      drop-shadow(0 0 118px rgba(250, 172, 24, 0.23));
  }

  34% {
    filter:
      drop-shadow(0 0 24px rgba(219, 180, 106, 0.38))
      drop-shadow(0 0 52px rgba(255, 231, 163, 0.2))
      drop-shadow(0 0 82px rgba(250, 172, 24, 0.12));
  }

  68% {
    filter:
      drop-shadow(0 0 30px rgba(219, 180, 106, 0.5))
      drop-shadow(0 0 62px rgba(255, 231, 163, 0.28))
      drop-shadow(0 0 94px rgba(250, 172, 24, 0.16));
  }

  73% {
    filter:
      drop-shadow(0 0 24px rgba(219, 180, 106, 0.38))
      drop-shadow(0 0 52px rgba(255, 231, 163, 0.2))
      drop-shadow(0 0 82px rgba(250, 172, 24, 0.12));
  }

  80% {
    filter:
      drop-shadow(0 0 40px rgba(219, 180, 106, 0.7))
      drop-shadow(0 0 86px rgba(255, 231, 163, 0.44))
      drop-shadow(0 0 132px rgba(250, 172, 24, 0.28));
  }

  88% {
    filter:
      drop-shadow(0 0 23px rgba(219, 180, 106, 0.36))
      drop-shadow(0 0 48px rgba(255, 231, 163, 0.18))
      drop-shadow(0 0 76px rgba(250, 172, 24, 0.1));
  }
}

@keyframes halo-rest-strand-pulse {
  0%,
  18%,
  40%,
  56%,
  100% {
    opacity: 0.98;
    transform: scale(1);
  }

  26% {
    opacity: 1;
    transform: scale(1.024);
  }

  34% {
    opacity: 0.988;
    transform: scale(1.004);
  }

  68% {
    opacity: 1;
    transform: scale(1.012);
  }

  73% {
    opacity: 0.99;
    transform: scale(1.003);
  }

  80% {
    opacity: 1;
    transform: scale(1.028);
  }

  88% {
    opacity: 0.985;
    transform: scale(1.004);
  }
}

@keyframes halo-line-presence {
  0% {
    stroke-opacity: 0;
  }

  20% {
    stroke-opacity: 0.88;
  }

  64% {
    stroke-opacity: 1;
  }

  100% {
    stroke-opacity: 0.94;
  }
}

@keyframes halo-strand-clockwise-drift {
  0%,
  100% {
    transform: rotate(0deg) translate(0, 0) scale(1);
  }

  43% {
    transform: rotate(var(--strand-rotate)) translate(var(--strand-x), var(--strand-y)) scale(var(--strand-scale));
  }

  72% {
    transform: rotate(var(--strand-rotate-back)) translate(var(--strand-x-back), var(--strand-y-back)) scale(var(--strand-scale-back));
  }
}

@keyframes halo-strand-counter-drift {
  0%,
  100% {
    transform: rotate(0deg) translate(0, 0) scale(1);
  }

  34% {
    transform: rotate(var(--strand-rotate)) translate(var(--strand-x-back), var(--strand-y)) scale(var(--strand-scale));
  }

  66% {
    transform: rotate(var(--strand-rotate-back)) translate(var(--strand-x), var(--strand-y-back)) scale(var(--strand-scale-back));
  }

  86% {
    transform: rotate(var(--strand-rotate-soft)) translate(var(--strand-x-soft), var(--strand-y-soft)) scale(1.001);
  }
}

@keyframes halo-track-clockwise {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes halo-track-counter {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lockup-letter,
  .halo-motion,
  .halo-standalone-motion,
  .halo-wordmark-motion,
  .halo-strand-pulse,
  .halo-strand-track,
  .halo-strand {
    opacity: 1;
    animation: none;
    transform: none;
  }

  .halo-motion {
    transform: translate(901px, 0);
  }

  .halo-strand {
    stroke-dashoffset: 0;
    stroke-opacity: 0.94;
  }
}