/* ============================================================================
   Light a Candle Online — Realistic Candle System
   Pure CSS/SVG flames. Multiple styles + colors. Reduced-motion aware.
   A ".candle" is sized by --candle-scale; everything else derives from it.
   ========================================================================== */

:root {
  --flame-core:   #fff7e0;
  --flame-mid:    #ffd35c;
  --flame-edge:   #ff8a1e;
  --flame-deep:   #f4630c;
  --flame-base:   #4a7fc1; /* the cool blue at the wick */
  --wax:          #f3ead7;
  --wax-shade:    #d9cbac;
  --wax-light:    #fffaf0;
}

/* ---- A single candle ------------------------------------------------------ */
.candle {
  --candle-scale: 1;
  position: relative;
  width: calc(70px * var(--candle-scale));
  /* reserve vertical room for the flame so its TIP is never clipped by a parent */
  min-height: calc(212px * var(--candle-scale));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  isolation: isolate;
}

/* The pool of warm light a lit candle throws onto its surroundings */
.candle__halo {
  position: absolute;
  left: 50%;
  bottom: calc(40px * var(--candle-scale));
  width: calc(220px * var(--candle-scale));
  height: calc(220px * var(--candle-scale));
  translate: -50% 0;
  border-radius: 50%;
  background: radial-gradient(circle,
      rgba(255,184,92,0.40) 0%,
      rgba(255,150,50,0.16) 32%,
      rgba(255,140,40,0.04) 55%,
      transparent 70%);
  filter: blur(6px);
  z-index: -1;
  opacity: 0;
  transition: opacity 1.1s ease;
  animation: halo-breathe 5.5s ease-in-out infinite;
}

/* ---- Wax body ------------------------------------------------------------- */
.candle__body {
  position: relative;
  width: calc(40px * var(--candle-scale));
  height: calc(96px * var(--candle-scale));
  border-radius: calc(8px * var(--candle-scale)) calc(8px * var(--candle-scale)) calc(4px * var(--candle-scale)) calc(4px * var(--candle-scale));
  background:
    linear-gradient(90deg,
      var(--wax-shade) 0%, var(--wax-light) 22%, var(--wax) 50%,
      var(--wax-light) 74%, var(--wax-shade) 100%);
  box-shadow:
    inset calc(-6px * var(--candle-scale)) 0 calc(10px * var(--candle-scale)) rgba(120,98,60,0.25),
    inset calc(6px * var(--candle-scale)) 0 calc(10px * var(--candle-scale)) rgba(255,255,255,0.4),
    0 calc(8px * var(--candle-scale)) calc(22px * var(--candle-scale)) rgba(0,0,0,0.45);
}
/* molten rim + glow on top of the wax when lit */
.candle__body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(12px * var(--candle-scale));
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
      rgba(255,196,120,0.95) 0%, rgba(214,180,130,0.9) 55%, rgba(150,120,80,0.6) 100%);
  box-shadow: 0 0 calc(14px * var(--candle-scale)) rgba(255,170,70,0.7);
  transform: translateY(calc(-3px * var(--candle-scale)));
}

/* ---- Wick ----------------------------------------------------------------- */
.candle__wick {
  position: absolute;
  bottom: calc(92px * var(--candle-scale));
  width: calc(2.5px * var(--candle-scale));
  height: calc(10px * var(--candle-scale));
  background: linear-gradient(#3a2a1a, #111);
  border-radius: 2px;
  z-index: 2;
}

/* ---- Flame ---------------------------------------------------------------- */
.candle__flame {
  position: absolute;
  bottom: calc(98px * var(--candle-scale));
  width: calc(26px * var(--candle-scale));
  height: calc(64px * var(--candle-scale));
  z-index: 3;
  transform-origin: 50% 95%;
  animation: flame-sway 4.3s ease-in-out infinite;
  will-change: transform;
}
/* outer warm flame — teardrop pointing up */
.candle__flame::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50% 50% 50% 50% / 68% 68% 36% 36%;
  background: radial-gradient(ellipse 60% 75% at 50% 78%,
      var(--flame-core) 0%, var(--flame-mid) 28%,
      var(--flame-edge) 58%, var(--flame-deep) 82%, rgba(244,99,12,0) 100%);
  box-shadow:
    0 0 calc(18px * var(--candle-scale)) calc(4px * var(--candle-scale)) rgba(255,160,50,0.55),
    0 calc(-6px * var(--candle-scale)) calc(30px * var(--candle-scale)) calc(8px * var(--candle-scale)) rgba(255,130,30,0.35);
  filter: blur(0.4px);
  animation: flame-flicker 2.1s ease-in-out infinite;
  transform-origin: 50% 90%;
}
/* inner bright core + cool blue base at the wick */
.candle__flame::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 52%;
  height: 62%;
  translate: -50% 0;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, var(--flame-base) 0%, rgba(74,127,193,0) 60%),
    radial-gradient(ellipse 60% 70% at 50% 60%, #ffffff 0%, var(--flame-core) 45%, rgba(255,247,224,0) 80%);
  filter: blur(0.3px);
  animation: flame-flicker 1.4s ease-in-out infinite reverse;
}

/* ---- Wind: OPEN flames (taper, pillar, floating) get gusts that nearly blow
   them out but recover. Enclosed flames (votive, glass) stay steady. ---------- */
/* Open flames get ONE of five wind animations (assigned randomly in JS), each a
   different direction / magnitude / timing, with a random duration + delay so no
   two candles move alike. Enclosed candles (no gust class) keep the gentle sway. */
.candle[class*="gust-"] .candle__flame { animation-duration: var(--gust-dur,5.5s); animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-delay: var(--gust-delay,0s); }
.candle.gust-1 .candle__flame { animation-name: flame-gust-1; }
.candle.gust-2 .candle__flame { animation-name: flame-gust-2; }
.candle.gust-3 .candle__flame { animation-name: flame-gust-3; }
.candle.gust-4 .candle__flame { animation-name: flame-gust-4; }
.candle.gust-5 .candle__flame { animation-name: flame-gust-5; }

/* ============================================================================
   STATES
   ========================================================================== */
.candle[data-lit="true"]  .candle__halo { opacity: 1; }
.candle[data-lit="false"] .candle__flame,
.candle[data-lit="false"] .candle__halo { display: none; }
.candle[data-lit="false"] .candle__body::before {
  background: radial-gradient(ellipse at center, #d8c9aa 0%, #b9a983 70%, #8c7c58 100%);
  box-shadow: none;
}
/* a faint smoke wisp for an unlit/just-extinguished candle */
.candle[data-lit="false"] .candle__wick { background: linear-gradient(#2a2018, #000); }

/* ============================================================================
   STYLES  (set on the .candle element)
   ========================================================================== */

/* Votive / tea light — short and wide in a small glass */
.candle--votive .candle__body { height: calc(46px * var(--candle-scale)); width: calc(54px * var(--candle-scale)); border-radius: 6px 6px 10px 10px; }
.candle--votive .candle__body::after {
  content: ""; position: absolute; inset: calc(-6px * var(--candle-scale)) calc(-7px * var(--candle-scale)) 0;
  border-radius: 8px 8px 14px 14px;
  background: linear-gradient(90deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04) 30%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.04) 70%, rgba(255,255,255,0.16));
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 0 16px rgba(255,190,110,0.5);
  pointer-events: none;
}
.candle--votive .candle__wick  { bottom: calc(42px * var(--candle-scale)); }
.candle--votive .candle__flame { bottom: calc(48px * var(--candle-scale)); height: calc(50px * var(--candle-scale)); width: calc(22px * var(--candle-scale)); }

/* Pillar — tall and stout */
.candle--pillar .candle__body { width: calc(56px * var(--candle-scale)); height: calc(120px * var(--candle-scale)); }
.candle--pillar .candle__wick  { bottom: calc(116px * var(--candle-scale)); }
.candle--pillar .candle__flame { bottom: calc(122px * var(--candle-scale)); }

/* Taper — slender and elegant (default-ish but thinner) */
.candle--taper .candle__body { width: calc(20px * var(--candle-scale)); height: calc(132px * var(--candle-scale)); border-radius: 10px 10px 3px 3px; }
.candle--taper .candle__wick  { bottom: calc(128px * var(--candle-scale)); }
.candle--taper .candle__flame { bottom: calc(134px * var(--candle-scale)); }

/* Memorial glass — candle inside a tall glass jar (yahrzeit-like) */
.candle--glass .candle__body { width: calc(48px * var(--candle-scale)); height: calc(110px * var(--candle-scale)); border-radius: 6px; }
.candle--glass .candle__body::after {
  content: ""; position: absolute; inset: calc(-8px * var(--candle-scale)) calc(-8px * var(--candle-scale)) calc(-4px * var(--candle-scale));
  border-radius: 8px;
  background: linear-gradient(90deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03) 35%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.03) 65%, rgba(255,255,255,0.14));
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: inset 0 0 26px rgba(255,180,90,0.45);
}
.candle--glass .candle__wick  { bottom: calc(106px * var(--candle-scale)); }
.candle--glass .candle__flame { bottom: calc(112px * var(--candle-scale)); }

/* Floating — candle disc resting on water with a reflection */
.candle--floating .candle__body { width: calc(58px * var(--candle-scale)); height: calc(30px * var(--candle-scale)); border-radius: 50% / 40%; }
.candle--floating .candle__wick  { bottom: calc(26px * var(--candle-scale)); }
.candle--floating .candle__flame { bottom: calc(32px * var(--candle-scale)); height: calc(48px * var(--candle-scale)); }
.candle--floating::after {
  content: ""; position: absolute; bottom: calc(-14px * var(--candle-scale)); width: calc(72px * var(--candle-scale)); height: calc(22px * var(--candle-scale));
  background: radial-gradient(ellipse at center, rgba(255,170,70,0.5), rgba(255,150,50,0) 70%);
  filter: blur(4px); border-radius: 50%;
}

/* ---- Flame color variants ------------------------------------------------- */
.candle--color-gold   { --flame-mid:#ffd35c; --flame-edge:#ff8a1e; --flame-deep:#f4630c; }
.candle--color-rose   { --flame-mid:#ffb0c8; --flame-edge:#ff5f8f; --flame-deep:#d83a6b; --flame-base:#b56; }
.candle--color-violet { --flame-mid:#d9b3ff; --flame-edge:#9b5cff; --flame-deep:#6a2bd1; --flame-base:#5a4; }
.candle--color-azure  { --flame-mid:#bfe3ff; --flame-edge:#4ea8ff; --flame-deep:#1e6fd1; --flame-base:#2a5; }
.candle--color-emerald{ --flame-mid:#bdf5cf; --flame-edge:#3fd17a; --flame-deep:#1a9b54; --flame-base:#393; }

/* ============================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes flame-flicker {
  0%,100% { transform: scaleY(1)    scaleX(1)    translateX(0);   opacity: 1;    }
  20%     { transform: scaleY(1.06) scaleX(0.97) translateX(0.4px); opacity: 0.92; }
  40%     { transform: scaleY(0.95) scaleX(1.03) translateX(-0.5px); opacity: 1;   }
  60%     { transform: scaleY(1.08) scaleX(0.96) translateX(0.3px); opacity: 0.9;  }
  80%     { transform: scaleY(0.97) scaleX(1.02) translateX(-0.3px); opacity: 0.97;}
}
@keyframes flame-sway {
  0%,100% { transform: rotate(-1.3deg); }
  50%     { transform: rotate(1.3deg);  }
}
/* 1 — strong gust to the RIGHT, nearly out */
@keyframes flame-gust-1 {
  0%,42%,100% { transform: rotate(0) skewX(0) scaleY(1); opacity:1; }
  50%  { transform: rotate(20deg)  skewX(-18deg) scaleY(1.42) translateX(4px);  opacity:.58; }
  58%  { transform: rotate(-8deg)  skewX(8deg)   scaleY(.8)   translateX(-3px); opacity:.85; }
  66%  { transform: rotate(11deg)  skewX(-6deg)  scaleY(1.15) translateX(2px);  opacity:.95; }
  74%  { transform: rotate(-3deg)  scaleY(1);                                    opacity:1; }
}
/* 2 — medium gust to the LEFT */
@keyframes flame-gust-2 {
  0%,50%,100% { transform: rotate(0) skewX(0) scaleY(1); opacity:1; }
  57%  { transform: rotate(-16deg) skewX(14deg)  scaleY(1.26) translateX(-3px); opacity:.7; }
  64%  { transform: rotate(7deg)   skewX(-6deg)  scaleY(.9)   translateX(2px);  opacity:.9; }
  71%  { transform: rotate(-5deg)  scaleY(1.08);                                 opacity:1; }
}
/* 3 — quick double flutter, both directions, small */
@keyframes flame-gust-3 {
  0%,40%,100% { transform: rotate(0) scaleY(1); opacity:1; }
  46%  { transform: rotate(9deg)  skewX(-7deg) scaleY(1.12); opacity:.9; }
  52%  { transform: rotate(-8deg) skewX(6deg)  scaleY(.93);  opacity:.95; }
  58%  { transform: rotate(6deg)  skewX(-4deg) scaleY(1.08); opacity:.92; }
  64%  { transform: rotate(-3deg) scaleY(1);                  opacity:1; }
}
/* 4 — big, slow lean almost blown out (RIGHT, large magnitude) */
@keyframes flame-gust-4 {
  0%,35%,100% { transform: rotate(0) skewX(0) scaleY(1); opacity:1; }
  50%  { transform: rotate(27deg)  skewX(-23deg) scaleY(1.5)  translateX(5px);  opacity:.48; }
  62%  { transform: rotate(14deg)  skewX(-10deg) scaleY(1.22) translateX(3px);  opacity:.78; }
  72%  { transform: rotate(-6deg)  skewX(4deg)   scaleY(.95)  translateX(-1px); opacity:.95; }
  82%  { transform: rotate(3deg)   scaleY(1);                                    opacity:1; }
}
/* 5 — gentle alternating wobble, subtle */
@keyframes flame-gust-5 {
  0%,100% { transform: rotate(0) scaleY(1); opacity:1; }
  30%  { transform: rotate(5deg)  skewX(-3deg) scaleY(1.06); opacity:.97; }
  55%  { transform: rotate(-7deg) skewX(4deg)  scaleY(.97);  opacity:.94; }
  78%  { transform: rotate(4deg)  skewX(-2deg) scaleY(1.04); opacity:.98; }
}
@keyframes halo-breathe {
  0%,100% { opacity: 1;    transform: translate(-50%,0) scale(1);    }
  50%     { opacity: 0.78; transform: translate(-50%,0) scale(0.94); }
}

/* light-up entrance when a visitor lights a candle */
@keyframes candle-ignite {
  0%   { opacity: 0; transform: scale(0.4) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}
.candle--igniting .candle__flame { animation: candle-ignite 0.9s ease-out, flame-sway 4.3s ease-in-out infinite 0.9s; }

@media (prefers-reduced-motion: reduce) {
  .candle__flame, .candle__flame::before, .candle__flame::after,
  .candle__halo, .candle--igniting .candle__flame {
    animation: none !important;
  }
}