/* Zero-Dependency High-Fidelity Animation System */

:root {
  --anim-ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --anim-duration: 1.2s;
}

/* Global Reset for Smooth Scroll */
body {
  margin: 0;
  width: 100%;
  overflow-x: hidden;
}

.scroll-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: 10;
}

.scroll-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  will-change: transform;
  display: flex;
  flex-direction: column;
}

.scroll-spacer {
  width: 100%;
  pointer-events: none;
}

/* Ensure UI elements are above the scroller */
.navbar, .navbar-container { z-index: 9999 !important; }
.loader-wrapper { z-index: 10000 !important; }
.custom-cursor { z-index: 10001 !important; }
.scroll-to-top { z-index: 9998 !important; }

/* Scroll Progress Bar */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255, 255, 255, 0.1);
  z-index: 9999;
}

.scroll-progress-bar {
  height: 100%;
  width: 0%;
  background: var(--color-electric-indigo, #5374FF);
  box-shadow: 0 0 15px var(--color-electric-indigo, #5374FF);
  transition: width 0.1s linear;
}

/* Reveal Animations */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--anim-duration) var(--anim-ease-out-expo),
              transform var(--anim-duration) var(--anim-ease-out-expo);
  will-change: opacity, transform;
}

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

.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: opacity var(--anim-duration) var(--anim-ease-out-expo),
              transform var(--anim-duration) var(--anim-ease-out-expo);
}

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

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: opacity var(--anim-duration) var(--anim-ease-out-expo),
              transform var(--anim-duration) var(--anim-ease-out-expo);
}

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

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--anim-duration) var(--anim-ease-out-expo),
              transform var(--anim-duration) var(--anim-ease-out-expo);
}

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

/* Staggered Reveals */
.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; }

/* Parallax Elements */
.parallax {
  will-change: transform;
}