/* ============================================================
   ANIMATIONS.CSS
   Odium Stüdyo — Animasyon Tanımları

   Bölüm sırası:
   1. Scroll Reveal Animasyonları
   2. Hero Giriş Animasyonları
   3. Hero Glow Orb Animasyonları
   4. Hero Scroll İndikatörü
   5. Hero Badge Dot (Pulse)
   6. Navbar Geçiş Animasyonu
   7. Mobil Menü Geçiş Animasyonu
   8. Prefers Reduced Motion
   ============================================================ */


/* ==========================================================
   1. SCROLL REVEAL ANIMASYONLARI

   Kullanım:
   - HTML elementine class="reveal" ekle
   - app.js IntersectionObserver ile element görünür olunca
     .reveal--visible sınıfını ekler
   - Stagger (kademeli gecikme) için reveal-delay-1..5 kullan
   ========================================================== */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slower) var(--ease-in-out),
              transform var(--duration-slower) var(--ease-in-out);
  will-change: opacity, transform;
}

.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Yönlü varyantlar */
.reveal--left {
  opacity: 0;
  transform: translateX(-30px);
}

.reveal--left.reveal--visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal--right {
  opacity: 0;
  transform: translateX(30px);
}

.reveal--right.reveal--visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal--scale {
  opacity: 0;
  transform: scale(0.95);
}

.reveal--scale.reveal--visible {
  opacity: 1;
  transform: scale(1);
}

/* Stagger gecikme sınıfları — grid kartlar için */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }
.reveal-delay-6 { transition-delay: 0.6s; }
.reveal-delay-7 { transition-delay: 0.7s; }
.reveal-delay-8 { transition-delay: 0.8s; }


/* ==========================================================
   2. HERO GİRİŞ ANIMASYONLARI

   Sayfa yüklendiğinde hero içeriğinin aşağıdan yukarıya
   kayarak ve belirerek girmesi.
   ========================================================== */

@keyframes heroFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Hero elementlerine kademeli giriş animasyonu */
.hero__badge {
  opacity: 0;
  animation: heroFadeInUp 0.8s var(--ease-in-out) 0.2s forwards;
}

.hero__title {
  opacity: 0;
  animation: heroFadeInUp 0.8s var(--ease-in-out) 0.4s forwards;
}

.hero__subtitle {
  opacity: 0;
  animation: heroFadeInUp 0.8s var(--ease-in-out) 0.6s forwards;
}

.hero__actions {
  opacity: 0;
  animation: heroFadeInUp 0.8s var(--ease-in-out) 0.8s forwards;
}

.hero__scroll-hint {
  opacity: 0;
  animation: heroFadeIn 1s var(--ease-in-out) 1.2s forwards;
}


/* ==========================================================
   3. HERO GLOW ORB ANIMASYONLARI

   Arka plandaki renkli ışık kürelerinin yavaş yüzen
   hareketi. GPU hızlandırmalı, düşük performans etkisi.
   ========================================================== */

@keyframes glowFloat1 {
  0%, 100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }
  25% {
    transform: translateX(-48%) translateY(-15px) scale(1.03);
  }
  50% {
    transform: translateX(-52%) translateY(8px) scale(0.98);
  }
  75% {
    transform: translateX(-49%) translateY(-10px) scale(1.02);
  }
}

@keyframes glowFloat2 {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.3;
  }
  33% {
    transform: translateY(-20px) scale(1.05);
    opacity: 0.35;
  }
  66% {
    transform: translateY(12px) scale(0.96);
    opacity: 0.25;
  }
}

@keyframes glowFloat3 {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 0.2;
  }
  40% {
    transform: translateY(15px) scale(1.04);
    opacity: 0.25;
  }
  70% {
    transform: translateY(-12px) scale(0.97);
    opacity: 0.18;
  }
}

.hero__glow--1 {
  animation: glowFloat1 20s ease-in-out infinite;
  will-change: transform;
}

.hero__glow--2 {
  animation: glowFloat2 25s ease-in-out infinite;
  will-change: transform, opacity;
}

.hero__glow--3 {
  animation: glowFloat3 22s ease-in-out infinite;
  will-change: transform, opacity;
}


/* ==========================================================
   4. HERO SCROLL İNDİKATÖRÜ

   Fareyi simgeleyen kutunun içindeki tekerleğin
   aşağı kayarak kaybolan animasyonu.
   ========================================================== */

@keyframes scrollWheel {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.5;
    transform: translateY(6px);
  }
  100% {
    opacity: 0;
    transform: translateY(12px);
  }
}

.hero__scroll-wheel {
  animation: scrollWheel 1.8s var(--ease-in-out) infinite;
  will-change: transform, opacity;
}

/* Scroll hint bütünü için hafif bounce */
@keyframes scrollHintBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(6px);
  }
}

.hero__scroll-hint {
  animation: heroFadeIn 1s var(--ease-in-out) 1.2s forwards,
             scrollHintBounce 2.5s ease-in-out 2.2s infinite;
}


/* ==========================================================
   5. HERO BADGE DOT — PULSE

   Badge içindeki yeşil noktanın canlı olduğunu
   gösteren hafif nabız atışı.
   ========================================================== */

@keyframes pulseDot {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.40);
  }
  50% {
    opacity: 0.8;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0);
  }
}

.hero__badge-dot {
  animation: pulseDot 2.5s ease-in-out infinite;
  will-change: box-shadow, opacity;
}

/* Proje kartlarındaki durum noktası için de aynı efekt */
.project-card__status-dot {
  animation: pulseDot 2.5s ease-in-out infinite;
  will-change: box-shadow, opacity;
}


/* ==========================================================
   6. NAVBAR GEÇİŞ ANIMASYONU

   style.css'teki .navbar--scrolled durumu için
   ek animasyon ince ayarları.
   ========================================================== */

.navbar {
  transition: background-color var(--duration-slow) var(--ease-in-out),
              backdrop-filter var(--duration-slow) var(--ease-in-out),
              -webkit-backdrop-filter var(--duration-slow) var(--ease-in-out),
              border-color var(--duration-slow) var(--ease-in-out),
              box-shadow var(--duration-slow) var(--ease-in-out);
}

.navbar--scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.20);
}


/* ==========================================================
   7. MOBİL MENÜ GEÇİŞ ANIMASYONU

   Linklerin kademeli belirme efekti.
   Menü açıldığında her link sırayla görünür.
   ========================================================== */

.mobile-menu__link,
.mobile-menu__cta {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--duration-slow) var(--ease-in-out),
              transform var(--duration-slow) var(--ease-in-out);
}

/* Menü açıkken linkler görünür — kademeli gecikme */
.mobile-menu.is-open .mobile-menu__link,
.mobile-menu.is-open .mobile-menu__cta {
  opacity: 1;
  transform: translateY(0);
}

.mobile-menu.is-open .mobile-menu__link:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(2) { transition-delay: 0.10s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(4) { transition-delay: 0.20s; }
.mobile-menu.is-open .mobile-menu__link:nth-child(5) { transition-delay: 0.25s; }

.mobile-menu.is-open .mobile-menu__cta { transition-delay: 0.30s; }

/* Menü kapanırken gecikmeyi sıfırla */
.mobile-menu:not(.is-open) .mobile-menu__link,
.mobile-menu:not(.is-open) .mobile-menu__cta {
  transition-delay: 0s;
}


/* ==========================================================
   8. PREFERS REDUCED MOTION

   Hareket hassasiyeti olan kullanıcılar için
   tüm animasyonları devre dışı bırak.
   Geçişler anlık olur, içerik hâlâ görünür.
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  /* Tüm animasyonları durdur */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  /* Reveal elementleri baştan görünür olsun */
  .reveal {
    opacity: 1;
    transform: none;
  }

  .reveal--left,
  .reveal--right,
  .reveal--scale {
    opacity: 1;
    transform: none;
  }

  /* Hero elementleri baştan görünür */
  .hero__badge,
  .hero__title,
  .hero__subtitle,
  .hero__actions,
  .hero__scroll-hint {
    opacity: 1;
    transform: none;
  }

  /* Glow orb hareketi dursun */
  .hero__glow--1,
  .hero__glow--2,
  .hero__glow--3 {
    animation: none;
  }

  /* Scroll wheel animasyonu dursun */
  .hero__scroll-wheel {
    animation: none;
  }

  /* Badge dot pulse dursun */
  .hero__badge-dot,
  .project-card__status-dot {
    animation: none;
  }

  /* Mobil menü linkleri baştan görünür */
  .mobile-menu__link,
  .mobile-menu__cta {
    opacity: 1;
    transform: none;
  }

  /* Kart hover transform'larını kaldır */
  .service-card:hover,
  .project-card:hover,
  .team-card:hover {
    transform: none;
  }

  /* Buton hover transform kaldır */
  .btn--primary:hover,
  .btn--secondary:hover {
    transform: none;
  }
}