/* ------------------------------------------------------------------
   The designed moment: press and hold the candle to fill the
   thermometer and hear the impact voices. Transform/opacity only.
   ------------------------------------------------------------------ */

.candle-moment { display: flex; align-items: center; gap: 22px; margin-top: 34px; }
.candle { position: relative; flex: none; width: 76px; height: 86px; padding: 0; border: 0; background: none; cursor: pointer; touch-action: none; -webkit-tap-highlight-color: transparent; }
.candle:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 4px; }
.candle-body { position: absolute; left: 50%; bottom: 2px; width: 22px; height: 46px; transform: translateX(-50%); border-radius: 3px 3px 2px 2px; background: linear-gradient(180deg, #e8d9b0, #b89a58); }
.candle-flame { position: absolute; left: 50%; top: 6px; width: 15px; height: 28px; border-radius: 50% 50% 42% 42%; background: radial-gradient(circle at 50% 74%, #fff7d9 0%, #ffd571 46%, rgba(216,74,67,.92) 78%, transparent 100%); transform: translateX(-50%) scale(calc(.55 + .45 * var(--heat, 0))); transform-origin: 50% 100%; }
.candle-flame i { position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle at 50% 82%, rgba(255,255,255,.95) 0%, transparent 55%); opacity: calc(.5 + .5 * var(--heat, 0)); }
.candle-flame::after { content: ''; position: absolute; inset: -12px; background: radial-gradient(circle, rgba(255,205,90,.55) 0%, transparent 62%); opacity: calc(.9 * var(--heat, 0)); }
@media (hover: hover) { .candle:hover .candle-flame::after { opacity: .55; } }
.candle.is-warm .candle-flame { animation: flame-breathe 2.2s ease-in-out infinite; }
.candle.is-warm .candle-flame::after { opacity: .9; }
@keyframes flame-breathe { 0%, 100% { transform: translateX(-50%) scale(1) rotate(-1.5deg); } 50% { transform: translateX(-50%) scale(1.08) rotate(1.5deg); } }
.candle-hint { margin: 0; color: var(--muted); }

/* thermometer fill is driven by scaleX while the candle owns it */
.thermometer-panel.is-warming .thermometer-fill::after { opacity: 1; }
.thermometer-fill::after { content: ''; position: absolute; inset: 0; box-shadow: 0 0 22px rgba(210,170,89,.65); opacity: 0; transition: opacity .4s var(--ease-out); }

/* impact voices wait for the candle only when a candle owns the panel */
.js .thermometer-panel:has([data-candle]) .impact-voices { opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); }
.js .thermometer-panel:has([data-candle]) .impact-voices.is-revealed { opacity: 1; transform: none; }