.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  will-change: opacity, transform;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal-left.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal-right.active {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}

.reveal-scale.active {
  opacity: 1;
  transform: scale(1);
}

/* Staggered Children Setup */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }

.reveal.active.stagger-1,
.reveal.active.stagger-2,
.reveal.active.stagger-3,
.reveal.active.stagger-4,
.reveal.active.stagger-5 {
  transition-delay: 0s;
}

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

@keyframes pulse-glow {
  0% { box-shadow: 0 0 0 0 var(--accent-glow); }
  70% { box-shadow: 0 0 0 14px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

@keyframes aurora-drift {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(3%, -4%) scale(1.08); }
  100% { transform: translate(0, 0) scale(1); }
}

.mouse-icon {
  width: 30px;
  height: 46px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 20px;
  position: relative;
  display: flex;
  justify-content: center;
}

.mouse-wheel {
  width: 4px;
  height: 8px;
  background-color: #fff;
  border-radius: 2px;
  margin-top: 8px;
  animation: scrollWheel 2s cubic-bezier(0.15, 0.41, 0.69, 0.94) infinite;
}

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

@media (max-width: 768px) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    transition-duration: 0.5s;
  }
}

@media (max-width: 480px) {
  .reveal:not(.active),
  .reveal-left:not(.active),
  .reveal-right:not(.active),
  .reveal-scale:not(.active) {
    opacity: 0.001;
  }
}