/* =========================================================
   CANDLES — designed light objects (CSS + layered HTML, no photographs)
   Each candle: shadow · floor spill · glass cylinder (walls, rim, base, highlights,
   warm reflections) · wax (body, surface, melt pool, rim light) · wick · flame · halo.
   --lit (0–1) lights a candle; --gl (0–1) brings up its glass reflections.
   Sizes are in em: a composition scales by its font-size.
   ========================================================= */
/* Performance (Stage A): --lit / --gl are registered as non-inherited, so changing them on a candle no longer
   restyles every part inside it. A lit candle (the default, initial-value 1) looks exactly as before; the
   scrolled candlelight scene sets each part's opacity directly through InviteCandles.light() with the same
   formulas as the CSS below. Browsers without @property simply keep the old inherited behaviour. */
@property --lit{syntax:"<number>";inherits:false;initial-value:1}
@property --gl{syntax:"<number>";inherits:false;initial-value:1}
.cdl{--lit:1;--gl:1;--s:1;--gw:5em;--gh:15em;--ww:3.4em;--wh:9em;--fd:5.2s;
  position:absolute;bottom:var(--b,0);left:var(--x,50%);width:var(--gw);height:var(--gh);
  transform:translateX(-50%) scale(var(--s));transform-origin:50% 100%;pointer-events:none}
.cdl__shadow{position:absolute;left:50%;bottom:-.55em;width:calc(var(--gw) * 1.6);height:1.1em;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 45%,rgba(4,8,14,.55),rgba(4,8,14,.2) 45%,rgba(4,8,14,0) 72%)}
.cdl__spill{position:absolute;left:50%;bottom:-1.3em;width:calc(var(--gw) * 3.4);height:3em;transform:translateX(-50%);opacity:var(--lit);
  background:radial-gradient(ellipse at 50% 40%,rgba(255,200,140,.26),rgba(255,186,124,.09) 40%,rgba(255,180,120,0) 70%)}
.cdl__body{position:absolute;inset:0;opacity:calc(.18 + .82 * var(--lit))}

/* glass cylinder: transparent walls with thickness at the edges, a rim and a heavy base */
.cdl__glass{position:absolute;inset:0;border-radius:.5em/.32em;
  background:
    linear-gradient(90deg,rgba(205,222,240,.20) 0%,rgba(205,222,240,.06) 5%,rgba(255,255,255,0) 14%,rgba(255,255,255,0) 74%,rgba(205,222,240,.05) 84%,rgba(235,243,252,.20) 94%,rgba(205,222,240,.10) 100%),
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0) 30%,rgba(190,210,230,.05) 100%);
  box-shadow:inset 1px 0 0 rgba(225,236,248,.16),inset -1px 0 0 rgba(225,236,248,.22)}
.cdl__rim{position:absolute;left:0;right:0;top:-.34em;height:.68em;border-radius:50%;
  border:1px solid rgba(228,238,248,.30);border-bottom-color:rgba(228,238,248,.12);
  background:radial-gradient(ellipse at 50% 30%,rgba(255,255,255,.05),rgba(255,255,255,0) 70%)}
.cdl__base{position:absolute;left:0;right:0;bottom:-.34em;height:.9em;border-radius:50%;
  background:radial-gradient(ellipse at 50% 40%,rgba(232,240,250,.06),rgba(232,240,250,.16) 55%,rgba(232,240,250,.04) 72%,rgba(232,240,250,0) 74%);
  border-bottom:1px solid rgba(232,240,250,.32)}
.cdl__base::after{content:"";position:absolute;left:12%;right:12%;top:30%;height:30%;border-radius:50%;opacity:calc(var(--blit, var(--lit)) * .8);
  background:radial-gradient(ellipse,rgba(255,200,140,.45),rgba(255,200,140,0) 70%)}
/* cold highlights on the glass */
.cdl__hl{position:absolute;top:7%;bottom:9%;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.34) 22%,rgba(255,255,255,.12) 64%,rgba(255,255,255,0))}
.cdl__hl--a{left:11%}
.cdl__hl--b{right:9%;width:1px;top:14%;opacity:.7}
/* warm reflections of the flame in the glass walls */
.cdl__refl{position:absolute;width:12%;height:var(--rh,22%);bottom:var(--ry,60%);border-radius:50%;opacity:calc(var(--gl) * var(--lit));
  background:radial-gradient(ellipse at 50% 50%,rgba(255,214,160,.75),rgba(255,196,130,.22) 45%,rgba(255,190,120,0) 72%)}
.cdl__refl--r{right:4%}
.cdl__refl--l{left:5%;width:8%;opacity:calc(var(--gl) * var(--lit) * .55)}

/* wax: soft cylinder shading, warm subsurface glow below the flame, rim light.
   Performance (Stage A): the wax and its top surface are painted once in their unlit state; the warm,
   lit state lives on two overlay layers (.cdl__waxlit, .cdl__surf) whose opacity follows --lit.
   Changing --lit therefore only changes opacities (composited), never repaints a gradient.
   The overlay colours are the original lit-state colours, so lit = 0 and lit = 1 look as before. */
.cdl__wax{position:absolute;left:50%;bottom:.32em;width:var(--ww);height:var(--wh);transform:translateX(-50%);
  border-radius:.22em .22em .4em .4em/.3em .3em .22em .22em;
  background:
    linear-gradient(180deg,rgba(255,226,186,0) 0%,rgba(0,0,0,0) 35%,rgba(12,16,24,.18) 75%,rgba(12,16,24,.42) 100%),
    linear-gradient(90deg,#7d6f5d 0%,#b5a58b 10%,#d9ccb4 28%,#ebe1cd 46%,#e3d7c1 60%,#bfae93 82%,#7a6b58 100%)}
.cdl__wax::before{content:"";position:absolute;left:0;right:0;top:-.26em;height:.52em;border-radius:50%;
  background:radial-gradient(ellipse at 50% 52%,rgba(255,214,150,0) 0%,rgba(250,224,180,.5) 30%,#ddcdb2 70%,#bba98c 100%)}
.cdl__waxlit{position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:var(--lit);
  background:
    radial-gradient(ellipse 62% 30% at 50% 2%,rgba(255,196,128,.75),rgba(255,190,120,.22) 45%,rgba(255,190,120,0) 80%),
    linear-gradient(180deg,rgba(255,226,186,.10) 0%,rgba(255,226,186,0) 35%)}
.cdl__surf{position:absolute;left:0;right:0;top:-.26em;height:.52em;border-radius:50%;opacity:var(--lit);
  background:radial-gradient(ellipse at 50% 52%,rgba(255,214,150,.95) 0%,rgba(250,224,180,.9) 30%,#ddcdb2 70%,#bba98c 100%)}
.cdl__wax::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;border-radius:inherit;
  background:linear-gradient(0deg,rgba(40,30,22,.28),rgba(40,30,22,0))}
.cdl__wick{position:absolute;left:50%;bottom:calc(.32em + var(--wh) + .02em);width:1.6px;height:.42em;transform:translateX(-50%) rotate(5deg);transform-origin:50% 100%;
  background:linear-gradient(180deg,#1d140e,#3b2d22 70%,rgba(59,45,34,.6));border-radius:1px}

/* flame: blue root, white core, warm envelope; it breathes, it does not flicker */
.cdl__fl{position:absolute;left:50%;bottom:calc(.32em + var(--wh) + .12em);width:.74em;height:1.95em;
  transform:translateX(-50%) scale(calc(.2 + .8 * var(--lit)));transform-origin:50% 100%;opacity:var(--lit)}
.cdl__flame{position:absolute;inset:0;border-radius:50% 50% 50% 50%/64% 64% 36% 36%;transform-origin:50% 92%;
  background:
    radial-gradient(ellipse 30% 15% at 50% 90%,rgba(110,150,255,.55),rgba(110,150,255,0) 80%),
    radial-gradient(ellipse 30% 42% at 50% 66%,#fffef9 0%,#fff6dc 38%,rgba(255,232,178,.92) 58%,rgba(255,190,110,0) 82%),
    radial-gradient(ellipse 50% 58% at 50% 58%,rgba(255,176,86,.62),rgba(255,140,50,0) 76%);
  filter:blur(.35px);animation:flame var(--fd) ease-in-out infinite}
.cdl__fl::before{content:"";position:absolute;left:-90%;right:-90%;top:-30%;bottom:-25%;border-radius:50%;
  background:radial-gradient(ellipse 50% 50% at 50% 62%,rgba(255,196,120,.38),rgba(255,170,90,.12) 45%,rgba(255,160,80,0) 72%)}
.cdl__flame::after{content:"";position:absolute;left:30%;right:30%;top:42%;bottom:18%;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,255,255,.95),rgba(255,255,255,0) 70%)}
@keyframes flame{
  0%,100%{transform:scale(1,1) translateX(0) skewX(0deg)}
  27%{transform:scale(.985,1.035) translateX(.35px) skewX(-1.2deg)}
  52%{transform:scale(1.01,.975) translateX(-.25px) skewX(.8deg)}
  78%{transform:scale(.99,1.02) translateX(.15px) skewX(-.4deg)}}
.cdl__halo{position:absolute;left:50%;bottom:calc(.32em + var(--wh) + .9em);width:12em;height:12em;transform:translate(-50%,50%);border-radius:50%;
  opacity:calc(var(--lit) * .95);mix-blend-mode:screen;
  background:radial-gradient(circle closest-side,rgba(255,214,160,.46) 0%,rgba(255,192,128,.20) 22%,rgba(255,176,106,.07) 52%,rgba(255,170,100,0) 100%)}
.cdl__halo::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,230,190,.16),rgba(255,230,190,0) 30%);
  animation:halo var(--fd) ease-in-out infinite}
@keyframes halo{0%,100%{opacity:.85}40%{opacity:1}70%{opacity:.9}}

/* compositions */
.candles{position:absolute;width:34em;height:22em;pointer-events:none}
.candles__floor{position:absolute;left:-30%;right:-30%;bottom:-4em;height:9em;
  background:radial-gradient(ellipse 50% 50% at 50% 40%,rgba(255,196,140,.16),rgba(201,173,152,.06) 45%,rgba(201,173,152,0) 72%)}

@media (prefers-reduced-motion:reduce){.cdl__flame,.cdl__halo::after{animation:none}}

/* Performance (Stage A): only the candlelight scene's candles change --lit / --gl while the guest scrolls.
   Their light-dependent parts get their own compositor layers so a change is an opacity/transform update. */
.candles--scene .cdl__body,.candles--scene .cdl__spill,.candles--scene .cdl__refl,.candles--scene .cdl__halo,
.candles--scene .cdl__waxlit,.candles--scene .cdl__surf,.candles--scene .cdl__base::after{will-change:opacity}
.candles--scene .cdl__fl{will-change:transform,opacity}
/* the breathing flame (transform keyframes on a blurred shape) and the halo pulse run on the compositor;
   without this hint the flame's keyframes were re-painted on the main thread every frame (~8 ms at 4× CPU) */
.cdl__flame{will-change:transform}
.cdl__halo::after{will-change:opacity}
/* breathing flames rest while their group is off-screen (set by theme.js); nothing changes on screen */
.candles.is-offscreen .cdl__flame,.candles.is-offscreen .cdl__halo::after{animation-play-state:paused}

/* placements */
.candles--scene{left:50%;bottom:calc(env(safe-area-inset-bottom) + 8svh);transform:translateX(-50%);font-size:min(2.75vw,1.62svh,15px)}
.celebration__light{position:absolute;z-index:1;left:0;right:0;bottom:0;height:46svh;pointer-events:none}
.candles--trio{left:50%;bottom:3svh;transform:translateX(-50%);font-size:min(2.1vw,1.15svh,10px);opacity:.92}
@media (min-width:1000px){
  .celebration__light{left:3vw;right:auto;width:34vw;height:80svh;bottom:4svh}
  .candles--trio{font-size:min(1.15vw,1.7svh,15px)}
}
.venue__art{position:relative;aspect-ratio:4/5;overflow:hidden;container-type:inline-size;
  background:radial-gradient(ellipse 85% 50% at 50% 88%,#24364d 0%,#16222f 62%,#111b27 100%)}
.venue__art .candles{left:50%;bottom:9%;transform:translateX(-50%);font-size:11px;font-size:2.65cqw}