/**
 * Klaritee Child Theme - Animations
 * 
 * All motion, transitions, and interactive effects.
 * Refined for field condition aesthetics - slow, subtle, inevitable.
 * 
 * Animation Principles:
 * - 2-3x slower than typical (28-35s for ambient)
 * - Barely perceptible (viewers question if motion exists)
 * - Linear for field presence (not ease-in-out for decoration)
 * - Atmospheric pressure, not light sources
 * 
 * @package Klaritee_Child
 * @since 1.0.0
 */

/* ============================================
   1. KEYFRAME ANIMATIONS
   ============================================ */

/* Fade In - Base entrance */
@keyframes kt-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fade Slide Up - Section entrance */
@keyframes kt-fade-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade Slide Left - Metric entrance (right column) */
@keyframes kt-fade-slide-left {
  from {
    opacity: 0;
    transform: translateX(-15px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fade Slide Right - Metric entrance (left column) */
@keyframes kt-fade-slide-right {
  from {
    opacity: 0;
    transform: translateX(15px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Zoom In - Shield entrance */
@keyframes kt-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Ambient Field Drift - Cyan field (SLOW) */
@keyframes kt-ambient-drift-cyan {
  0%, 100% {
    transform: translateY(-8px);
    opacity: var(--kt-glow-cyan-ambient);
  }
  50% {
    transform: translateY(8px);
    opacity: 0.035;
  }
}

/* Ambient Field Drift - Gold field (SLOWER) */
@keyframes kt-ambient-drift-gold {
  0%, 100% {
    transform: translateY(-6px);
    opacity: var(--kt-glow-gold-ambient);
  }
  50% {
    transform: translateY(6px);
    opacity: 0.025;
  }
}

/* Ripple Expansion - Humanity section (VERY SLOW) */
@keyframes kt-ripple-expand {
  0% {
    transform: scale(1);
    opacity: 0.06;
  }
  50% {
    opacity: 0.02;
  }
  100% {
    transform: scale(1.3);
    opacity: 0;
  }
}

/* Rotate - Slow geometric rotation */
@keyframes kt-rotate-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Pulse - Subtle presence (for active states only) */
@keyframes kt-pulse-subtle {
  0%, 100% {
    opacity: 0.12;
  }
  50% {
    opacity: 0.18;
  }
}

/* Progress Bar Fill */
@keyframes kt-progress-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Grid Reveal - Geometric pattern entrance */
@keyframes kt-grid-reveal {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.04;
  }
}

/* ============================================
   2. ANIMATION CLASSES
   ============================================ */

/* Base entrance animations - Applied by JavaScript */
.kt-animate-in {
  animation: kt-fade-slide-up var(--kt-anim-base) ease-out forwards;
  opacity: 0;
}

.kt-animate-in.is-visible {
  animation-play-state: running;
}

/* Delayed entrance - For staggered reveals */
.kt-animate-delay-1 {
  animation-delay: 0.1s;
}

.kt-animate-delay-2 {
  animation-delay: 0.2s;
}

.kt-animate-delay-3 {
  animation-delay: 0.3s;
}

.kt-animate-delay-4 {
  animation-delay: 0.4s;
}

.kt-animate-delay-5 {
  animation-delay: 0.5s;
}

/* ============================================
   3. SECTION-SPECIFIC ANIMATIONS
   ============================================ */

/* Hero Section - Ambient fields */
.kt-hero-cyan-field {
  animation: kt-ambient-drift-cyan var(--kt-anim-ambient) ease-in-out infinite;
}

.kt-hero-gold-field {
  animation: kt-ambient-drift-gold var(--kt-anim-field) ease-in-out infinite;
  animation-delay: 2s;
}

.kt-hero-grid {
  animation: kt-grid-reveal 4s ease-out forwards;
  opacity: 0;
}

/* Safety Section - Metrics & Shield */
.kt-safety-metric {
  opacity: 0;
}

.kt-fade-slide-left {
  animation: kt-fade-slide-left var(--kt-anim-base) ease-out forwards;
}

.kt-fade-slide-right {
  animation: kt-fade-slide-right var(--kt-anim-base) ease-out forwards;
}

.kt-zoom-in {
  animation: kt-zoom-in var(--kt-anim-long) ease-out 0.2s forwards;
  opacity: 0;
}

.kt-safety-shield {
  position: relative;
  display: inline-block;
}

/* Roadmap Section - Timeline nodes */
.kt-roadmap-line {
  animation: kt-fade-in 2s ease-out 0.2s forwards;
  opacity: 0;
}

.kt-roadmap-node {
  opacity: 0;
  animation: kt-fade-slide-up var(--kt-anim-base) ease-out forwards;
}

.kt-roadmap-node:nth-child(1) { animation-delay: 0.3s; }
.kt-roadmap-node:nth-child(2) { animation-delay: 0.4s; }
.kt-roadmap-node:nth-child(3) { animation-delay: 0.5s; }
.kt-roadmap-node:nth-child(4) { animation-delay: 0.6s; }
.kt-roadmap-node:nth-child(5) { animation-delay: 0.7s; }

/* Roadmap node glows - Status-based */
.kt-roadmap-node--active .kt-node-glow {
  opacity: 0.15;
}

.kt-roadmap-node--development .kt-node-glow {
  opacity: 0.08;
}

.kt-roadmap-node--planned .kt-node-glow {
  opacity: 0.03;
}

/* Progress Grid - Bars */
.kt-progress-bar {
  transform-origin: left center;
  animation: kt-progress-fill 1.2s ease-out forwards;
}

.kt-progress-bar:nth-child(1) { animation-delay: 0.2s; }
.kt-progress-bar:nth-child(2) { animation-delay: 0.3s; }
.kt-progress-bar:nth-child(3) { animation-delay: 0.4s; }

/* Humanity Section - Ripples (VERY SLOW) */
.kt-ripple-ring {
  animation: kt-ripple-expand var(--kt-anim-ripple) linear infinite;
}

.kt-ripple-ring:nth-child(1) { animation-delay: 0s; }
.kt-ripple-ring:nth-child(2) { animation-delay: 7s; }
.kt-ripple-ring:nth-child(3) { animation-delay: 14s; }
.kt-ripple-ring:nth-child(4) { animation-delay: 21s; }

/* Philosophy Section - Slow rotation */
.kt-philosophy-circle {
  animation: kt-rotate-slow 35s linear infinite;
}

/* ============================================
   4. HOVER EFFECTS
   ============================================ */

/* Button Hover - Subtle glow */
.kt-button {
  position: relative;
  transition: all var(--kt-transition-base);
  overflow: hidden;
}

.kt-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.kt-button:hover::before {
  width: 300px;
  height: 300px;
}

.kt-button:hover {
  border-color: rgba(0, 212, 255, 0.4);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.15);
}

/* Card Hover - Field presence */
.kt-card {
  transition: all var(--kt-transition-slow);
  border: 1px solid var(--kt-border-medium);
}

.kt-card:hover {
  border-color: rgba(0, 212, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.08);
}

/* Link Hover - Smooth color transition */
a {
  transition: color var(--kt-transition-base);
}

/* Icon Hover - Subtle scale */
.kt-icon {
  transition: transform var(--kt-transition-base);
}

.kt-icon:hover {
  transform: scale(1.05);
}

/* ============================================
   5. SCROLL EFFECTS
   ============================================ */

/* Parallax - Controlled by JavaScript */
.kt-parallax {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* Scroll Fade - Applied by JavaScript */
.kt-scroll-fade {
  opacity: 1;
  transition: opacity 0.3s linear;
}

.kt-scroll-fade.faded {
  opacity: 0;
}

/* ============================================
   6. PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Hardware acceleration for smooth animations */
.kt-animate-in,
.kt-safety-shield,
.kt-hero-cyan-field,
.kt-hero-gold-field,
.kt-ripple-ring,
.kt-philosophy-circle {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .kt-hero-cyan-field,
  .kt-hero-gold-field,
  .kt-ripple-ring,
  .kt-philosophy-circle {
    animation: none !important;
  }
}

/* ============================================
   7. SVG ANIMATION STYLES
   ============================================ */

/* SVG elements - Smooth rendering */
svg {
  shape-rendering: geometricPrecision;
}

svg path,
svg circle,
svg line {
  vector-effect: non-scaling-stroke;
}

/* Animated SVG paths - Applied inline in patterns */
.kt-svg-animated {
  will-change: transform, opacity;
}