/* ============================================
   CTC Arch Estimation — Animations
   ============================================ */

/* --- Scroll Reveal --- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-spring); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-50px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-spring); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(50px); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-spring); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.9); transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-spring); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Stagger children */
.stagger-children > * { opacity: 0; transform: translateY(30px); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-spring); }
.stagger-children.visible > *:nth-child(1) { transition-delay: 0s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.2s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.3s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.4s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.5s; }
.stagger-children.visible > *:nth-child(7) { transition-delay: 0.6s; }
.stagger-children.visible > * { opacity: 1; transform: translateY(0); }
.stagger-children:not(.visible) > * { opacity: 0; transform: translateY(30px); }

/* --- Floating Animation --- */
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
.float { animation: float 4s ease-in-out infinite; }
.float-slow { animation: float 6s ease-in-out infinite; }
.float-delay { animation: float 4s ease-in-out infinite 1s; }

/* --- Pulse Glow --- */
@keyframes pulseGlow { 0%,100%{box-shadow: 0 0 20px rgba(var(--color-accent-rgb),0.2)} 50%{box-shadow: 0 0 40px rgba(var(--color-accent-rgb),0.4)} }
.pulse-glow { animation: pulseGlow 3s ease-in-out infinite; }

/* --- Rotate Slow --- */
@keyframes rotateSlow { from{transform:rotate(0deg)} to{transform:rotate(360deg)} }
.rotate-slow { animation: rotateSlow 20s linear infinite; }

/* --- Shimmer --- */
@keyframes shimmer { 0%{background-position:-200% center} 100%{background-position:200% center} }
.shimmer { background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%); background-size: 200% 100%; animation: shimmer 3s ease-in-out infinite; }

/* --- 3D Tilt on hover --- */
.tilt-3d { transition: transform 0.4s var(--ease-spring); transform-style: preserve-3d; perspective: 1000px; }
.tilt-3d:hover { transform: perspective(1000px) rotateX(4deg) rotateY(-4deg) scale(1.02); }

/* --- Counter Animation --- */
@keyframes countUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.counter-animate { animation: countUp 0.6s var(--ease-spring) forwards; }

/* --- Gradient Background Shift --- */
@keyframes gradientShift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.gradient-shift { background-size: 200% 200%; animation: gradientShift 8s ease infinite; }

/* --- Particle Dots (decorative) --- */
.particle-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.particle { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(var(--color-accent-rgb), 0.3); animation: particleFloat 8s ease-in-out infinite; }
@keyframes particleFloat { 0%,100%{transform:translateY(0) translateX(0); opacity:0.3} 25%{transform:translateY(-30px) translateX(15px); opacity:0.7} 50%{transform:translateY(-60px) translateX(-10px); opacity:0.4} 75%{transform:translateY(-30px) translateX(20px); opacity:0.6} }

/* --- Decorative 3D shapes --- */
.deco-shape { position: absolute; pointer-events: none; z-index: 0; }
.deco-ring { width: 200px; height: 200px; border: 2px solid rgba(var(--color-accent-rgb), 0.1); border-radius: 50%; animation: rotateSlow 30s linear infinite; }
.deco-triangle { width: 0; height: 0; border-left: 40px solid transparent; border-right: 40px solid transparent; border-bottom: 70px solid rgba(var(--color-accent-rgb), 0.06); animation: float 5s ease-in-out infinite; }
.deco-grid { width: 300px; height: 300px; background-image: radial-gradient(circle, rgba(var(--color-accent-rgb),0.08) 1px, transparent 1px); background-size: 20px 20px; }

/* --- Hover Lift --- */
.hover-lift { transition: transform 0.35s var(--ease-spring), box-shadow 0.35s; }
.hover-lift:hover { transform: translateY(-6px); }

/* --- Line Draw --- */
@keyframes lineDraw { to { stroke-dashoffset: 0; } }
.line-draw { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: lineDraw 2s ease-out forwards; }

/* --- Typewriter --- */
@keyframes typewriter { from { width: 0 } to { width: 100% } }
@keyframes blink { 50% { border-color: transparent } }
.typewriter { overflow: hidden; white-space: nowrap; border-right: 2px solid var(--color-accent); animation: typewriter 3s steps(40) 1s forwards, blink 0.7s step-end infinite; width: 0; }