.page-transition-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--primary);
  transform-origin: bottom;
  animation: pageReveal 0.7s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}

@keyframes pageReveal {
  0%   { transform: scaleY(1); }
  100% { transform: scaleY(0); }
}

.reveal {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4,0,0.2,1), transform 0.8s cubic-bezier(0.4,0,0.2,1);
}

.reveal-up    { transform: translateY(40px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-zoom  { transform: scale(0.9); }

.reveal.visible {
  opacity: 1;
  transform: none;
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

.hero-badge    { animation: heroSpring 0.7s 0.2s cubic-bezier(0.34,1.56,0.64,1) both; }
.hero h1       { animation: heroSpring 0.8s 0.35s cubic-bezier(0.34,1.56,0.64,1) both; }
.hero p        { animation: heroSpring 0.8s 0.5s cubic-bezier(0.34,1.56,0.64,1) both; }
.hero-actions  { animation: heroSpring 0.8s 0.65s cubic-bezier(0.34,1.56,0.64,1) both; }
.hero-stats    { animation: heroSpring 0.8s 0.8s cubic-bezier(0.34,1.56,0.64,1) both; }
.hero-visual   { animation: heroClayPop 1s 0.3s cubic-bezier(0.34,1.56,0.64,1) both; }

@keyframes heroSpring {
  from { opacity: 0; transform: translateY(40px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes heroClayPop {
  from { opacity: 0; transform: scale(0.8) rotate(-4deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}

.navbar {
  animation: navSlide 0.5s 0.1s ease both;
}

@keyframes navSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 9999;
}

.scroll-progress-bar {
  height: 100%; width: 0%;
  background: var(--cta);
  transition: width 0.1s linear;
}

@media (prefers-reduced-motion: reduce) {
  .reveal, .hero-badge, .hero h1, .hero p, .hero-actions, .hero-stats,
  .hero-visual, .navbar { animation: none !important; }
}