/* ============================================
   TECH ORBIT - ANIMATION KEYFRAMES & EFFECTS
   ============================================ */

/* Scroll Reveal */
.reveal { opacity: 0; transform: translateY(30px); transition: all 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-up { opacity: 0; transform: translateY(40px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal-up.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(40px); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }
.reveal-scale { opacity: 0; transform: scale(0.85); transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* Stagger */
[data-stagger] > * { opacity: 0; transform: translateY(20px); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
[data-stagger].visible > * { opacity: 1; transform: translateY(0); }
[data-stagger].visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-stagger].visible > *:nth-child(2) { transition-delay: 0.1s; }
[data-stagger].visible > *:nth-child(3) { transition-delay: 0.15s; }
[data-stagger].visible > *:nth-child(4) { transition-delay: 0.2s; }
[data-stagger].visible > *:nth-child(5) { transition-delay: 0.25s; }
[data-stagger].visible > *:nth-child(6) { transition-delay: 0.3s; }

/* Gradient Animation */
.animated-gradient { background-size: 200% 200%; animation: gradientFlow 4s ease infinite; }
@keyframes gradientFlow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

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

/* Float */
.float { animation: floatUp 3s ease-in-out infinite; }
.float-delay-1 { animation-delay: 0.5s; }
.float-delay-2 { animation-delay: 1s; }
.float-delay-3 { animation-delay: 1.5s; }
@keyframes floatUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Pulse */
.pulse { animation: pulseAnim 2s ease-in-out infinite; }
@keyframes pulseAnim { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Glow */
.glow { animation: glowPulse 2s ease-in-out infinite alternate; }
@keyframes glowPulse { from { box-shadow: 0 0 20px rgba(0,82,204,0.3); } to { box-shadow: 0 0 40px rgba(0,82,204,0.6); } }

/* Water Drop */
.water-drop { animation: waterDrop 1.5s ease-in-out infinite; }
@keyframes waterDrop { 0% { transform: translateY(-20px); opacity: 0; } 50% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(20px); opacity: 0; } }

/* Solar Rays */
.solar-rays { animation: solarRays 3s ease-in-out infinite; }
@keyframes solarRays { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.1); } }

/* Turbine Spin */
.turbine-spin { animation: turbineSpin 4s linear infinite; transform-origin: center; }
@keyframes turbineSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Image Zoom */
.img-zoom { overflow: hidden; }
.img-zoom img { transition: transform 0.5s ease; }
.img-zoom:hover img { transform: scale(1.08); }

/* Ripple */
.btn-ripple { position: relative; overflow: hidden; }
.btn-ripple .ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.3); transform: scale(0); animation: rippleEffect 0.6s linear; pointer-events: none; }
@keyframes rippleEffect { to { transform: scale(4); opacity: 0; } }

/* Shimmer */
.shimmer { background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Morph */
.morph-shape { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; animation: morph 8s ease-in-out infinite; }
@keyframes morph { 0% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } }

/* Hover Underline */
.hover-underline { position: relative; display: inline-block; }
.hover-underline::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--ocean-blue); transition: width 0.3s ease; }
.hover-underline:hover::after { width: 100%; }

/* Icon Bounce */
.icon-bounce:hover { animation: iconBounce 0.5s ease; }
@keyframes iconBounce { 0%, 100% { transform: translateY(0); } 30% { transform: translateY(-8px); } 60% { transform: translateY(-4px); } }

/* Page Enter */
.page-enter { animation: pageEnter 0.5s ease forwards; }
@keyframes pageEnter { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Slide Animations */
.slide-in-bottom { animation: slideInBottom 0.6s ease forwards; }
@keyframes slideInBottom { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }
.slide-in-top { animation: slideInTop 0.6s ease forwards; }
@keyframes slideInTop { from { opacity: 0; transform: translateY(-100%); } to { opacity: 1; transform: translateY(0); } }

/* Parallax */
.parallax-bg { background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; }

/* Draw Border */
.draw-border { position: relative; }
.draw-border::before { content: ''; position: absolute; inset: 0; border: 2px solid var(--ocean-blue); border-radius: var(--radius-md); transition: all 0.5s ease; clip-path: inset(0 100% 100% 0); }
.draw-border:hover::before { clip-path: inset(0 0 0 0); }