/* flame.css — the diya and its flame, used everywhere a lamp is lit.
 *
 * .diya wraps the clay-lamp sprite; .flame sits on the wick tip, measured on
 * assets/img/diya.webp at (60.5%, 37.2%). The flame is unlit (scale 0) until an
 * ancestor or the flame itself gets .is-lit, then it pops up on --ease-back.
 *
 * Only transform/opacity animate. The tongue is an SVG teardrop with a baked radial
 * gradient; the halo is a closest-side radial gradient — both paint once and are then
 * just composited.
 */

.diya {
  --diya-w: 120px;
  position: relative;
  display: inline-block;
  width: var(--diya-w);
  vertical-align: middle;
}

.diya > img {
  width: 100%;
  height: auto;
}

.diya > .flame {
  left: 60.5%;
  top: 37.2%;
  --fw: calc(var(--diya-w) * 0.15);
}

.diya--mini {
  --diya-w: 46px;
}

/* on small lamps a true-to-scale flame is a speck; draw it a little proud */
.diya--mini > .flame,
.event__diya > .flame {
  --fw: calc(var(--diya-w) * 0.21);
}

.diya--hero {
  --diya-w: 150px;
}

.flame {
  position: absolute;
  z-index: 3; /* animated: sits above the static copy around it (see css/base.css .section) */
  width: var(--fw, 16px);
  height: calc(var(--fw, 16px) * 2.1);
  transform: translate(-50%, -94%) scale(0);
  transform-origin: 50% 94%;
  pointer-events: none;
  transition: transform 620ms var(--ease-back);
}

.is-lit .flame,
.flame.is-lit {
  transform: translate(-50%, -94%) scale(1);
}

/* warm halo */
.flame::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 62%;
  width: 560%;
  height: 360%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 200, 96, 0.5), rgba(255, 146, 44, 0.18) 48%, rgba(255, 120, 30, 0) 100%);
  transform: translate(-50%, -50%);
  animation: flame-halo 2.6s var(--ease-soft) var(--fd, 0s) infinite alternate;
}

/* the tongue */
.flame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 84'%3E%3Cdefs%3E%3CradialGradient id='g' cx='50%25' cy='76%25' r='62%25' fx='50%25' fy='82%25'%3E%3Cstop offset='0' stop-color='%23fffdf3'/%3E%3Cstop offset='.28' stop-color='%23fff1b8'/%3E%3Cstop offset='.52' stop-color='%23ffc64d'/%3E%3Cstop offset='.78' stop-color='%23ff8a1f'/%3E%3Cstop offset='1' stop-color='%23e2481a' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Cpath d='M20 0C23 17 36 32 36 55c0 16-7 28-16 28S4 71 4 55C4 32 17 17 20 0Z' fill='url(%23g)'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform-origin: 50% 94%;
  animation: flame-flicker 1.5s var(--ease-soft) var(--fd, 0s) infinite;
}

@keyframes flame-flicker {
  0%   { transform: scale(1, 1) skewX(0deg); opacity: 1; }
  13%  { transform: scale(0.95, 1.07) skewX(2.5deg); }
  27%  { transform: scale(1.04, 0.95) skewX(-1.5deg); opacity: 0.93; }
  42%  { transform: scale(0.97, 1.1) skewX(1deg); }
  57%  { transform: scale(1.02, 0.96) skewX(-3deg); opacity: 1; }
  73%  { transform: scale(0.95, 1.05) skewX(1.5deg); }
  88%  { transform: scale(1.01, 0.98) skewX(-1deg); opacity: 0.96; }
  100% { transform: scale(1, 1) skewX(0deg); opacity: 1; }
}

@keyframes flame-halo {
  from { opacity: 0.72; transform: translate(-50%, -50%) scale(0.92); }
  to   { opacity: 1;    transform: translate(-50%, -50%) scale(1.05); }
}