/* =============================================
   KIBRITKAFA — Animations
   ============================================= */

/* ── Spark / Click Flash ── */
@keyframes sparkBurst {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(0); }
  50%  { opacity: 1; transform: translate(-50%, -50%) scale(1.5); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(2); }
}

.spark-particle {
  position: fixed;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  animation: sparkFly 0.6s ease-out forwards;
}

@keyframes sparkFly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: var(--fly-target) scale(0.2);
  }
}

/* ── Match Strike Line ── */
@keyframes strikeSlide {
  0%   { stroke-dashoffset: 60; opacity: 1; }
  60%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* ── Page Load ── */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-eyebrow  { animation: fadeUp 0.8s ease 0.2s both; }
.hero-title    { animation: fadeUp 0.8s ease 0.4s both; }
.hero-tagline  { animation: fadeUp 0.8s ease 0.6s both; }
.hero-cta      { animation: fadeUp 0.8s ease 0.8s both; }

/* ── Flicker (ambient, subtle) ── */
@keyframes flicker {
  0%, 100% { opacity: 1; }
  92%  { opacity: 1; }
  93%  { opacity: 0.92; }
  94%  { opacity: 1; }
  97%  { opacity: 0.96; }
  98%  { opacity: 1; }
}

/* ── Glow Pulse ── */
@keyframes glowPulse {
  0%, 100% {
    filter: drop-shadow(0 0 20px rgba(249, 115, 22, 0.5))
            drop-shadow(0 0 60px rgba(249, 115, 22, 0.2));
  }
  50% {
    filter: drop-shadow(0 0 35px rgba(252, 211, 77, 0.7))
            drop-shadow(0 0 80px rgba(249, 115, 22, 0.3));
  }
}

/* ── Match Body Tilt (CSS-assisted, fine-tune in JS) ── */
@keyframes idleWobble {
  0%, 100% { transform: rotate(0deg); }
  25%  { transform: rotate(-0.8deg); }
  75%  { transform: rotate(0.8deg); }
}

/* ── Scroll Progress Bar ── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;                /* scaleX ile ölçeklenir */
  background: linear-gradient(90deg, var(--orange-hot, #F97316), var(--fire-bright, #FBBF24));
  z-index: 9995;
  transform-origin: left;
  transform: scaleX(0);
  will-change: transform;     /* GPU katmanı — layout tetiklemez */
}

/* ── Number Counter (portfolio cards hover) ── */
.portfolio-card {
  cursor: none;
}

.portfolio-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(19, 8, 0, 0.9) 0%, rgba(19, 8, 0, 0.2) 50%, transparent 100%);
}

/* ── Button Hover Ripple ── */
@keyframes rippleOut {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(4);
    opacity: 0;
  }
}

.btn-ripple {
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  pointer-events: none;
  animation: rippleOut 0.5s ease forwards;
}

/* ── About match flame (static decoration) ── */
@keyframes flameDance {
  0%   { d: path("M 50 100 C 30 80 20 60 40 40 C 30 30 35 10 50 0 C 65 10 70 30 60 40 C 80 60 70 80 50 100 Z"); }
  33%  { d: path("M 50 100 C 25 75 15 55 38 38 C 28 25 36 8 50 0 C 64 8 72 25 62 38 C 85 55 75 75 50 100 Z"); }
  66%  { d: path("M 50 100 C 35 82 22 62 42 42 C 32 32 34 12 50 0 C 66 12 68 32 58 42 C 78 62 65 82 50 100 Z"); }
  100% { d: path("M 50 100 C 30 80 20 60 40 40 C 30 30 35 10 50 0 C 65 10 70 30 60 40 C 80 60 70 80 50 100 Z"); }
}