[data-reveal],
[data-reveal-group] > * {
  opacity: 1;
  transform: none;
}

[data-reveal].is-revealed,
[data-reveal-group].is-revealed > * {
  animation: tf-reveal var(--duration-slow) var(--ease-out) backwards;
}

[data-reveal-group].is-revealed > * {
  animation-delay: calc(var(--i, 0) * 80ms);
}

@keyframes tf-reveal {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes tf-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.6);
    opacity: 0.4;
  }
}

@keyframes tf-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes tf-drift {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 1200px 0;
  }
}

@keyframes tf-wave {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes tf-hero-particle-up {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  12% {
    opacity: var(--particle-peak, 0.24);
  }
  88% {
    opacity: var(--particle-peak, 0.24);
  }
  100% {
    transform: translateY(-560px) translateX(var(--drift, 24px));
    opacity: 0;
  }
}

.anim-float {
  animation: tf-float 6s var(--ease-in-out) infinite;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal].is-revealed,
  [data-reveal-group].is-revealed > *,
  [data-reveal],
  [data-reveal-group] > * {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .anim-float,
  [data-parallax] {
    animation: none !important;
    transform: none !important;
  }
  .hero__particle {
    animation: none !important;
    opacity: 0.3;
  }
}


@keyframes tf-twinkle-soft {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.6;
  }
}