[data-animate] { opacity: 0; transform: translateY(20px); transition: opacity 1000ms ease, transform 1000ms ease; }
[data-animate].is-visible { opacity: 1; transform: translateY(0); }

[data-animate="fade-left"] { transform: translateX(30px); }
[data-animate="fade-left"].is-visible { transform: translateX(0); }

[data-animate="fade-right"] { transform: translateX(-30px); }
[data-animate="fade-right"].is-visible { transform: translateX(0); }

[data-animate="slide-up"] { transform: translateY(40px); }

[data-parallax] { will-change: transform; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

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

.shape-1 { animation: float 6s ease-in-out infinite; }
.shape-2 { animation: float 7s ease-in-out infinite; }
.shape-3 { animation: float 8s ease-in-out infinite; }

.card { transition: transform 220ms ease, box-shadow 220ms ease; }

.hero-content { animation: fadeIn 700ms ease both; }

@keyframes fadeIn {
  from {
    opacity: 1;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}