[data-animate] {
  opacity: 0;
  transition-property: opacity, transform;
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

[data-animate].is-visible {
  opacity: 1;
  transform: none !important;
}

[data-animate="fade-up"]    { transform: translateY(40px); }
[data-animate="fade-down"]  { transform: translateY(-40px); }
[data-animate="fade-left"]  { transform: translateX(40px); }
[data-animate="fade-right"] { transform: translateX(-40px); }
[data-animate="fade"]       { transform: none; }
[data-animate="scale-up"]   { transform: scale(0.9); }
[data-animate="scale-down"] { transform: scale(1.1); }

[data-delay="100"] { transition-delay: 100ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="500"] { transition-delay: 500ms; }
[data-delay="600"] { transition-delay: 600ms; }
[data-delay="700"] { transition-delay: 700ms; }
[data-delay="800"] { transition-delay: 800ms; }

@media (prefers-reduced-motion: reduce) {
  [data-animate] {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.parallax-container {
  overflow: hidden;
  position: relative;
}

.parallax-el {
  will-change: transform;
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  opacity: 0.6;
  will-change: transform;
}

.glow-orb--primary {
  background: radial-gradient(circle, rgba(90, 79, 207, 0.5) 0%, transparent 70%);
}

.glow-orb--green {
  background: radial-gradient(circle, rgba(129, 239, 127, 0.35) 0%, transparent 70%);
}

.glow-orb--pink {
  background: radial-gradient(circle, rgba(252, 141, 173, 0.35) 0%, transparent 70%);
}

.tilt-card {
  transform-style: preserve-3d;
  transition: transform var(--transition-base);
}

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

.marquee {
  overflow: hidden;
  white-space: nowrap;
}

.marquee__track {
  display: inline-flex;
  animation: marquee 30s linear infinite;
}

.marquee__track:hover {
  animation-play-state: paused;
}

@keyframes count-up {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.stat-number.is-counting {
  animation: count-up 400ms ease forwards;
}

@keyframes page-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-content {
  animation: page-enter 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes ripple {
  from { transform: scale(0); opacity: 0.4; }
  to   { transform: scale(4); opacity: 0; }
}

.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255, 255, 255, 0.15);
  transform: scale(0);
  opacity: 0;
}

.btn:active::after {
  animation: ripple 400ms ease forwards;
}

@keyframes shimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg-surface) 25%,
    var(--color-bg-elevated) 50%,
    var(--color-bg-surface) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}