/* Super Cool Scroll Animations */

/* Floating particles background */
.scroll-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.scroll-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: linear-gradient(45deg, var(--accent), var(--accent2));
  border-radius: 50%;
  opacity: 0;
  animation: floatUp 3s linear infinite;
}

@keyframes floatUp {
  0% {
    opacity: 0;
    transform: translateY(100vh) scale(0);
  }
  10% {
    opacity: 1;
    transform: translateY(90vh) scale(1);
  }
  90% {
    opacity: 1;
    transform: translateY(10vh) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(0) scale(0);
  }
}

/* Scroll progress indicator */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  z-index: 1000;
  transition: width 0.1s ease-out;
  box-shadow: 0 0 10px rgba(120, 219, 255, 0.5);
}

/* Parallax scroll effects */
.parallax-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background: radial-gradient(circle at 20% 80%, rgba(120, 219, 255, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
              radial-gradient(circle at 40% 40%, rgba(167, 139, 250, 0.1) 0%, transparent 50%);
  z-index: -2;
  will-change: transform;
}

/* Enhanced scroll animations for sections */
.scroll-reveal {
  opacity: 0;
  transform: translateY(50px) scale(0.95);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Staggered animations */
.scroll-reveal:nth-child(1) { transition-delay: 0ms; }
.scroll-reveal:nth-child(2) { transition-delay: 100ms; }
.scroll-reveal:nth-child(3) { transition-delay: 200ms; }
.scroll-reveal:nth-child(4) { transition-delay: 300ms; }
.scroll-reveal:nth-child(5) { transition-delay: 400ms; }
.scroll-reveal:nth-child(6) { transition-delay: 500ms; }

/* Scroll-triggered text effects */
.text-reveal {
  overflow: hidden;
  position: relative;
}

.text-reveal .text-content {
  transform: translateY(100%);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.text-reveal.revealed .text-content {
  transform: translateY(0);
}

/* Morphing shapes on scroll */
.morph-shape {
  position: absolute;
  width: 100px;
  height: 100px;
  background: linear-gradient(45deg, var(--accent), var(--accent2));
  border-radius: 50%;
  opacity: 0.1;
  transition: all 1s ease-out;
  will-change: transform, border-radius;
}

.morph-shape.morphed {
  border-radius: 20%;
  transform: scale(1.5) rotate(45deg);
  opacity: 0.2;
}

/* Scroll velocity effects */
.velocity-blur {
  transition: filter 0.3s ease-out;
}

.velocity-blur.fast-scroll {
  filter: blur(2px);
}

/* 3D tilt effect on scroll */
.tilt-on-scroll {
  transform-style: preserve-3d;
  transition: transform 0.6s ease-out;
}

.tilt-on-scroll.tilted {
  transform: perspective(1000px) rotateX(5deg) rotateY(-5deg);
}

/* Magnetic cursor effect */
.magnetic-element {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
}

.magnetic-element:hover {
  transform: scale(1.05);
}

/* Scroll-triggered glow effects */
.glow-on-scroll {
  transition: box-shadow 0.6s ease-out, transform 0.6s ease-out;
}

.glow-on-scroll.glowing {
  box-shadow: 0 0 30px rgba(120, 219, 255, 0.3),
              0 0 60px rgba(120, 219, 255, 0.2),
              0 0 90px rgba(120, 219, 255, 0.1);
  transform: translateY(-5px);
}

/* Typewriter effect on scroll */
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: none;
}

.typewriter.typing {
  animation: typewriter 2s steps(40, end) forwards;
}

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

/* Scroll-triggered counter animation */
.counter {
  font-variant-numeric: tabular-nums;
}

.counter.counting {
  animation: countUp 2s ease-out forwards;
}

/* Ripple effect on scroll */
.ripple-container {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(120, 219, 255, 0.3);
  transform: scale(0);
  animation: ripple-animation 0.8s ease-out;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Scroll-triggered path drawing */
.draw-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 2s ease-out;
}

.draw-path.drawn {
  stroke-dashoffset: 0;
}

/* Floating elements on scroll */
.float-on-scroll {
  transition: transform 0.6s ease-out;
}

.float-on-scroll.floating {
  animation: gentleFloat 3s ease-in-out infinite;
}

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

/* Scroll-triggered color shifts */
.color-shift {
  transition: background 1s ease-out, color 1s ease-out;
}

.color-shift.shifted {
  background: linear-gradient(135deg, var(--accent2), var(--accent));
  color: #051019;
}

/* Advanced parallax layers */
.parallax-layer {
  position: absolute;
  width: 100%;
  height: 100%;
  will-change: transform;
}

.parallax-layer-1 { transform: translateZ(-1px) scale(2); }
.parallax-layer-2 { transform: translateZ(-2px) scale(3); }
.parallax-layer-3 { transform: translateZ(-3px) scale(4); }

/* Scroll snap enhancement */
.scroll-snap-section {
  scroll-snap-align: start;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Performance optimizations */
.scroll-optimized {
  contain: layout style paint;
  will-change: transform;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .scroll-reveal,
  .text-reveal .text-content,
  .morph-shape,
  .tilt-on-scroll,
  .glow-on-scroll,
  .float-on-scroll {
    transition: none;
    animation: none;
    transform: none;
  }
  
  .scroll-reveal {
    opacity: 1;
  }
  
  .text-reveal .text-content {
    transform: none;
  }
  
  .scroll-particles {
    display: none;
  }
}

/* Mobile optimizations */
@media (max-width: 768px) {
  .scroll-reveal {
    transform: translateY(30px) scale(0.98);
  }
  
  .parallax-bg {
    transform: none;
  }
  
  .scroll-particles .scroll-particle {
    width: 2px;
    height: 2px;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .scroll-progress {
    background: #ffffff;
    box-shadow: none;
  }
  
  .scroll-particle {
    background: #ffffff;
  }
}