.splash {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .layers {
    animation: assemble 900ms var(--ease) both;
  }
  .layer {
    animation: illuminate 800ms var(--ease) both;
    animation-delay: calc(var(--i) * 25ms);
  }
  .trace {
    animation: trace 10s var(--ease) 400ms infinite both;
  }
  @keyframes assemble {
    from {
      transform: translate(24px, 12px);
      opacity: 0;
    }
    to {
      transform: translate(0, 0);
      opacity: 1;
    }
  }
  @keyframes illuminate {
    from {
      stroke: var(--spark);
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  @keyframes trace {
    0% {
      stroke-dashoffset: 1;
      opacity: 0;
    }
    5%,
    28% {
      opacity: 1;
    }
    40%,
    100% {
      stroke-dashoffset: -1;
      opacity: 0;
    }
  }
  .fill {
    transform-origin: left;
    animation: grow 1.2s var(--ease) both;
  }
  @keyframes grow {
    from {
      transform: scaleX(0);
    }
  }
  .intro > * {
    animation: rise 600ms var(--ease) both;
  }
  .intro > :nth-child(2) {
    animation-delay: 60ms;
  }
  .intro > :nth-child(n + 3) {
    animation-delay: 120ms;
  }
  @keyframes rise {
    from {
      opacity: 0;
      transform: translateY(18px);
    }
  }
  @keyframes peek {
    from {
      opacity: 0;
      transform: translateY(64px);
    }
  }
  .motion .hero-stage {
    animation: peek 700ms var(--ease) 150ms both;
  }
  html.opening main {
    z-index: 20;
  }
  html.opened .intro > *,
  html.opened .hero > .proof,
  html.opened .hero-stage {
    animation: none;
  }
  html.opening .splash {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: var(--iron);
    pointer-events: none;
    animation: splash-out 400ms ease-out 2440ms both;
  }
  html.opening .splash .sculpture {
    width: min(46vh, 34vw);
    animation: splash-settle 400ms var(--ease) 2440ms both;
  }
  html.opening .splash .guides {
    animation: splash-in 400ms var(--ease) both;
  }
  html.opening .splash .layers {
    animation: none;
  }
  html.opening .splash .layer {
    animation: splash-in 500ms var(--ease) both;
    animation-delay: calc(1000ms + (18 - var(--i)) * 30ms);
  }
  html.opening .splash .face {
    stroke-dasharray: 1 1;
    animation: splash-draw 900ms var(--ease) 150ms both;
  }
  html.opening .splash .trace {
    animation: splash-trace 1100ms linear 1500ms both;
  }
  .splash-word {
    position: absolute;
    top: calc(50% + min(23vh, 17vw) + 32px);
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.04em;
    animation: splash-in 500ms var(--ease) 900ms both;
  }
  html.opening .intro > *,
  html.opening .hero-stage {
    animation: splash-pop 550ms cubic-bezier(0.2, 1.3, 0.4, 1) 2845ms both;
  }
  html.opening .intro > :nth-child(2) {
    animation-delay: 2915ms;
  }
  html.opening .intro > :nth-child(3) {
    animation-delay: 2985ms;
  }
  html.opening .intro > :nth-child(n + 4) {
    animation-delay: 3055ms;
  }
  html.opening .hero-stage {
    animation-duration: 650ms;
    animation-delay: 3065ms;
  }
  html.opening .hero > .proof {
    animation: splash-pop 550ms cubic-bezier(0.2, 1.3, 0.4, 1) 3200ms both;
  }
  @keyframes splash-in {
    from {
      opacity: 0;
    }
  }
  @keyframes splash-draw {
    from {
      stroke-dashoffset: 1;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
  @keyframes splash-trace {
    0% {
      stroke-dashoffset: 1;
      opacity: 0;
    }
    10%,
    70% {
      opacity: 1;
    }
    100% {
      stroke-dashoffset: -1;
      opacity: 0;
    }
  }
  @keyframes splash-out {
    to {
      opacity: 0;
    }
  }
  @keyframes splash-settle {
    to {
      transform: scale(0.97);
    }
  }
  @keyframes splash-pop {
    from {
      opacity: 0;
      transform: scale(0.96);
    }
  }
  .motion .closing:not(.in) :is(.layers, .layer, .trace) {
    animation-play-state: paused;
  }
  .motion .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
      opacity 340ms var(--ease) var(--d, 0ms),
      transform 340ms var(--ease) var(--d, 0ms);
  }
  .motion .reveal.in {
    opacity: 1;
    transform: none;
  }
  @supports (animation-timeline: view()) {
    .motion .pitch-stage > figure,
    .motion .screens-stage {
      animation: lift linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
  @keyframes lift {
    from {
      opacity: 0;
      transform: translateY(72px) scale(0.94);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .motion .fill {
    animation: none;
    transform: scaleX(0);
    transition: transform 900ms var(--ease) calc(var(--d, 0ms) + var(--i, 0) * 70ms);
  }
  .motion .bars figure.in .fill {
    transform: none;
  }
}
@media print {
  .motion .reveal,
  .motion .fill {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}