[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  transition-delay: var(--reveal-delay, 0ms);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.float-card {
  animation: floatY 4.5s ease-in-out infinite;
}

.float-card:nth-child(2) {
  animation-delay: 0.8s;
}

.hero .info-card {
  animation: softFloat 6s ease-in-out infinite;
}

@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes softFloat {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.hero .info-card:hover {
  animation-play-state: paused;
}

.hero__brand,
.hero__badge-wrap,
.hero__title,
.hero__lead,
.hero__card-wrap {
  opacity: 1;
  transform: none;
}

html.js .hero__brand,
html.js .hero__badge-wrap,
html.js .hero__title,
html.js .hero__lead,
html.js .hero__card-wrap {
  opacity: 0;
  transform: translateY(18px);
}

html.is-ready .hero__brand,
html.is-ready .hero__badge-wrap,
html.is-ready .hero__title,
html.is-ready .hero__lead,
html.is-ready .hero__card-wrap {
  animation: heroIn 0.8s ease forwards;
}

html.is-ready .hero__brand {
  animation-delay: 0.05s;
}

html.is-ready .hero__badge-wrap {
  animation-delay: 0.18s;
}

html.is-ready .hero__title {
  animation-delay: 0.3s;
}

html.is-ready .hero__lead {
  animation-delay: 0.42s;
}

html.is-ready .hero__card-wrap {
  animation-delay: 0.55s;
}

@keyframes heroIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

  [data-reveal],
  .hero__brand,
  .hero__badge-wrap,
  .hero__title,
  .hero__lead,
  .hero__card-wrap {
    opacity: 1;
    transform: none;
    animation: none;
    transition: none;
  }

  .float-card,
  .info-card,
  .post-card {
    animation: none;
  }
}