/* =====================================================
   CiroX Landing — Animation System
   Layer 0: Micro-interactions (100-200ms)
   Layer 1: Component transitions (300-400ms)
   Layer 2: Section reveals (500-800ms, staggered)
   Layer 3: Ambient/continuous (infinite)
   ===================================================== */

/* ===================== LAYER 0: MICRO-INTERACTIONS ===================== */

@keyframes tap {
  0% { transform: scale(1); }
  50% { transform: scale(0.97); }
  100% { transform: scale(1); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; }
  50% { opacity: 0.85; box-shadow: 0 0 0 6px transparent; }
}

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

@keyframes border-glow {
  0%, 100% { border-color: var(--border-subtle); box-shadow: 0 0 0 0 transparent; }
  50% { border-color: var(--border-active); box-shadow: 0 0 20px rgba(34,211,238,0.15); }
}

/* ===================== LAYER 1: COMPONENT TRANSITIONS ===================== */

@keyframes scale-in {
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes slide-up {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes slide-down {
  0% { opacity: 0; transform: translateY(-20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes slide-right {
  0% { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes slide-left {
  0% { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes modal-enter {
  0% { opacity: 0; transform: scale(0.92) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes overlay-enter {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ===================== LAYER 2: SECTION REVEALS ===================== */

@keyframes reveal-up {
  0% { opacity: 0; transform: translateY(48px) scale(0.98); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes reveal-fade {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes reveal-scale {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes stagger-fade-up {
  0% { opacity: 0; transform: translateY(24px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ===================== LAYER 3: AMBIENT/CONTINUOUS ===================== */

@keyframes mesh-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(2%, -3%) scale(1.05); }
  66% { transform: translate(-2%, 2%) scale(0.98); }
}

@keyframes mesh-drift-alt {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-3%, 2%) scale(1.03); }
  66% { transform: translate(2%, -2%) scale(0.97); }
}

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

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

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.05); opacity: 0.85; }
}

@keyframes spin-slow {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

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

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

@keyframes ping-soft {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

@keyframes ping-ring {
  0% { transform: scale(0.8); opacity: 0.8; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* ===================== LAYER 4: DELIGHT/ONE-SHOT ===================== */

@keyframes burst-in {
  0% { opacity: 0; transform: scale(0.8) translateZ(0) rotate(-2deg); }
  60% { opacity: 1; transform: scale(1.05) translateZ(0) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) translateZ(0) rotate(0); }
}

@keyframes slide-in-bounce {
  0% { opacity: 0; transform: translateX(30px) scale(0.9); }
  60% { opacity: 1; transform: translateX(-4px) scale(1.02); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

/* ===================== ANIMATION UTILITIES ===================== */

.animate-tap:active { animation: tap var(--dur-instant) var(--ease-instant); }
.animate-pulse-dot { animation: pulse-dot 2s var(--ease-base) infinite; }
.animate-breathe { animation: breathe 3s var(--ease-base) infinite; }
.animate-float { animation: float 4s var(--ease-slow) infinite; }
.animate-float-reverse { animation: float-reverse 4.5s var(--ease-slow) infinite; }
.animate-spin-slow { animation: spin-slow 20s linear infinite; }

/* Shimmer text utility */
.text-shimmer {
  background: var(--grad-text-shimmer);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: text-shimmer 4s linear infinite;
}

/* Gradient flow background */
.gradient-flow {
  background: var(--grad-brand);
  background-size: 200% 200%;
  animation: gradient-flow 4s ease infinite;
}

/* Ping ring indicator */
.ping-ring {
  position: relative;
}
.ping-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: currentColor;
  animation: ping-ring 1.8s var(--ease-base) infinite;
  opacity: 0.6;
  z-index: -1;
}

/* ===================== SECTION REVEAL SYSTEM ===================== */

.reveal {
  opacity: 0;
  transform: translateY(40px) scale(0.98);
  transition: opacity 0.7s var(--ease-slow), 
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
  filter: blur(4px);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.reveal-fade {
  opacity: 0;
  transition: opacity 0.7s var(--ease-slow);
  will-change: opacity;
}
.reveal-fade.is-visible {
  opacity: 1;
}

/* Stagger children - set via --stagger-* tokens or inline */
.stagger > * {
  opacity: 0;
  transform: translateY(24px);
  animation: stagger-fade-up 0.6s var(--ease-quick) forwards;
  animation-play-state: paused;
}
.stagger.is-visible > * {
  animation-play-state: running;
}
.stagger.is-visible > *:nth-child(1) { animation-delay: var(--stagger-1); }
.stagger.is-visible > *:nth-child(2) { animation-delay: var(--stagger-2); }
.stagger.is-visible > *:nth-child(3) { animation-delay: var(--stagger-3); }
.stagger.is-visible > *:nth-child(4) { animation-delay: var(--stagger-4); }
.stagger.is-visible > *:nth-child(5) { animation-delay: var(--stagger-5); }
.stagger.is-visible > *:nth-child(6) { animation-delay: var(--stagger-6); }
.stagger.is-visible > *:nth-child(7) { animation-delay: var(--stagger-7); }
.stagger.is-visible > *:nth-child(8) { animation-delay: var(--stagger-8); }

/* ===================== HOVER MICRO-INTERACTIONS ===================== */

.hover-lift {
  transition: transform var(--dur-quick) var(--ease-spring), 
              box-shadow var(--dur-quick) var(--ease-quick),
              border-color var(--dur-quick) var(--ease-quick);
}
.hover-lift:hover {
  transform: translateY(-4px);
}

.hover-scale {
  transition: transform var(--dur-quick) var(--ease-spring);
}
.hover-scale:hover {
  transform: scale(1.02);
}

.hover-glow-cyan {
  transition: box-shadow var(--dur-quick) var(--ease-quick),
              border-color var(--dur-quick) var(--ease-quick);
}
.hover-glow-cyan:hover {
  box-shadow: var(--shadow-glow-cyan);
  border-color: var(--border-active);
}

/* ===================== TYPING INDICATOR ===================== */

.typing-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: typing-bounce 1.4s var(--ease-base) infinite;
}
.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-6px); opacity: 1; }
}

/* ===================== PROGRESS BAR FILL ===================== */

@keyframes progress-fill {
  0% { width: 0%; }
  100% { width: var(--target-width, 100%); }
}

.progress-bar-animated {
  animation: progress-fill 1s var(--ease-slow) forwards;
  animation-play-state: paused;
}
.progress-bar-animated.is-visible {
  animation-play-state: running;
}

/* ===================== COUNTER (for JS-driven count-up) ===================== */

.count-up {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}