/* ═══════════════════════════════════════════════════════════════
   VAVEL KİMYA — Animasyonlar & Geçişler
   Faz 1: Hero giriş sekansı, header geçişleri, mikro-etkileşimler
   ═══════════════════════════════════════════════════════════════ */


/* ─── 1. KEYFRAME TANIMLARI ─── */

/* Etiket — soldan kayarak, harf aralığı daraltılarak giriş */
@keyframes labelReveal {
  0% {
    opacity: 0;
    transform: translateX(-30px);
    letter-spacing: 0.35em;
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    letter-spacing: 0.2em;
  }
}

/* Etiket çizgisi — genişleyerek giriş */
@keyframes labelLineGrow {
  0% {
    transform: translateY(-50%) scaleX(0);
    opacity: 0;
  }
  100% {
    transform: translateY(-50%) scaleX(1);
    opacity: 0.5;
  }
}

/* Kelime — alttan, blur'dan netleşerek, 3D perspektifle giriş */
@keyframes wordReveal {
  0% {
    opacity: 0;
    transform: translateY(50px) rotateX(20deg);
    filter: blur(6px);
  }
  60% {
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateY(0) rotateX(0);
    filter: blur(0);
  }
}

/* Alttan fade-in */
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(24px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Basit fade-in */
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* Scroll dot aşağı kayma */
@keyframes scrollDotDrift {
  0% {
    top: -6px;
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    top: calc(100% - 4px);
    opacity: 0;
  }
}

/* Hafif nefes alma (pulse) */
@keyframes breathe {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

/* Mobil menü arka plan girişi */
@keyframes menuBgReveal {
  0% {
    clip-path: circle(0% at calc(100% - 40px) 40px);
  }
  100% {
    clip-path: circle(150% at calc(100% - 40px) 40px);
  }
}


/* ─── 2. HERO GİRİŞ SEKANSI ─── */
/* body.loaded eklenene kadar tüm hero elementleri gizli kalır */

.hero__label,
.hero__label::before,
.hero__word,
.hero__subtitle,
.hero__cta-group,
.hero__scroll-indicator {
  opacity: 0;
}

/* — Etiket: 0.3s gecikmeli — */
body.loaded .hero__label {
  animation: labelReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
}

body.loaded .hero__label::before {
  animation: labelLineGrow 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.6s forwards;
}

/* — Başlık kelimeleri: 0.6s'den itibaren art arda — */
body.loaded .hero__word {
  animation: wordReveal 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(0.55s + var(--i, 0) * 0.13s);
}

/* — Alt başlık: 1.3s gecikmeli — */
body.loaded .hero__subtitle {
  animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.25s forwards;
}

/* — CTA butonları: 1.6s gecikmeli — */
body.loaded .hero__cta-group {
  animation: fadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 1.55s forwards;
}

/* — Scroll göstergesi: 2.5s gecikmeli — */
body.loaded .hero__scroll-indicator {
  animation: fadeIn 1.2s ease 2.5s forwards;
}

/* Scroll dot sürekli animasyon — sadece sayfa yüklenince başlar */
body.loaded .hero__scroll-dot {
  animation: scrollDotDrift 2s cubic-bezier(0.4, 0, 0.6, 1) 3s infinite;
}


/* ─── 3. HEADER GEÇİŞLERİ ─── */

/* Scrolled durumda yeşil alt çizgi animasyonu */
.header.scrolled::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(var(--color-accent-rgb), 0.2) 20%,
    rgba(var(--color-accent-rgb), 0.3) 50%,
    rgba(var(--color-accent-rgb), 0.2) 80%,
    transparent 100%
  );
  animation: fadeIn 0.5s ease forwards;
}


/* ─── 4. MOBİL MENÜ ANİMASYONLARI ─── */

/* Menü açılış — daha premium bir efekt */
.mobile-menu.active {
  animation: menuBgReveal 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Menü kapanış */
.mobile-menu.closing {
  animation: menuBgReveal 0.45s cubic-bezier(0.7, 0, 0.84, 0) reverse forwards;
}


/* ─── 5. HOVER MİKRO-ETKİLEŞİMLER ─── */

/* Logo hover'da hexagon mark nabız */
.header__logo:hover .logo__mark svg {
  animation: breathe 1.5s ease infinite;
}

/* Navigation link altı çizgi — soldan sağa genişleme */
.nav-link::after {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dropdown giriş — yukarıdan aşağı kayma + fade  */
.dropdown {
  transition: opacity 0.3s ease,
              visibility 0.3s ease,
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Dropdown linkleri — soldan kayma efekti */
.dropdown li a {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ─── 6. SCROLL İNDİKATÖRÜ ─── */

/* Scroll text sürekli nefes alma */
body.loaded .hero__scroll-text {
  animation: breathe 3s ease-in-out 3s infinite;
}