/* Fire over the fire pit photo (photos/full/87.jpg), shared by every design.
   Markup: <div class="campfire-fire"> … </div> placed over the photo inside a positioned container.
   The stage crops exactly like the photo (object-fit: cover, centred, 3:2), so the flames stay on the pit
   at any width. Motion off: flames and glow hold still, sparks hide. */
.campfire-fire { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; container-type: size; }
/* In the campfire band the photo is shifted right (see .campfire-bg); the fire layer shifts with it */
.campfire .campfire-fire { left: var(--pit-shift, 0%); right: calc(-1 * var(--pit-shift, 0%)); }
.fire-stage { position: absolute; left: 50%; top: 50%; width: max(100cqw, 150cqh); aspect-ratio: 3 / 2; transform: translate(-50%, -50%); container-type: inline-size; }
.fire { position: absolute; left: 47.1%; top: 45.6%; width: 0; height: 0; }
.fire > * { position: absolute; display: block; }
.fire-light { left: -22cqw; top: -9cqw; width: 44cqw; height: 18cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 150, 60, 0.32), rgba(255, 120, 40, 0.1) 55%, transparent); mix-blend-mode: screen; }
.fire-glow { left: -4.5cqw; top: -5cqw; width: 9cqw; height: 7.5cqw; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 214, 120, 0.75), rgba(255, 140, 50, 0.35) 50%, transparent); mix-blend-mode: screen; filter: blur(2px); }
.flame { bottom: 0; width: 2.3cqw; height: 3.6cqw; margin-left: -1.15cqw; border-radius: 50% 50% 45% 45% / 64% 64% 36% 36%; transform-origin: 50% 100%;
  background: radial-gradient(ellipse at 50% 80%, rgba(255, 246, 200, 0.95) 0%, rgba(255, 210, 74, 0.85) 22%, rgba(255, 138, 31, 0.6) 50%, rgba(230, 70, 20, 0) 76%);
  mix-blend-mode: screen; filter: blur(1.4px); opacity: 0.45; }
.flame.f1 { left: 0; bottom: -10px; height: 4cqw; width: 2.6cqw; margin-left: -1.3cqw; }
.flame.f2 { left: -1cqw; height: 3.1cqw; }
.flame.f3 { left: 1cqw; height: 3.3cqw; }
.flame.f4 { left: -1.9cqw; height: 2.3cqw; width: 2cqw; }
.flame.f5 { left: 1.9cqw; height: 2.5cqw; width: 2cqw; }
.flame.f6 { left: -0.5cqw; bottom: -5px; height: 2.7cqw; width: 1.8cqw; }
.flame.f7 { left: 0.6cqw; bottom: -5px; height: 4.4cqw; width: 1.6cqw; }
.spark { left: 0; bottom: 1.5cqw; width: 3px; height: 3px; border-radius: 50%; background: #ffd27a; box-shadow: 0 0 6px 2px rgba(255, 170, 60, 0.8); opacity: 0; }

/* ── Fire pit: flames lick, the glow breathes, sparks lift ── */
@keyframes cf-lick { 0%, 100% { transform: scale(1, 1) skewX(0deg) translateX(0); opacity: 0.45; } 18% { transform: scale(0.9, 1.16) skewX(-5deg) translateX(-6%); opacity: 0.32; } 42% { transform: scale(1.08, 0.88) skewX(4deg) translateX(5%); opacity: 0.48; } 66% { transform: scale(0.94, 1.22) skewX(-3deg) translateX(-3%); opacity: 0.28; } 84% { transform: scale(1.03, 0.96) skewX(2deg) translateX(4%); opacity: 0.4; } }
@keyframes cf-glow { 0%, 100% { opacity: 0.85; transform: scale(1); } 30% { opacity: 1; transform: scale(1.06); } 55% { opacity: 0.7; transform: scale(0.97); } 80% { opacity: 0.95; transform: scale(1.03); } }
@keyframes cf-spark { 0% { opacity: 0; transform: translate(0, 0); } 10% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sx, 10px), -9cqw); } }
html[data-motion="on"] .flame { animation: cf-lick 1.5s ease-in-out infinite; }
html[data-motion="on"] .flame.f2 { animation-duration: 1.2s; animation-delay: -0.5s; }
html[data-motion="on"] .flame.f3 { animation-duration: 1.8s; animation-delay: -1s; }
html[data-motion="on"] .flame.f4 { animation-duration: 1.35s; animation-delay: -0.3s; }
html[data-motion="on"] .flame.f5 { animation-duration: 1.6s; animation-delay: -0.8s; }
html[data-motion="on"] .flame.f6 { animation-duration: 1.05s; animation-delay: -0.25s; }
html[data-motion="on"] .flame.f7 { animation-duration: 2.1s; animation-delay: -1.4s; }
html[data-motion="on"] .fire-glow { animation: cf-glow 2.6s ease-in-out infinite; }
html[data-motion="on"] .fire-light { animation: cf-glow 3.6s ease-in-out -1.2s infinite; }
html[data-motion="on"] .spark { animation: cf-spark 2.4s ease-out infinite; }
html[data-motion="on"] .spark.s1 { --sx: -14px; animation-delay: 0.2s; }
html[data-motion="on"] .spark.s2 { --sx: 18px; animation-delay: 0.9s; animation-duration: 2.8s; }
html[data-motion="on"] .spark.s3 { --sx: 6px; animation-delay: 1.5s; }
html[data-motion="on"] .spark.s4 { --sx: -22px; animation-delay: 2.1s; animation-duration: 3.1s; }
html[data-motion="on"] .spark.s5 { --sx: 26px; animation-delay: 2.7s; }
html[data-motion="on"] .spark.s6 { --sx: -4px; animation-delay: 3.3s; animation-duration: 2.6s; }