/* Hand-Poured Candles — warm flicker + a slow, yoga-breath glow */

.candles-page { background: var(--canvas); }

.glow-ambient {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 20%, rgba(224, 149, 46, 0.16), transparent 60%);
  animation: breathe 6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.08); }
}

.candles-page .site-header,
.candles-page main,
.candles-page .site-footer {
  position: relative;
  z-index: 10;
}

/* Drifting embers, like incense smoke rising — slow and calm, not showy */
.embers {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  overflow: hidden;
}
.embers span {
  position: absolute;
  bottom: -20px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle, #FBD98B 0%, #E0952E 70%, transparent 100%);
  opacity: 0;
  animation: emberRise 9s ease-in infinite;
}
.embers span:nth-child(1) { left: 8%;  animation-delay: 0s;   }
.embers span:nth-child(2) { left: 20%; animation-delay: 1.2s; }
.embers span:nth-child(3) { left: 34%; animation-delay: 2.4s; }
.embers span:nth-child(4) { left: 48%; animation-delay: .6s;  }
.embers span:nth-child(5) { left: 61%; animation-delay: 3.1s; }
.embers span:nth-child(6) { left: 74%; animation-delay: 1.8s; }
.embers span:nth-child(7) { left: 86%; animation-delay: 4s;   }
.embers span:nth-child(8) { left: 93%; animation-delay: 2.9s; }

@keyframes emberRise {
  0%   { transform: translateY(0) scale(.6); opacity: 0; }
  10%  { opacity: .8; }
  80%  { opacity: .3; }
  100% { transform: translateY(-100vh) scale(1.1); opacity: 0; }
}

/* Hero flame */
.candle-flame-scene svg { width: 100%; max-width: 240px; margin: 0 auto; display: block; }

.big-flame, .big-flame-core, .mini-flame {
  transform-origin: 50% 100%;
  animation: bigFlicker 3.4s ease-in-out infinite;
}
.big-flame-core { animation-duration: 2.6s; }
.mini-flame { animation-duration: 2.2s; }

@keyframes bigFlicker {
  0%, 100% { transform: scale(1) rotate(0deg); }
  20%      { transform: scale(1.06, .94) rotate(-2deg); }
  45%      { transform: scale(.94, 1.08) rotate(1.5deg); }
  70%      { transform: scale(1.04, .96) rotate(2deg); }
  85%      { transform: scale(.97, 1.03) rotate(-1deg); }
}

@media (prefers-reduced-motion: reduce) {
  .glow-ambient { animation: none; opacity: .6; }
  .embers span { animation: none; opacity: 0; }
  .big-flame, .big-flame-core, .mini-flame { animation: none; }
}