/* scenes/blessings.css -- "Ashirwad on the Yamuna": the hand-authored "Send your blessings"
   slide (after presence, before venue).
   OWNER: the blessings agent (edit only this file, js/motion/scenes/blessings.js,
   src/scenes/blessings.html and assets/scenes/blessings/; then python3 tools/build.py).
   Markup: src/scenes/blessings.html inside section[data-scene="blessings"] >
   .stage.stage--handmade (1080 x 1920 design px, 1 px = var(--u)).

   Design map (design px, measured on assets/scenes/blessings/yamuna-twilight.webp):
     sky 0-1180 (corner florals to y~320) . emblem halo centre 540,300 r200 . title
     baseline 612 . message 648-740 . offering tray 690-1020 (6 tokens on a thali rim)
     . wish pill 1000-1124 . Taj 520-860 x 1183-1330 . far bank 1375 . river 1378-1772
     . ghat steps 1740-1920, brass lamp flames at 125,1796 / 285,1733 / 875,1709 / 828,1782
     . diya dock on the water 560,1712, its label chip on the top step 350-770 x 1795-1887.

   Resting look is unscoped (= reduced motion / no JS). Anything hidden before the
   entrance is armed under html.motion only. Animated nodes are small; the only
   stage-sized nodes are the background <img>, the sky veil (opacity only) and the
   particle canvas (no filter / will-change / blend on any of them). */

.scene--blessings .stage--handmade { background: #f0c9b6; }
.bl-bg { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.bl-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ emblem halo */
.bl-halo { position: absolute; left: calc(290 * var(--u)); top: calc(50 * var(--u)); width: calc(500 * var(--u)); height: calc(500 * var(--u)); z-index: 10; pointer-events: none; }
.bl-moon {
  position: absolute; inset: calc(-14 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle closest-side, rgba(255, 252, 244, 0.94) 0%, rgba(255, 250, 238, 0.86) 50%, rgba(255, 243, 222, 0.5) 72%, rgba(255, 236, 214, 0.18) 88%, rgba(255, 232, 210, 0) 100%);
}
.bl-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bl-ring path, .bl-ring circle { fill: none; stroke-linecap: round; }
.bl-ring__faint path { stroke: rgba(176, 128, 66, 0.5); stroke-width: 3; }
.bl-ring__lit path { stroke: var(--hue, #d9a64a); stroke-width: 7; opacity: 0; }
.bl-ring__lit path.bl-glow { stroke-width: 20; }
.bl-ring__lit path.is-lit { opacity: 1; }
.bl-ring__lit path.bl-glow.is-lit { opacity: 0.26; }
.bl-ring__full { stroke: #d9a64a; stroke-width: 3; opacity: 0; }
.scene--blessings.is-complete .bl-ring__full { opacity: 0.9; }
.bl-logo { position: absolute; left: calc(85 * var(--u)); top: calc(92 * var(--u)); width: calc(330 * var(--u)); height: calc(316 * var(--u)); }
.bl-logo img { width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }

/* motion-only halo furniture (built by JS) */
.bl-orbit, .bl-comet { position: absolute; inset: 0; border-radius: 50%; }
.bl-orbit i, .bl-comet i {
  position: absolute; left: 50%; top: 0;
  width: calc(26 * var(--u)); height: calc(26 * var(--u)); margin: calc(-13 * var(--u)) 0 0 calc(-13 * var(--u));
  border-radius: 50%;
  background: radial-gradient(circle closest-side, #fffaf0 0%, rgba(255, 226, 160, 0.9) 35%, rgba(255, 210, 130, 0) 100%);
}
.bl-orbit { opacity: 0.75; }
.bl-comet { opacity: 0; }
.bl-comet i { width: calc(44 * var(--u)); height: calc(44 * var(--u)); margin: calc(-22 * var(--u)) 0 0 calc(-22 * var(--u)); }
.bl-bloom, .bl-wave {
  position: absolute; left: 50%; top: 50%; border-radius: 50%; pointer-events: none; opacity: 0;
}
.bl-bloom {
  width: calc(620 * var(--u)); height: calc(620 * var(--u)); margin: calc(-310 * var(--u)) 0 0 calc(-310 * var(--u));
  background: radial-gradient(circle closest-side, rgba(255, 246, 220, 0.95) 0%, rgba(255, 224, 160, 0.55) 45%, rgba(255, 214, 150, 0) 100%);
}
.bl-wave {
  width: calc(420 * var(--u)); height: calc(420 * var(--u)); margin: calc(-210 * var(--u)) 0 0 calc(-210 * var(--u));
  border: calc(5 * var(--u)) solid rgba(255, 228, 160, 0.95);
  box-shadow: 0 0 calc(30 * var(--u)) rgba(255, 220, 150, 0.8), inset 0 0 calc(24 * var(--u)) rgba(255, 220, 150, 0.6);
}
/* foil glint across the logo: the band travels inside a node masked to the logo's own pixels */
.bl-glint {
  position: absolute; inset: 0; overflow: hidden; opacity: 0;
  -webkit-mask-image: var(--bl-logo); mask-image: var(--bl-logo);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.bl-glint i {
  position: absolute; top: -20%; bottom: -20%; left: -60%; width: 50%;
  background: linear-gradient(100deg, rgba(255, 250, 230, 0) 0%, rgba(255, 250, 230, 0.95) 50%, rgba(255, 250, 230, 0) 100%);
}

/* ------------------------------------------------------------------ title + message */
.bl-title { margin: 0; font: inherit; z-index: 14; }
.bl-title .r { text-shadow: 0 0 calc(22 * var(--u)) rgba(255, 249, 238, 0.95), 0 0 calc(8 * var(--u)) rgba(255, 249, 238, 0.9); }
.bl-title .tl.bl-ink {
  -webkit-mask-image: var(--bl-mi); mask-image: var(--bl-mi);
  -webkit-mask-size: var(--bl-ms); mask-size: var(--bl-ms);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.bl-pen {
  position: absolute; z-index: 16; pointer-events: none; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle closest-side, #fffdf5 0%, rgba(255, 226, 170, 0.85) 40%, rgba(255, 210, 150, 0) 100%);
}

.bl-msg {
  position: absolute; left: calc(70 * var(--u)); top: calc(646 * var(--u)); width: calc(940 * var(--u));
  margin: 0; z-index: 15; text-align: center; pointer-events: none;
  font-family: "Quattrocento", serif; font-size: calc(35 * var(--u)); line-height: 1.32; color: #364f06;
  text-shadow: 0 0 calc(14 * var(--u)) rgba(255, 249, 238, 0.95), 0 0 calc(5 * var(--u)) rgba(255, 249, 238, 0.9);
}
.bl-msg__t { display: inline-block; transform: skewX(-9deg); }
.bl-msg.is-line .bl-msg__t { color: #7a2a3e; }
.bl-msg.is-finale .bl-msg__t { color: #9b3a43; font-size: calc(38 * var(--u)); -webkit-text-stroke: 0.02em currentColor; paint-order: stroke fill; letter-spacing: 0.02em; }

/* ------------------------------------------------------------------ offering tray */
.bl-tray-glass {
  position: absolute; left: calc(10 * var(--u)); top: calc(690 * var(--u)); width: calc(1060 * var(--u)); height: calc(340 * var(--u));
  z-index: 11; pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse closest-side, rgba(255, 250, 240, 0.7) 0%, rgba(255, 249, 238, 0.5) 52%, rgba(255, 248, 236, 0.16) 82%, rgba(255, 248, 236, 0) 100%);
}
.bl-rim { position: absolute; left: 0; top: calc(840 * var(--u)); width: 100%; height: calc(120 * var(--u)); z-index: 12; overflow: visible; pointer-events: none; }
.bl-rim path { fill: none; stroke-linecap: round; }
.bl-rim__line { stroke: rgba(184, 136, 66, 0.85); stroke-width: 2.6; }
.bl-rim__beads { stroke: rgba(201, 164, 106, 0.8); stroke-width: 6; stroke-dasharray: 0 22; }

.bl-tray { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; z-index: 13; pointer-events: none; }
.bl-slot { position: absolute; left: calc((var(--x) - 78) * var(--u)); top: calc((var(--y) - 74) * var(--u)); width: calc(156 * var(--u)); height: calc(196 * var(--u)); pointer-events: auto; }
.bl-token {
  position: relative; display: block; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; border-radius: calc(36 * var(--u)); background: none; color: inherit; font: inherit;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.bl-token:focus-visible { outline: 3px solid #8a2f4b; outline-offset: 2px; }
.bl-token__glow {
  position: absolute; left: calc(3 * var(--u)); top: 0; width: calc(150 * var(--u)); height: calc(150 * var(--u));
  border-radius: 50%; opacity: 0.6;
  background: radial-gradient(circle closest-side, rgba(255, 238, 200, 0.95) 0%, rgba(255, 228, 176, 0.55) 55%, rgba(255, 222, 170, 0) 100%);
  transition: opacity 0.5s ease;
}
.bl-token__glow::after {
  content: ""; position: absolute; inset: calc(10 * var(--u)); border-radius: 50%;
  border: calc(2.5 * var(--u)) solid rgba(201, 150, 70, 0.85); opacity: 0; transform: scale(0.86);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.bl-token.is-given .bl-token__glow { opacity: 1; }
.bl-token.is-given .bl-token__glow::after { opacity: 1; transform: none; }
.bl-token__art { position: absolute; left: calc(14 * var(--u)); top: calc(10 * var(--u)); width: calc(128 * var(--u)); height: calc(128 * var(--u)); }
.bl-token__art--wide { left: calc(2 * var(--u)); top: calc(22 * var(--u)); width: calc(152 * var(--u)); height: calc(109 * var(--u)); }
.bl-token__art img { width: 100%; height: 100%; object-fit: contain; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.bl-token__label {
  position: absolute; left: calc(-10 * var(--u)); right: calc(-10 * var(--u)); top: calc(150 * var(--u));
  font-family: "Quattrocento", serif; font-size: calc(32 * var(--u)); line-height: 1.1; white-space: nowrap;
  color: #7a2a3e; -webkit-text-stroke: 0.018em currentColor; paint-order: stroke fill; letter-spacing: 0.02em;
  text-shadow: 0 0 calc(10 * var(--u)) rgba(255, 249, 238, 0.95);
}
@media (hover: hover) {
  .bl-token:hover .bl-token__glow { opacity: 1; }
}

/* ------------------------------------------------------------------ wish */
.bl-wish {
  position: absolute; left: calc(70 * var(--u)); top: calc(996 * var(--u)); width: calc(940 * var(--u)); height: calc(128 * var(--u));
  z-index: 30; display: flex; margin: 0; overflow: hidden;
  border-radius: calc(62 * var(--u));
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.95), rgba(255, 247, 236, 0.9));
  border: max(1px, calc(2.4 * var(--u))) solid rgba(190, 145, 80, 0.8);
  box-shadow: 0 calc(10 * var(--u)) calc(34 * var(--u)) rgba(122, 60, 40, 0.18), inset 0 0 0 calc(5 * var(--u)) rgba(255, 255, 255, 0.55);
}
.bl-wish:focus-within { box-shadow: 0 0 0 3px rgba(138, 47, 75, 0.55), 0 calc(10 * var(--u)) calc(34 * var(--u)) rgba(122, 60, 40, 0.18); }
.bl-wish__input {
  flex: 1 1 auto; min-width: 0; margin: 0; border: 0; border-radius: 0; background: transparent; outline: none;
  padding: 0 calc(12 * var(--u)) 0 calc(34 * var(--u));
  font-family: "Quattrocento", serif; font-size: max(16px, calc(36 * var(--u))); color: #3b3a22;
  -webkit-appearance: none; appearance: none;
}
/* the field stays >= 16px (no iOS focus zoom); only the hint may be smaller so it fits a phone */
.bl-wish__input::placeholder { color: rgba(74, 70, 40, 0.66); opacity: 1; font-size: max(15px, calc(33 * var(--u))); }
.bl-wish__send {
  flex: 0 0 calc(282 * var(--u)); display: flex; align-items: center; justify-content: center; gap: calc(14 * var(--u));
  margin: 0; padding: 0 calc(22 * var(--u)) 0 calc(18 * var(--u)); border: 0; border-radius: 0 calc(62 * var(--u)) calc(62 * var(--u)) 0;
  background: linear-gradient(180deg, #b6566f 0%, #93324e 100%); color: #fff8ee; cursor: pointer;
  font-family: "Quattrocento", serif; font-size: max(13px, calc(29 * var(--u))); letter-spacing: 0.015em; white-space: nowrap; text-align: left;
  -webkit-text-stroke: 0.02em currentColor; paint-order: stroke fill;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background-color 0.2s ease, transform 0.15s ease;
}
.bl-wish__send-t { display: flex; flex-direction: column; line-height: 1.08; }
.bl-wish__send-t span + span { font-size: 1.12em; letter-spacing: 0.03em; }
.bl-wish__send svg { flex: none; width: max(15px, calc(38 * var(--u))); height: max(15px, calc(38 * var(--u))); fill: currentColor; transform: rotate(-12deg); }
.bl-wish__send:active { transform: scale(0.97); }
.bl-wish__send:focus-visible { outline: 3px solid #fff8ee; outline-offset: -6px; }
.bl-ash {
  position: absolute; z-index: 31; pointer-events: none; white-space: pre; overflow: hidden;
  font-family: "Quattrocento", serif; color: #3b3a22;
}
.bl-ash span { display: inline-block; white-space: pre; }
.bl-wish.is-sending .bl-wish__input::placeholder { color: transparent; }

/* ------------------------------------------------------------------ diya dock */
.bl-dock-chip {
  position: absolute; left: calc(350 * var(--u)); top: calc(1795 * var(--u)); width: calc(420 * var(--u)); height: calc(94 * var(--u));
  z-index: 29; border-radius: calc(47 * var(--u)); pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 252, 246, 0.94), rgba(255, 246, 232, 0.88));
  border: max(1px, calc(2.2 * var(--u))) solid rgba(190, 145, 80, 0.75);
  box-shadow: 0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(110, 60, 30, 0.22);
}
.bl-float {
  position: absolute; left: calc(340 * var(--u)); top: calc(1600 * var(--u)); width: calc(440 * var(--u)); height: calc(296 * var(--u));
  z-index: 30; margin: 0; padding: 0; border: 0; border-radius: calc(36 * var(--u)); background: none; color: inherit; font: inherit;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none; user-select: none; -webkit-user-select: none;
}
.bl-float:focus-visible { outline: 3px solid #8a2f4b; outline-offset: 2px; }
.bl-float__ring { position: absolute; left: calc(80 * var(--u)); top: calc(98 * var(--u)); width: calc(280 * var(--u)); height: calc(100 * var(--u)); overflow: visible; }
.bl-float__ring ellipse { fill: none; }
.bl-float__track { fill: rgba(255, 238, 200, 0.14) !important; stroke: rgba(255, 246, 222, 0.8); stroke-width: 2.4; stroke-dasharray: 3 9; stroke-linecap: round; }
.bl-float__fill { stroke: #ffd889; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: 100; opacity: 0.95; }
.bl-float__diya { position: absolute; left: calc(145 * var(--u)); top: calc(58 * var(--u)); width: calc(150 * var(--u)); height: calc(108 * var(--u)); }
.bl-float__diya img { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; user-select: none; -webkit-user-drag: none; }
/* unlit: the sprite's own flame is masked away (small node) until the hold lights it */
.bl-float__unlit {
  -webkit-mask-image: radial-gradient(ellipse 9% 21% at 69.3% 13%, transparent 70%, #000 100%);
  mask-image: radial-gradient(ellipse 9% 21% at 69.3% 13%, transparent 70%, #000 100%);
}
.bl-float__lit { opacity: 0; }
.bl-float__label {
  position: absolute; left: calc(10 * var(--u)); top: calc(206 * var(--u)); width: calc(420 * var(--u));
  text-align: center; white-space: nowrap; line-height: 1.1;
  font-family: "Quattrocento", serif; font-size: calc(33 * var(--u)); color: #7a2a3e;
  -webkit-text-stroke: 0.02em currentColor; paint-order: stroke fill; letter-spacing: 0.02em;
}
.bl-float__count {
  position: absolute; left: calc(350 * var(--u)); top: calc(1846 * var(--u)); width: calc(420 * var(--u));
  margin: 0; z-index: 31; text-align: center; white-space: nowrap; pointer-events: none;
  font-family: "Quattrocento", serif; font-size: calc(29 * var(--u)); line-height: 1.1; color: #364f06;
}
.bl-flame-bloom {
  position: absolute; left: calc(160 * var(--u)); top: calc(-40 * var(--u)); width: calc(160 * var(--u)); height: calc(160 * var(--u));
  border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle closest-side, rgba(255, 252, 235, 1) 0%, rgba(255, 220, 140, 0.75) 35%, rgba(255, 190, 110, 0) 100%);
}
.bl-ripple {
  position: absolute; pointer-events: none; border-radius: 50%; opacity: 0;
  border: calc(3 * var(--u)) solid rgba(255, 244, 220, 0.85);
}

/* ------------------------------------------------------------------ river, sky, lamps (motion only) */
.bl-river, .bl-sky, .bl-lamps, .bl-flies { position: absolute; inset: 0; pointer-events: none; }
.bl-sky { z-index: 1; }
.bl-river { z-index: 3; }
.bl-lamps { z-index: 4; }
.bl-flies { z-index: 5; }
.bl-veil {
  position: absolute; left: 0; top: 0; width: 100%; height: calc(1300 * var(--u)); opacity: 0;
  background: linear-gradient(180deg, rgba(255, 236, 214, 0.9) 0%, rgba(255, 226, 196, 0.75) 60%, rgba(255, 220, 190, 0) 100%);
}
.bl-star { position: absolute; width: calc(var(--s) * var(--u)); height: calc(var(--s) * var(--u)); opacity: 0; }
.bl-star::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle closest-side, #fffef8 0%, rgba(255, 252, 240, 0.85) 22%, rgba(255, 250, 235, 0) 100%);
  border-radius: 50%;
}
.bl-star.is-spark::after {
  content: ""; position: absolute; inset: -60%;
  background: #fffdf4;
  clip-path: polygon(50% 0, 54% 46%, 100% 50%, 54% 54%, 50% 100%, 46% 54%, 0 50%, 46% 46%);
  opacity: 0.85;
}
.bl-taj-glow {
  /* a warm halo in the SKY behind the dome: it fades out above the finial (y ~1183), so
     the monument itself is never washed -- the art stays as crisp as the source */
  position: absolute; left: calc(452 * var(--u)); top: calc(1010 * var(--u)); width: calc(360 * var(--u)); height: calc(180 * var(--u));
  z-index: 2; pointer-events: none; opacity: 0;
  background: radial-gradient(ellipse 50% 70% at 50% 100%, rgba(255, 236, 196, 0.9) 0%, rgba(255, 222, 176, 0.45) 45%, rgba(255, 214, 170, 0) 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 92%);
  mask-image: linear-gradient(180deg, #000 0%, #000 50%, transparent 92%);
}
.bl-streak {
  position: absolute; height: calc(var(--h, 6) * var(--u)); border-radius: 50%; opacity: 0;
  background: radial-gradient(ellipse closest-side, rgba(255, 250, 232, 0.95) 0%, rgba(255, 236, 200, 0.6) 45%, rgba(255, 230, 200, 0) 100%);
}
.bl-glimmer { position: absolute; width: calc(16 * var(--u)); height: calc(16 * var(--u)); margin: calc(-8 * var(--u)) 0 0 calc(-8 * var(--u)); opacity: 0; }
.bl-glimmer::before {
  content: ""; position: absolute; inset: 0; background: #fffbea;
  clip-path: polygon(50% 0, 56% 44%, 100% 50%, 56% 56%, 50% 100%, 44% 56%, 0 50%, 44% 44%);
}
.bl-lightpath {
  position: absolute; left: calc(470 * var(--u)); top: calc(1392 * var(--u)); width: calc(240 * var(--u)); height: calc(330 * var(--u));
  opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 238, 196, 0) 0%, rgba(255, 238, 196, 0.55) 30%, rgba(255, 232, 186, 0.75) 100%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
  -webkit-mask-image: repeating-linear-gradient(180deg, #000 0 calc(7 * var(--u)), rgba(0, 0, 0, 0.25) calc(7 * var(--u)) calc(15 * var(--u)));
  mask-image: repeating-linear-gradient(180deg, #000 0 calc(7 * var(--u)), rgba(0, 0, 0, 0.25) calc(7 * var(--u)) calc(15 * var(--u)));
}
.bl-lamp { position: absolute; width: calc(150 * var(--u)); height: calc(150 * var(--u)); margin: calc(-75 * var(--u)) 0 0 calc(-75 * var(--u)); opacity: 0; }
.bl-lamp::before, .bl-lamp::after { content: ""; position: absolute; border-radius: 50%; }
.bl-lamp::before { inset: 0; background: radial-gradient(circle closest-side, rgba(255, 226, 150, 0.7) 0%, rgba(255, 200, 120, 0.3) 45%, rgba(255, 190, 110, 0) 100%); }
.bl-lamp::after {
  left: 38%; top: 30%; width: 24%; height: 34%;
  background: radial-gradient(ellipse closest-side, rgba(255, 255, 245, 0.95) 0%, rgba(255, 236, 170, 0.6) 50%, rgba(255, 220, 140, 0) 100%);
}
.bl-fly { position: absolute; width: calc(22 * var(--u)); height: calc(22 * var(--u)); margin: calc(-11 * var(--u)) 0 0 calc(-11 * var(--u)); }
.bl-fly i {
  position: absolute; inset: 0; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle closest-side, #fffbe0 0%, rgba(240, 236, 150, 0.85) 30%, rgba(230, 220, 120, 0) 100%);
}
.bl-drift { position: absolute; z-index: 18; pointer-events: none; }
.bl-drift img { width: 100%; height: 100%; }
.bl-cv { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 20; pointer-events: none; }

/* a floating diya (built by JS): wrapper = the journey, bob = the rock, refl = its light on the water */
.bl-boat { position: absolute; left: calc(485 * var(--u)); top: calc(1658 * var(--u)); width: calc(150 * var(--u)); height: calc(108 * var(--u)); transform-origin: 50% 85%; }
.bl-boat__bob { position: absolute; inset: 0; }
.bl-boat__bob img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bl-boat__halo {
  position: absolute; left: 44%; top: -42%; width: 50%; height: 70%; border-radius: 50%;
  background: radial-gradient(ellipse closest-side, rgba(255, 246, 210, 0.85) 0%, rgba(255, 214, 140, 0.35) 50%, rgba(255, 200, 120, 0) 100%);
}
.bl-boat__refl {
  position: absolute; left: 49%; top: 78%; width: 42%; height: 95%; border-radius: 50%; transform-origin: 50% 0;
  background: radial-gradient(ellipse closest-side, rgba(255, 230, 160, 0.7) 0%, rgba(255, 210, 140, 0.3) 50%, rgba(255, 200, 130, 0) 100%);
}

/* ------------------------------------------------------------------ armed (motion only) */
html.motion .scene--blessings:not(.is-entered) .bl-arm,
html.motion .scene--blessings:not(.is-entered) .bl-title .tl,
html.motion .scene--blessings:not(.is-entered) .bl-token__glow { opacity: 0; }
html.motion .scene--blessings:not(.is-entered) .bl-veil { opacity: 0.6; }

/* ------------------------------------------------------------------ ambient loops (motion only, after the entrance) */
html.motion .scene--blessings.is-entered .bl-moon { animation: bl-breathe 7.5s cubic-bezier(0.37, 0, 0.63, 1) 3.2s infinite alternate; }
html.motion .scene--blessings.is-entered .bl-star { animation: bl-twinkle var(--d, 4s) ease-in-out var(--dl, 0s) infinite; }
html.motion .scene--blessings.is-entered .bl-taj-glow { animation: bl-taj 6.5s cubic-bezier(0.37, 0, 0.63, 1) 2.4s infinite alternate both; }
html.motion .scene--blessings.is-entered .bl-lamp.is-on { opacity: 1; animation: bl-flicker var(--d, 1.7s) linear var(--dl, 0s) infinite; }
html.motion .scene--blessings.is-entered .bl-fly i { animation: bl-blink var(--d, 3s) ease-in-out var(--dl, 0s) infinite; }
html.motion .scene--blessings.is-entered .bl-glimmer { animation: bl-glim var(--d, 2.6s) ease-in-out var(--dl, 0s) infinite; }
html.motion .scene--blessings.is-entered .bl-token__art.is-idle img { animation: bl-idle 4.6s cubic-bezier(0.37, 0, 0.63, 1) var(--dl, 0s) infinite alternate; }
html.motion .scene--blessings.is-entered .bl-boat__bob { animation: bl-bob var(--d, 3.4s) cubic-bezier(0.37, 0, 0.63, 1) var(--dl, 0s) infinite alternate; }
html.motion .scene--blessings.is-entered .bl-boat__refl { animation: bl-refl 1.9s ease-in-out var(--dl, 0s) infinite alternate; }
html.motion .scene--blessings.is-entered .bl-boat__halo { animation: bl-flame 1.3s linear var(--dl, 0s) infinite; }
html.motion .scene--blessings.is-inviting .bl-float__ring { animation: bl-invite 2.4s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
.scene--blessings.bl-paused, .scene--blessings.bl-paused * { animation-play-state: paused !important; }

@keyframes bl-breathe { from { transform: scale(1); opacity: 0.92; } to { transform: scale(1.035); opacity: 1; } }
@keyframes bl-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.7); }
  45% { opacity: var(--o, 0.9); transform: scale(1); }
  60% { opacity: calc(var(--o, 0.9) * 0.55); transform: scale(0.85); }
}
@keyframes bl-taj { from { opacity: 0.45; } to { opacity: 0.9; } }
@keyframes bl-flicker {
  0% { transform: scale(1); opacity: 0.92; }
  12% { transform: scale(1.06, 1.1); opacity: 1; }
  23% { transform: scale(0.96, 0.98); opacity: 0.84; }
  41% { transform: scale(1.04, 1.07); opacity: 0.97; }
  58% { transform: scale(0.98, 0.95); opacity: 0.86; }
  76% { transform: scale(1.07, 1.04); opacity: 1; }
  100% { transform: scale(1); opacity: 0.92; }
}
@keyframes bl-blink { 0%, 100% { opacity: 0; } 30%, 55% { opacity: 0.95; } 70% { opacity: 0.35; } }
@keyframes bl-glim { 0%, 100% { opacity: 0; transform: scale(0.4); } 50% { opacity: 0.9; transform: scale(1); } }
@keyframes bl-idle { from { transform: translateY(0) rotate(-1.2deg); } to { transform: translateY(calc(-7 * var(--u))) rotate(1.2deg); } }
@keyframes bl-bob { from { transform: translateY(calc(-2 * var(--u))) rotate(-3.5deg); } to { transform: translateY(calc(3 * var(--u))) rotate(3deg); } }
@keyframes bl-refl { from { transform: scaleY(0.82) scaleX(1); opacity: 0.55; } to { transform: scaleY(1.12) scaleX(0.86); opacity: 0.85; } }
@keyframes bl-flame {
  0%, 100% { transform: scale(1); opacity: 0.85; }
  30% { transform: scale(1.12, 1.18); opacity: 1; }
  55% { transform: scale(0.94); opacity: 0.78; }
  80% { transform: scale(1.06, 1.1); opacity: 0.95; }
}
@keyframes bl-invite { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.08); opacity: 0.7; } }