/* Animations: slide/fade and reveal controls */
@keyframes slideInFromRight {
  0% { transform: translateX(28px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes fadeUp {
  0% { transform: translateY(10px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

:root {
  --reveal-ease: cubic-bezier(.2,.9,.2,1);
}

/* Triggered on page load */
.animate-in .hero-aside img {
  animation: slideInFromRight 1.6s var(--reveal-ease) both;
  animation-delay: 360ms;
}

.animate-in .hero-content {
  animation: fadeUp 1.3s var(--reveal-ease) both;
  animation-delay: 220ms;
}

/* Generic reveal attribute for elements to animate when in view */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 1600ms var(--reveal-ease), transform 1600ms var(--reveal-ease);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .animate-in .hero-aside img,
  .animate-in .hero-content,
  [data-reveal] {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}