@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-10px); } 60% { transform: translateY(-5px); } }
@keyframes spin { from { transform: rotate(0turn); } to { transform: rotate(1turn); } }
@keyframes scrollDownLoop { 0% { transform: translate(540px, 100px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(540px, 564px); opacity: 0; } }
@keyframes arrowFadeLoop { 0% { stroke-opacity: 0; } 10% { stroke-opacity: 1; } 90% { stroke-opacity: 1; } 100% { stroke-opacity: 0; } }
@keyframes heroBgDrift { 0% { transform: scale(1.06) translate3d(0, 0%, 0); } 50% { transform: scale(1.08) translate3d(-0.6%, -0.8%, 0); } 100% { transform: scale(1.1) translate3d(0.6%, -1.6%, 0); } }
@keyframes heroOverlayDrift { 0% { transform: translate3d(0, 0%, 0); } 100% { transform: translate3d(0, -1%, 0); } }

@keyframes slideInLeft { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideInRight { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.96); filter: blur(2px); } to { opacity: 1; transform: scale(1); filter: blur(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

[data-animate] { opacity: 0; transform: translateZ(0); will-change: opacity, transform; }
.will-animate { transition: transform var(--a-duration, 0.7s) ease-out var(--a-delay, 0s), opacity var(--a-duration, 0.7s) ease-out var(--a-delay, 0s); }
.will-animate[data-animate="fade-up"] { transform: translate3d(0, 18px, 0); }
.will-animate[data-animate="fade"] { transform: none; }
.will-animate[data-animate="slide-left"] { transform: translate3d(-18px, 0, 0); }
.will-animate[data-animate="slide-right"] { transform: translate3d(18px, 0, 0); }
.will-animate[data-animate="scale-in"] { transform: scale(0.96); filter: blur(2px); }
.is-visible { opacity: 1; transform: none; filter: none; }

@media (prefers-reduced-motion: reduce) {
  .will-animate { transition: none; }
}