/* =========================================
   SYNTARYFORM — Keyframe Animations
   ========================================= */

/* ---- Fade In Variants ---- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

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

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

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

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* ---- Hero Animations ---- */
@keyframes heroTitleReveal {
  0%   { opacity: 0; transform: translateY(80px) skewY(3deg); letter-spacing: 0.5em; }
  60%  { opacity: 1; transform: translateY(0) skewY(0deg); letter-spacing: 0.3em; }
  100% { opacity: 1; transform: translateY(0) skewY(0deg); letter-spacing: 0.2em; }
}

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

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

@keyframes bounceDown {
  0%, 100% { transform: translateY(0) translateX(-50%); }
  50%      { transform: translateY(12px) translateX(-50%); }
}

/* ---- Scroll Indicator ---- */
@keyframes scrollPulse {
  0%   { opacity: 1; transform: translateY(0); }
  50%  { opacity: 0.4; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ---- Loading ---- */
@keyframes loadSpin {
  to { transform: rotate(360deg); }
}

@keyframes loadFadeOut {
  to { opacity: 0; visibility: hidden; }
}

/* ---- Pulse / Glow ---- */
@keyframes pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.4); }
  50%      { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(196, 98, 45, 0.15); }
  50%      { box-shadow: 0 0 40px rgba(196, 98, 45, 0.3); }
}

/* ---- Float ---- */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(-10px); }
}

/* ---- Slide In for Cards ---- */
@keyframes slideInStagger {
  from { opacity: 0; transform: translateY(40px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Counter Tick ---- */
@keyframes countPop {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.15); }
}

/* ---- Navbar ---- */
@keyframes navSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ---- Modal ---- */
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.92) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes modalOverlayIn {
  from { opacity: 0; backdrop-filter: blur(0px); }
  to   { opacity: 1; backdrop-filter: blur(8px); }
}

/* ---- Marquee ---- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Shimmer (loading placeholder) ---- */
@keyframes shimmer {
  from { background-position: -200% 0; }
  to   { background-position: 200% 0; }
}

/* ---- Testimonial slide ---- */
@keyframes testimonialSlide {
  from { opacity: 0; transform: translateX(50px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ---- Progress bar fill ---- */
@keyframes progressFill {
  from { width: 0%; }
  to   { width: var(--progress, 25%); }
}

/* ---- Reveal classes (used by IntersectionObserver) ----
   Kısa mesafe + 0.6 sn: bölümler hızlı ve sakin belirsin (önceden 50-60px / 0.8 sn ağır geliyordu) */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s var(--ease-out),
              transform 0.6s var(--ease-out);
}

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

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

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

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

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

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.6s var(--ease-out),
              transform 0.6s var(--ease-out);
}

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

/* Stagger children */
.stagger-children .reveal:nth-child(1) { transition-delay: 0ms; }
.stagger-children .reveal:nth-child(2) { transition-delay: 90ms; }
.stagger-children .reveal:nth-child(3) { transition-delay: 180ms; }
.stagger-children .reveal:nth-child(4) { transition-delay: 270ms; }
.stagger-children .reveal:nth-child(5) { transition-delay: 360ms; }
.stagger-children .reveal:nth-child(6) { transition-delay: 450ms; }