/**
 * Emberwisp Logo Animations
 * 4C Hex Outline Variant
 * 
 * Usage: Add the appropriate class to your logo container or SVG element.
 * Ensure your SVG has the correct structure (polygon.hex-outline, path.flame)
 */

/* =============================================================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================================================= */

:root {
  --emberwisp-color: #ea580c;
  --emberwisp-glow: rgba(234, 88, 12, 0.4);
  --emberwisp-glow-strong: rgba(234, 88, 12, 0.5);
}


/* =============================================================================
   1. DRAW ON - Page load, hero sections
   ============================================================================= */

@keyframes emberwisp-draw-hex {
  0% { 
    stroke-dashoffset: 320; 
  }
  100% { 
    stroke-dashoffset: 0; 
  }
}

@keyframes emberwisp-fade-in-up {
  0% { 
    opacity: 0; 
    transform: translateY(4px); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes emberwisp-fade-in-left {
  0% { 
    opacity: 0; 
    transform: translateX(-8px); 
  }
  100% { 
    opacity: 1; 
    transform: translateX(0); 
  }
}

.emberwisp-draw .hex-outline {
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  animation: emberwisp-draw-hex 1.2s ease-out forwards;
}

.emberwisp-draw .flame {
  opacity: 0;
  animation: emberwisp-fade-in-up 0.6s ease-out 0.8s forwards;
}

.emberwisp-draw .wordmark {
  opacity: 0;
  animation: emberwisp-fade-in-left 0.5s ease-out 1.1s forwards;
}


/* =============================================================================
   2. PULSE GLOW - Ambient, always-on presence
   ============================================================================= */

@keyframes emberwisp-pulse-glow {
  0%, 100% { 
    filter: drop-shadow(0 0 0px rgba(234, 88, 12, 0)); 
  }
  50% { 
    filter: drop-shadow(0 0 12px var(--emberwisp-glow)); 
  }
}

.emberwisp-pulse-glow {
  animation: emberwisp-pulse-glow 3s ease-in-out infinite;
}


/* =============================================================================
   3. BREATHE - Subtle life, waiting states
   ============================================================================= */

@keyframes emberwisp-breathe {
  0%, 100% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.03); 
  }
}

.emberwisp-breathe {
  animation: emberwisp-breathe 4s ease-in-out infinite;
  transform-origin: center;
}


/* =============================================================================
   4. FLICKER - Ember-true, very subtle
   ============================================================================= */

@keyframes emberwisp-flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 1; }
  94% { opacity: 0.8; }
  96% { opacity: 1; }
  98% { opacity: 0.85; }
}

.emberwisp-flicker .flame {
  animation: emberwisp-flicker 3s ease-in-out infinite;
}


/* =============================================================================
   5. FLOAT WISP - Particles escaping
   ============================================================================= */

@keyframes emberwisp-float {
  0% { 
    transform: translate(0, 0); 
    opacity: 0; 
  }
  10% { 
    opacity: 1; 
  }
  90% { 
    opacity: 1; 
  }
  100% { 
    transform: translate(12px, -16px); 
    opacity: 0; 
  }
}

.emberwisp-float-wisp .wisp-particle {
  animation: emberwisp-float 3s ease-out infinite;
}

.emberwisp-float-wisp .wisp-particle:nth-child(2) {
  animation-delay: 1.5s;
}

.emberwisp-float-wisp .wisp-particle:nth-child(3) {
  animation-delay: 0.75s;
}


/* =============================================================================
   6. SLOW ROTATE - Background element, decorative
   ============================================================================= */

@keyframes emberwisp-rotate {
  0% { 
    transform: rotate(0deg); 
  }
  100% { 
    transform: rotate(360deg); 
  }
}

.emberwisp-rotate .hex-outline {
  animation: emberwisp-rotate 20s linear infinite;
  transform-origin: center;
}


/* =============================================================================
   7. LOADER - Loading states, processing
   ============================================================================= */

@keyframes emberwisp-spin-loader {
  0% { 
    stroke-dashoffset: 280; 
    transform: rotate(0deg); 
  }
  50% { 
    stroke-dashoffset: 80; 
  }
  100% { 
    stroke-dashoffset: 280; 
    transform: rotate(360deg); 
  }
}

.emberwisp-loader .hex-outline {
  stroke-dasharray: 280;
  animation: emberwisp-spin-loader 2s ease-in-out infinite;
  transform-origin: center;
}

.emberwisp-loader .flame {
  opacity: 0.3;
}


/* =============================================================================
   8. STAGGER IN - Quick entrance, snappy
   ============================================================================= */

@keyframes emberwisp-stagger-scale {
  0% { 
    opacity: 0; 
    transform: scale(0.8); 
  }
  100% { 
    opacity: 1; 
    transform: scale(1); 
  }
}

@keyframes emberwisp-stagger-up {
  0% { 
    opacity: 0; 
    transform: translateY(8px); 
  }
  100% { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

@keyframes emberwisp-stagger-fade {
  0% { 
    opacity: 0; 
  }
  100% { 
    opacity: 1; 
  }
}

.emberwisp-stagger .hex-outline {
  opacity: 0;
  animation: emberwisp-stagger-scale 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  transform-origin: center;
}

.emberwisp-stagger .flame {
  opacity: 0;
  animation: emberwisp-stagger-up 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.emberwisp-stagger .wordmark {
  opacity: 0;
  animation: emberwisp-stagger-fade 0.4s ease-out 0.4s forwards;
}


/* =============================================================================
   9. HOVER LIFT - Interactive, nav/buttons
   ============================================================================= */

.emberwisp-hover-lift {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.emberwisp-hover-lift:hover {
  transform: translateY(-2px);
  filter: drop-shadow(0 4px 12px rgba(234, 88, 12, 0.2));
}


/* =============================================================================
   10. HOVER GLOW - Links, clickable elements
   ============================================================================= */

.emberwisp-hover-glow {
  transition: filter 0.3s ease;
}

.emberwisp-hover-glow:hover {
  filter: drop-shadow(0 0 16px var(--emberwisp-glow-strong));
}


/* =============================================================================
   UTILITY: Reduced Motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  .emberwisp-draw .hex-outline,
  .emberwisp-draw .flame,
  .emberwisp-draw .wordmark,
  .emberwisp-pulse-glow,
  .emberwisp-breathe,
  .emberwisp-flicker .flame,
  .emberwisp-float-wisp .wisp-particle,
  .emberwisp-rotate .hex-outline,
  .emberwisp-loader .hex-outline,
  .emberwisp-stagger .hex-outline,
  .emberwisp-stagger .flame,
  .emberwisp-stagger .wordmark {
    animation: none;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }
}