/* ==========================================================================
   ANIMATIONS.CSS - Animation Keyframes & Scroll Effects
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll-Triggered Animation Classes
   Elements with these classes start hidden and animate in when visible
   -------------------------------------------------------------------------- */

/* Fade In */
.animate-fade {
  opacity: 0;
  transition: opacity var(--transition-slower);
}

.animate-fade.is-visible {
  opacity: 1;
}

/* Fade Up */
.animate-fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--transition-slower), transform var(--transition-slower);
}

.animate-fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade Down */
.animate-fade-down {
  opacity: 0;
  transform: translateY(-40px);
  transition: opacity var(--transition-slower), transform var(--transition-slower);
}

.animate-fade-down.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Fade Left */
.animate-fade-left {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--transition-slower), transform var(--transition-slower);
}

.animate-fade-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Fade Right */
.animate-fade-right {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--transition-slower), transform var(--transition-slower);
}

.animate-fade-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale In */
.animate-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--transition-slower), transform var(--transition-slower);
}

.animate-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* Blur In */
.animate-blur {
  opacity: 0;
  filter: blur(10px);
  transition: opacity var(--transition-slower), filter var(--transition-slower);
}

.animate-blur.is-visible {
  opacity: 1;
  filter: blur(0);
}

/* --------------------------------------------------------------------------
   Staggered Animations (for lists/grids)
   -------------------------------------------------------------------------- */
.stagger-children > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slower), transform var(--transition-slower);
}

.stagger-children.is-visible > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children.is-visible > *:nth-child(2) { transition-delay: 100ms; }
.stagger-children.is-visible > *:nth-child(3) { transition-delay: 200ms; }
.stagger-children.is-visible > *:nth-child(4) { transition-delay: 300ms; }
.stagger-children.is-visible > *:nth-child(5) { transition-delay: 400ms; }
.stagger-children.is-visible > *:nth-child(6) { transition-delay: 500ms; }
.stagger-children.is-visible > *:nth-child(7) { transition-delay: 600ms; }
.stagger-children.is-visible > *:nth-child(8) { transition-delay: 700ms; }

.stagger-children.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* --------------------------------------------------------------------------
   Hero Animations
   -------------------------------------------------------------------------- */
@keyframes hero-text-reveal {
  from {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes hero-line-expand {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.hero-animate {
  animation: hero-text-reveal 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}

.hero-animate--delay-1 { animation-delay: 0.2s; }
.hero-animate--delay-2 { animation-delay: 0.4s; }
.hero-animate--delay-3 { animation-delay: 0.6s; }
.hero-animate--delay-4 { animation-delay: 0.8s; }
.hero-animate--delay-5 { animation-delay: 1s; }

/* --------------------------------------------------------------------------
   Typing Animation
   -------------------------------------------------------------------------- */
.typing-text {
  display: inline;
  border-right: 2px solid var(--accent-cyan);
  animation: typing-cursor 1s step-end infinite;
}

@keyframes typing-cursor {
  0%, 100% { border-color: var(--accent-cyan); }
  50% { border-color: transparent; }
}

/* --------------------------------------------------------------------------
   Glitch Effect
   -------------------------------------------------------------------------- */
.glitch {
  position: relative;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.glitch:hover::before {
  animation: glitch-1 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) both infinite;
  color: var(--accent-cyan);
  z-index: -1;
}

.glitch:hover::after {
  animation: glitch-2 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) reverse both infinite;
  color: var(--accent-magenta);
  z-index: -2;
}

@keyframes glitch-1 {
  0% {
    opacity: 1;
    transform: translateX(0);
    clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
  }
  20% {
    clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
  }
  30% {
    clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
  }
  40% {
    clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
  }
  50% {
    clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
  }
  55% {
    clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
  }
  60% {
    clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
  }
  65% {
    clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
  }
  70% {
    clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
  }
  80% {
    clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
  }
  85% {
    clip-path: polygon(0 60%, 100% 60%, 100% 70%, 0 70%);
  }
  95% {
    clip-path: polygon(0 72%, 100% 72%, 100% 78%, 0 78%);
  }
  100% {
    opacity: 1;
    transform: translateX(-2px);
    clip-path: polygon(0 90%, 100% 90%, 100% 100%, 0 100%);
  }
}

@keyframes glitch-2 {
  0% {
    opacity: 1;
    transform: translateX(0);
    clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
  }
  15% {
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
  }
  22% {
    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
  }
  31% {
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
  }
  45% {
    clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
  }
  51% {
    clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
  }
  63% {
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
  }
  76% {
    clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
  }
  81% {
    clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
  }
  94% {
    clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
  }
  100% {
    opacity: 1;
    transform: translateX(2px);
    clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
  }
}

/* --------------------------------------------------------------------------
   Glow Pulse Animation
   -------------------------------------------------------------------------- */
@keyframes glow-pulse-cyan {
  0%, 100% {
    box-shadow: 0 0 5px var(--accent-cyan), 0 0 10px var(--accent-cyan-dim);
  }
  50% {
    box-shadow: 0 0 20px var(--accent-cyan), 0 0 40px var(--accent-cyan-dim);
  }
}

@keyframes glow-pulse-magenta {
  0%, 100% {
    box-shadow: 0 0 5px var(--accent-magenta), 0 0 10px var(--accent-magenta-dim);
  }
  50% {
    box-shadow: 0 0 20px var(--accent-magenta), 0 0 40px var(--accent-magenta-dim);
  }
}

.glow-pulse {
  animation: glow-pulse-cyan 2s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   Float Animation
   -------------------------------------------------------------------------- */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}

.float {
  animation: float 4s ease-in-out infinite;
}

.float--delay-1 { animation-delay: 0.5s; }
.float--delay-2 { animation-delay: 1s; }
.float--delay-3 { animation-delay: 1.5s; }

/* --------------------------------------------------------------------------
   Rotate Animation
   -------------------------------------------------------------------------- */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.rotate {
  animation: rotate 20s linear infinite;
}

.rotate--slow {
  animation-duration: 40s;
}

/* --------------------------------------------------------------------------
   Scan Line Effect
   -------------------------------------------------------------------------- */
@keyframes scanline {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100vh);
  }
}

.scanline::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(180deg, transparent, var(--accent-cyan), transparent);
  opacity: 0.1;
  animation: scanline 8s linear infinite;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Particle Fade
   -------------------------------------------------------------------------- */
@keyframes particle-fade {
  0% {
    opacity: 0;
    transform: translateY(20px) scale(0);
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-20px) scale(1);
  }
}

/* --------------------------------------------------------------------------
   Border Animation
   -------------------------------------------------------------------------- */
@keyframes border-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.border-animated {
  position: relative;
}

.border-animated::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-magenta), var(--accent-yellow), var(--accent-cyan));
  background-size: 300% 300%;
  border-radius: inherit;
  z-index: -1;
  animation: border-flow 4s ease infinite;
  opacity: 0;
  transition: opacity var(--transition-base);
}

.border-animated:hover::before {
  opacity: 1;
}

.border-animated::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-primary);
  border-radius: inherit;
  z-index: -1;
}

/* --------------------------------------------------------------------------
   Scroll Progress Indicator
   -------------------------------------------------------------------------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--accent-cyan), var(--accent-magenta));
  z-index: 9999;
  transition: width 100ms linear;
}

/* --------------------------------------------------------------------------
   Loading States
   -------------------------------------------------------------------------- */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* --------------------------------------------------------------------------
   Page Transition
   -------------------------------------------------------------------------- */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--bg-primary);
  z-index: 9999;
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: bottom;
}

.page-transition--entering {
  animation: page-enter 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

.page-transition--exiting {
  animation: page-exit 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}

@keyframes page-enter {
  from { transform: scaleY(0); transform-origin: bottom; }
  to { transform: scaleY(1); transform-origin: bottom; }
}

@keyframes page-exit {
  from { transform: scaleY(1); transform-origin: top; }
  to { transform: scaleY(0); transform-origin: top; }
}

/* --------------------------------------------------------------------------
   Counter Animation (for stats)
   -------------------------------------------------------------------------- */
.counter {
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Magnetic Hover Effect (applied via JS)
   -------------------------------------------------------------------------- */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* --------------------------------------------------------------------------
   Parallax Layers
   -------------------------------------------------------------------------- */
.parallax-container {
  perspective: 1000px;
  overflow: hidden;
}

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

.parallax-layer--slow {
  transform: translateZ(-200px) scale(1.2);
}

.parallax-layer--fast {
  transform: translateZ(100px) scale(0.9);
}

/* --------------------------------------------------------------------------
   Reveal on Scroll (text)
   -------------------------------------------------------------------------- */
.reveal-text {
  overflow: hidden;
}

.reveal-text span {
  display: inline-block;
  transform: translateY(100%);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-text.is-visible span {
  transform: translateY(0);
}