/* The existing Manrope variable font, distributed with /manrope-OFL.txt. */
@font-face {
  font-family: "Manrope";
  src: url("/manrope-variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

* { box-sizing: border-box; }
html { color-scheme: light; background: #FFFFFF; }
body { margin: 0; background: #FFFFFF; color: #174BFF; }
main {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}
.holding-content { text-align: center; }
.brand-orbit { position: relative; width: min(320px, 75vw); aspect-ratio: 1; margin: 0 auto; }
.rainbow { display: block; width: 100%; height: 100%; overflow: visible; }
.orbit-turn { transform-origin: 160px 160px; transform: rotate(-90deg); }
.ribbon { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 100 0; }
.brand-mark { position: absolute; width: 28.125%; height: auto; inset: 0; margin: auto; }
#holding-message {
  margin: 24px 0 0;
  font-family: "Manrope", Arial, sans-serif;
  font-size: clamp(18px, 3vw, 22px);
  font-weight: 450;
  line-height: 1.5;
  letter-spacing: -.018em;
}
.motion-toggle {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 28.125%;
  height: 28.125%;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 26%;
  cursor: pointer;
  touch-action: manipulation;
}
.motion-toggle[hidden] { display: none; }
.motion-toggle:focus-visible { outline: 2px solid #174BFF; outline-offset: 4px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* A complete, still mark is the fallback. JavaScript only enables optional motion. */
.motion-enabled .orbit-turn { animation: orbit 8s linear infinite; }
.motion-enabled .ribbon { animation: trace 8s cubic-bezier(.65, 0, .35, 1) infinite; animation-delay: calc(var(--band) * -120ms); }
.is-paused .orbit-turn, .is-paused .ribbon { animation-play-state: paused; }
@keyframes orbit { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@keyframes trace {
  0% { stroke-dasharray: .4 100; stroke-dashoffset: 0; }
  43%, 57% { stroke-dasharray: 100 100; stroke-dashoffset: 0; }
  100% { stroke-dasharray: .4 100; stroke-dashoffset: -100; }
}
@media (prefers-reduced-motion: reduce) {
  .motion-enabled .orbit-turn, .motion-enabled .ribbon { animation: none; }
  .motion-toggle { display: none; }
}