/* ========================================
   🔥 LIVING CAMPFIRE LOGO ANIMATIONS
   Mobile-Optimized Ultra Creative Effects
   ======================================== */

/* 1. WIND BLOWN FLAMES - Пламъците се накланят от вятър */
@keyframes windBlow {
  0%, 100% {
    transform: skewX(0deg) translateX(0);
  }
  25% {
    transform: skewX(-6deg) translateX(-2px);
  }
  50% {
    transform: skewX(0deg) translateX(0);
  }
  75% {
    transform: skewX(6deg) translateX(2px);
  }
}

.fire-icon {
  display: inline-block;
  animation: windBlow 3s ease-in-out infinite;
  /* GPU ACCELERATION */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Delay за всеки пламък за natural effect */
.fire-icon:nth-child(1) {
  animation-delay: 0s;
}

.fire-icon:nth-child(2) {
  animation-delay: 0.3s;
}

.fire-icon:nth-child(3) {
  animation-delay: 0.6s;
}

/* 2. WOOD LOGS - Просто дърва без ембери */
.wood-log {
  position: relative;
  display: inline-block;
  /* GPU acceleration for logs too */
  transform: translateZ(0);
}

/* 3. FLYING SPARKS - Искри излитат нагоре */
@keyframes sparkFly1 {
  0% {
    transform: translate(0, 0) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-15px, -70px) scale(0);
    opacity: 0;
  }
}

@keyframes sparkFly2 {
  0% {
    transform: translate(0, 0) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(5px, -80px) scale(0);
    opacity: 0;
  }
}

@keyframes sparkFly3 {
  0% {
    transform: translate(0, 0) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(20px, -65px) scale(0);
    opacity: 0;
  }
}

@keyframes sparkFly4 {
  0% {
    transform: translate(0, 0) scale(0.5);
    opacity: 1;
  }
  100% {
    transform: translate(-10px, -75px) scale(0);
    opacity: 0;
  }
}

.spark {
  position: absolute;
  font-size: 14px;
  pointer-events: none;
  /* GPU ACCELERATION */
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.spark-1 {
  animation: sparkFly1 3s ease-out infinite;
  animation-delay: 0s;
}

.spark-2 {
  animation: sparkFly2 3.5s ease-out infinite;
  animation-delay: 0.7s;
}

.spark-3 {
  animation: sparkFly3 3.2s ease-out infinite;
  animation-delay: 1.4s;
}

.spark-4 {
  animation: sparkFly4 3.8s ease-out infinite;
  animation-delay: 2.1s;
}

/* 4. CAMPFIRE CONTAINER - Relative positioning for sparks */
.campfire-container {
  position: relative;
  display: inline-block;
}

/* 5. INTERACTIVE GESTURE EFFECTS */

/* TAP - Wood drop animation */
@keyframes woodDrop {
  0% {
    transform: translateY(-150px) rotate(-30deg) scale(0);
    opacity: 0;
  }
  60% {
    transform: translateY(8px) rotate(5deg) scale(1.1);
    opacity: 1;
  }
  80% {
    transform: translateY(-4px) rotate(-2deg) scale(0.95);
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 1;
  }
}

/* TAP - Enhanced fire burst with glow */
@keyframes fireBurst {
  0% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 0px transparent);
  }
  50% {
    transform: scale(1.4);
    filter: brightness(1.8) drop-shadow(0 0 25px rgba(255, 111, 0, 1)) drop-shadow(0 0 40px rgba(255, 69, 0, 0.6));
  }
  100% {
    transform: scale(1);
    filter: brightness(1) drop-shadow(0 0 0px transparent);
  }
}

/* TAP - Extra sparks */
@keyframes extraSparks {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(var(--spark-x), var(--spark-y)) scale(0);
    opacity: 0;
  }
}

/* LONG PRESS - Fire grows while holding */
@keyframes fireGrow {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  100% {
    transform: scale(1.6);
    filter: brightness(2) drop-shadow(0 0 35px rgba(255, 111, 0, 1));
  }
}

/* SWIPE UP - Stoking the fire (разпалване) */
@keyframes fireStoke {
  0% {
    transform: scale(1);
    filter: brightness(1);
  }
  30% {
    transform: scale(1.5) translateY(-8px);
    filter: brightness(2.2) drop-shadow(0 0 30px rgba(255, 69, 0, 0.9));
  }
  100% {
    transform: scale(1.2);
    filter: brightness(1.3) drop-shadow(0 0 15px rgba(255, 111, 0, 0.5));
  }
}

/* SWIPE DOWN - Dampening the fire (потушаване) */
@keyframes fireDampen {
  0% {
    transform: scale(1);
    filter: brightness(1);
    opacity: 1;
  }
  50% {
    transform: scale(0.7);
    filter: brightness(0.6);
    opacity: 0.8;
  }
  100% {
    transform: scale(0.85);
    filter: brightness(0.8);
    opacity: 0.9;
  }
}

/* SMOKE PARTICLES - Rising smoke effect */
@keyframes smokeRise {
  0% {
    transform: translate(0, 0) scale(0.3) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  50% {
    transform: translate(var(--smoke-x, -10px), -80px) scale(1.2) rotate(20deg);
    opacity: 0.5;
  }
  100% {
    transform: translate(var(--smoke-x, -20px), -150px) scale(1.8) rotate(40deg);
    opacity: 0;
  }
}

/* GESTURE EFFECT CLASSES */

/* Wood drop on tap */
.wood-dropping {
  animation: woodDrop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform, opacity;
}

/* Fire burst on tap - enhanced with glow */
.fire-burst {
  animation: fireBurst 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform, filter;
}

/* Fire grow on long press */
.fire-growing {
  animation: fireGrow 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  will-change: transform, filter;
}

/* Fire stoke on swipe up */
.fire-stoked {
  animation: fireStoke 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform, filter;
}

/* Fire dampen on swipe down */
.fire-dampened {
  animation: fireDampen 0.8s ease-out forwards;
  will-change: transform, filter, opacity;
}

/* Extra sparks on tap */
.extra-spark {
  position: absolute;
  font-size: 16px;
  pointer-events: none;
  animation: extraSparks 1s ease-out forwards;
  will-change: transform, opacity;
}

/* Smoke particles */
.smoke-particle {
  position: absolute;
  font-size: 24px;
  pointer-events: none;
  animation: smokeRise 2.5s ease-out forwards;
  will-change: transform, opacity;
  filter: blur(1px);
}

/* 6. PERFORMANCE OPTIMIZATIONS */
/* Hardware acceleration за smooth 60fps на mobile */
.fire-icon,
.wood-log,
.spark,
.campfire-container {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Reduce motion за accessibility */
@media (prefers-reduced-motion: reduce) {
  .fire-icon,
  .spark {
    animation: none !important;
  }
}

/* Mobile optimizations - по-малко искри на малки екрани */
@media (max-width: 640px) {
  .spark {
    font-size: 12px;
  }

  /* Hide 4th spark on very small screens for performance */
  .spark-4 {
    display: none;
  }
}