:root {
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .js [data-reveal],
  .js [data-reveal-stagger] > * {
    opacity: 0;
    translate: 0 28px;
    transition:
      opacity 0.9s var(--ease-out) var(--reveal-delay, 0ms),
      translate 1.1s var(--ease-out) var(--reveal-delay, 0ms),
      box-shadow 0.3s var(--ease-out),
      filter 0.3s var(--ease-out);
  }

  .js [data-reveal='fade'] {
    translate: none;
    transition: opacity 1.4s var(--ease-out) var(--reveal-delay, 0ms);
  }

  .js [data-reveal='zoom'] {
    translate: none;
    scale: 1.08;
    transition:
      opacity 1.6s var(--ease-out) var(--reveal-delay, 0ms),
      scale 2.6s var(--ease-out) var(--reveal-delay, 0ms);
  }

  .js [data-reveal].is-visible,
  .js [data-reveal-stagger].is-visible > * {
    opacity: 1;
    translate: none;
    scale: none;
  }

  .js [data-draw] {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    transition: stroke-dashoffset 2.8s var(--ease-in-out) 0.9s;
  }

  .js [data-draw].is-visible {
    stroke-dashoffset: 0;
  }

  [data-pulse] > .ripple {
    transform-box: fill-box;
    transform-origin: center;
    animation: arq-pulse 3.6s var(--ease-out) infinite backwards;
  }

  a[href='#join'],
  a.cta,
  #join button {
    transition:
      box-shadow 0.3s var(--ease-out),
      filter 0.3s var(--ease-out);
  }

  a[href='#join']:hover,
  a.cta:hover,
  #join button:hover {
    box-shadow: 0 10px 36px rgba(166, 247, 234, 0.24);
    filter: brightness(1.06);
  }

  a[href='#join'] svg,
  a.cta svg {
    transition: translate 0.3s var(--ease-out);
  }

  a[href='#join']:hover svg,
  a.cta:hover svg {
    translate: 4px 0;
  }
}

.ripple {
  opacity: 0;
}

@keyframes arq-pulse {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  70%,
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}