/* ============================================================
   Ember Economics — Animations & Transitions
   ============================================================ */

/* ── Ember spark animations ──────────────────────────────────
   Targets inline SVG elements via .ember-logo .spark.
   Each spark floats upward and fades out on a loop.
   Scroll events in main.js add .scrolling to .ember-logo
   which shortens animation-duration → sparks fly faster.
   ──────────────────────────────────────────────────────────── */
/* ── Flame flicker ───────────────────────────────────────────── */
@keyframes flame-flicker {
  0%,100% { transform: scaleY(1)    scaleX(1)    skewX(0deg);  opacity: 1;    }
  20%      { transform: scaleY(1.06) scaleX(0.97) skewX(-2deg); opacity: 0.92; }
  40%      { transform: scaleY(0.94) scaleX(1.02) skewX(1deg);  opacity: 0.96; }
  60%      { transform: scaleY(1.08) scaleX(0.96) skewX(-1deg); opacity: 0.88; }
  80%      { transform: scaleY(0.97) scaleX(1.01) skewX(2deg);  opacity: 0.95; }
}

@keyframes core-flicker {
  0%,100% { transform: scaleY(1);    opacity: 0.88; }
  25%      { transform: scaleY(1.1);  opacity: 0.75; }
  55%      { transform: scaleY(0.9);  opacity: 0.95; }
  75%      { transform: scaleY(1.05); opacity: 0.70; }
}

.ember-logo .flame-body {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: flame-flicker 0.9s ease-in-out infinite;
}

.ember-logo .flame-core {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: core-flicker 0.7s ease-in-out infinite;
}

/* ── Drifting sparks ─────────────────────────────────────────── */
@keyframes spark-drift-left {
  0%   { transform: translate(0, 0)        scale(1);   opacity: 0.9; }
  100% { transform: translate(-8px, -14px) scale(0.1); opacity: 0;   }
}

@keyframes spark-drift-right {
  0%   { transform: translate(0, 0)       scale(1);   opacity: 0.9; }
  100% { transform: translate(7px, -14px) scale(0.1); opacity: 0;   }
}

@keyframes spark-drift-up {
  0%   { transform: translate(0, 0)       scale(1);   opacity: 0.9; }
  100% { transform: translate(2px, -16px) scale(0.1); opacity: 0;   }
}

.ember-logo .spark {
  transform-box:    fill-box;
  transform-origin: center bottom;
}

.ember-logo .sp1 { animation: spark-drift-right 2.0s linear infinite; animation-delay: 0.0s; }
.ember-logo .sp2 { animation: spark-drift-left  1.7s linear infinite; animation-delay: 0.5s; }
.ember-logo .sp3 { animation: spark-drift-right 2.3s linear infinite; animation-delay: 0.9s; }
.ember-logo .sp4 { animation: spark-drift-up    1.5s linear infinite; animation-delay: 0.3s; }
.ember-logo .sp5 { animation: spark-drift-left  1.9s linear infinite; animation-delay: 1.2s; }

/* Scroll active: sparks fly faster */
.ember-logo.scrolling .sp1 { animation-duration: 0.70s; }
.ember-logo.scrolling .sp2 { animation-duration: 0.60s; }
.ember-logo.scrolling .sp3 { animation-duration: 0.80s; }
.ember-logo.scrolling .sp4 { animation-duration: 0.50s; }
.ember-logo.scrolling .sp5 { animation-duration: 0.65s; }

/* ── Intense glow pulse ──────────────────────────────────────── */
@keyframes ember-glow {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(244,81,30,0.50)); }
  50%       { filter: drop-shadow(0 0 12px rgba(244,81,30,0.90)); }
}

.ember-logo { animation: ember-glow 2.5s ease-in-out infinite; }

/* ── Spinner ─────────────────────────────────────────────────── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Fade-up entrance ────────────────────────────────────────── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fade-up { animation: fade-up 0.5s ease forwards; }

.fade-up:nth-child(1) { animation-delay: 0.05s; }
.fade-up:nth-child(2) { animation-delay: 0.12s; }
.fade-up:nth-child(3) { animation-delay: 0.19s; }

/* ── Hero text entrance ─────────────────────────────────────── */
.hero-inner h1,
.hero-inner p,
.hero-inner .btn {
  opacity: 0;
  animation: fade-up 0.6s ease forwards;
}

.hero-inner h1   { animation-delay: 0.1s; }
.hero-inner p    { animation-delay: 0.25s; }
.hero-inner .btn { animation-delay: 0.4s; }

/* ── Card scroll-reveal ─────────────────────────────────────── */
.card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.2s ease;
}

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

/* ── Navbar scroll shadow ────────────────────────────────────── */
.navbar { transition: box-shadow 0.2s ease; }
.navbar.scrolled { box-shadow: 0 3px 20px rgba(0,0,0,0.5); }