/* =========================================
   aabil.tech — Keyframe Animasyonları
   ========================================= */

/* === Genel Animasyonlar === */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to   { opacity: 1; transform: scale(1); }
}

/* === Sürekli Animasyonlar === */

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

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-10px) rotate(1deg); }
  66%       { transform: translateY(-6px) rotate(-1deg); }
}

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

@keyframes pulseSlow {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1; }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes spinReverse {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

@keyframes orbitX {
  from { transform: rotateX(0deg) rotateY(0deg); }
  to   { transform: rotateX(360deg) rotateY(360deg); }
}

/* === Glow Efektleri === */

@keyframes glowCyan {
  0%, 100% { box-shadow: 0 0 10px rgba(255,255,255,0.08), 0 0 30px rgba(255,255,255,0.04); }
  50%       { box-shadow: 0 0 20px rgba(255,255,255,0.14), 0 0 50px rgba(255,255,255,0.06); }
}

@keyframes glowPurple {
  0%, 100% { box-shadow: 0 0 10px rgba(255,255,255,0.06), 0 0 30px rgba(255,255,255,0.03); }
  50%       { box-shadow: 0 0 20px rgba(255,255,255,0.12), 0 0 50px rgba(255,255,255,0.05); }
}

@keyframes glowText {
  0%, 100% { text-shadow: 0 0 10px rgba(255,255,255,0.2); }
  50%       { text-shadow: 0 0 20px rgba(255,255,255,0.35); }
}

@keyframes borderGlow {
  0%, 100% { border-color: rgba(255,255,255,0.12); }
  50%       { border-color: rgba(255,255,255,0.30); }
}

/* === Metin Animasyonları === */

@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100%  { opacity: 0; }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* === Parçacık Animasyonları === */

@keyframes particleFall {
  0%   { transform: translateY(-10px); opacity: 1; }
  100% { transform: translateY(100vh); opacity: 0; }
}

@keyframes particleFloat {
  0%        { transform: translate(0, 0); opacity: 0; }
  10%, 90%  { opacity: 1; }
  100%      { transform: translate(var(--dx, 20px), var(--dy, -40px)); opacity: 0; }
}

@keyframes particlePulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50%       { transform: scale(1.5); opacity: 1; }
}

/* === Card/UI Animasyonları === */

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

@keyframes slideInFromBottom {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

@keyframes expandWidth {
  from { width: 0; }
  to   { width: 100%; }
}

@keyframes countUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* === Scroll Progress Drone === */

@keyframes droneHover {
  0%, 100% {
    transform: translateY(0px) rotate(-2deg);
  }
  25% {
    transform: translateY(-4px) rotate(1deg);
  }
  50% {
    transform: translateY(-8px) rotate(2deg);
  }
  75% {
    transform: translateY(-4px) rotate(-1deg);
  }
}

@keyframes droneBlade {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* === Bölüm Geçiş Animasyonları === */

@keyframes sectionReveal {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0% 0);
  }
}

@keyframes lineGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* === 3D Sahneler için === */

@keyframes cameraZoom {
  from { opacity: 0; filter: blur(10px); }
  to   { opacity: 1; filter: blur(0px); }
}

@keyframes hologramFlicker {
  0%, 95%, 100% { opacity: 1; }
  96% { opacity: 0.7; }
  97% { opacity: 1; }
  98% { opacity: 0.8; }
}

/* === Buton Animasyonları === */

@keyframes btnPulseRing {
  0%   { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}

@keyframes arrowBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* === Instagram Önizleme === */

@keyframes instagramGlow {
  0%, 100% { box-shadow: 0 0 0 2px transparent; }
  50%       { box-shadow: 0 0 0 2px rgba(255,255,255,0.15); }
}

/* === Tag/Badge === */

@keyframes tagAppear {
  from { transform: scale(0) rotate(-10deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* === Utility Clases for animations === */

.animate-float         { animation: float 4s ease-in-out infinite; }
.animate-float-slow    { animation: floatSlow 6s ease-in-out infinite; }
.animate-pulse         { animation: pulse 2s ease-in-out infinite; }
.animate-pulse-slow    { animation: pulseSlow 3s ease-in-out infinite; }
.animate-spin          { animation: spin 4s linear infinite; }
.animate-glow-cyan     { animation: glowCyan 2.5s ease-in-out infinite; }
.animate-glow-purple   { animation: glowPurple 2.5s ease-in-out infinite; }
.animate-glow-text     { animation: glowText 3s ease-in-out infinite; }
.animate-gradient      { animation: gradientShift 4s ease infinite; background-size: 200% 200%; }
.animate-fade-in       { animation: fadeIn 0.6s ease forwards; }
.animate-fade-in-up    { animation: fadeInUp 0.7s ease forwards; }
.animate-hologram      { animation: hologramFlicker 5s ease-in-out infinite; }
.animate-drone-hover   { animation: droneHover 3s ease-in-out infinite; }