/* ============================================================
   animations.css — Keyframes, Reveal System
   ============================================================ */

/* ===== KEYFRAMES ===== */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes arrowBounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50%       { transform: rotate(45deg) translate(4px, 4px); }
}

@keyframes drawLine {
  from { width: 0; }
  to   { width: 96px; }
}


/* ===== HERO ANIMASYONLARI ===== */
.hero-animate-1 {
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-smooth) 0.3s forwards;
}

.hero-animate-2 {
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-smooth) 0.6s forwards;
}

.hero-animate-3 {
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-smooth) 0.9s forwards;
}

.hero-animate-4 {
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-smooth) 1.1s forwards;
}

.hero-animate-5 {
  opacity: 0;
  animation: fadeUp 0.9s var(--ease-smooth) 1.3s forwards;
}

/* ===== SCROLL REVEAL ===== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease-smooth),
              transform 0.7s var(--ease-smooth);
}

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

.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; }
.reveal-delay-9  { transition-delay: 0.9s; }
.reveal-delay-10 { transition-delay: 1.0s; }
.reveal-delay-11 { transition-delay: 1.1s; }

.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.7s var(--ease-smooth),
              transform 0.7s var(--ease-smooth);
}

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

.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.7s var(--ease-smooth),
              transform 0.7s var(--ease-smooth);
}

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


/* ===== SCROLL INDICATOR ===== */
.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  animation: fadeUp 0.8s var(--ease-smooth) 1.4s forwards;
}

.scroll-indicator__label {
  font-family: var(--font-ui);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(26, 43, 107, 0.45);
}

.scroll-indicator__arrow {
  width: 22px; height: 22px;
  border-right: 1.5px solid rgba(26, 43, 107, 0.4);
  border-bottom: 1.5px solid rgba(26, 43, 107, 0.4);
  transform: rotate(45deg);
  animation: arrowBounce 1.8s ease infinite;
}

/* ===== ERİŞİLEBİLİRLİK — prefers-reduced-motion ===== */
/* Vestibüler bozukluğu olan kullanıcılar için tüm animasyonları
   pratiken durdurur. Scroll/hover sıçrama veya geçiş yapmaz. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveal'lar görünür durumda kalsın (gözle görmediği bir şey görünmesin) */
  .reveal,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
  }

}