.js .statement__copy,
.js [data-late-reveal] {
  opacity: 0;
}

.js body.is-loading [data-late-reveal] {
  visibility: hidden;
  pointer-events: none;
}

.js body.is-ready [data-late-reveal] { visibility: visible; }

.js .statement__copy.is-writing { opacity: 1; }

.js body.is-static.is-ready .statement__copy,
.js body.is-static.is-ready [data-late-reveal],
.js body.is-static.is-ready .write-character {
  opacity: 1;
  clip-path: none;
  transform: none;
  animation: none;
}

.js body.is-static.is-ready .statement--right .statement__copy { transition: none; }

.js body.is-static.is-ready .write-word.is-circled .word-circle__stroke {
  opacity: 1;
  stroke-dashoffset: 0;
  animation: none;
}

.js .write-character {
  opacity: 0;
  clip-path: inset(-0.12em 100% -0.12em 0);
  transform: translateY(0.045em);
}

.js .is-writing .write-character {
  animation: write-character var(--char-duration, 234ms) cubic-bezier(0.25, 0.76, 0.24, 1) both;
  animation-delay: calc(var(--char-index) * var(--char-delay));
}

.js .write-word.is-circled .word-circle__stroke {
  animation: circle-word 1196ms cubic-bezier(0.35, 0.1, 0.2, 1) both;
}

.js .write-word.is-circled .word-circle__stroke--2 {
  animation-delay: 110ms;
  animation-duration: 1352ms;
}

.preloader__tagline {
  position: fixed;
  z-index: 2;
  top: calc(50% + clamp(5.8rem, 12.5vmin, 9.6rem) + clamp(0.8rem, 2vmin, 1.2rem));
  left: 50%;
  margin: 0;
  color: var(--ink);
  font-family: "Caveat", cursive;
  font-size: clamp(1.65rem, 3vmin, 2.35rem);
  font-weight: 500;
  letter-spacing: 0.015em;
  line-height: 1;
  white-space: nowrap;
  transform: translateX(-50%);
  transition:
    opacity 416ms ease,
    transform 546ms cubic-bezier(0.22, 1, 0.36, 1);
}

.preloader.is-splitting .preloader__tagline {
  opacity: 0;
  transform: translate(-50%, -0.45rem);
}

.js body.is-ready [data-late-reveal] {
  animation: reveal-late 780ms cubic-bezier(0.2, 0.75, 0.2, 1) both;
}

.js body.is-ready .site-header { animation-delay: 80ms; }
.js body.is-ready .hero-support { animation-delay: 280ms; }

.preloader.is-splitting::before {
  opacity: 0;
  transition: opacity 1105ms cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-mark::before,
.preloader__mark::before {
  animation: mark-glow-breathe 10.4s ease-in-out infinite;
}

@keyframes write-character {
  0% {
    opacity: 0.2;
    clip-path: inset(-0.12em 100% -0.12em 0);
    transform: translateY(0.045em);
  }
  100% {
    opacity: 1;
    clip-path: inset(-0.12em -0.1em -0.12em 0);
    transform: translateY(0);
  }
}

@keyframes reveal-late {
  from { opacity: 0; transform: translateY(0.7rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes circle-word {
  0% { opacity: 0; stroke-dashoffset: 1; }
  8% { opacity: 1; }
  100% { opacity: 1; stroke-dashoffset: 0; }
}

@keyframes mark-glow-breathe {
  0%, 100% { opacity: var(--mark-glow-low); }
  50% { opacity: var(--mark-glow-high); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }

  .js .statement__copy,
  .js [data-late-reveal],
  .js .write-character {
    opacity: 1;
    clip-path: none;
    transform: none;
  }

  .js .write-word.is-circled .word-circle__stroke {
    opacity: 1;
    stroke-dashoffset: 0;
  }

  .hero-mark::before,
  .preloader__mark::before { animation: none; opacity: var(--mark-glow-low); }
}