/* C is the common fire and motion baseline; only ember silhouettes differ. */
[data-fire=c] .campfire{--fire-w:30px;--fire-h:50px}
[data-fire=c] .flame{animation-duration:2.6s}
[data-fire=c] .flame-mid{animation-duration:1.7s}
[data-fire=c] .flame-core{animation-duration:1.2s}
[data-fire=c] .flame-outer path{fill:rgb(240 128 46 / .75)}
[data-fire=c] .flame-mid path{fill:rgb(255 186 76 / .9)}
[data-fire=c] .logs{width:52px}
[data-fire=c] .logs i{width:44px;height:6.4px}
[data-fire=c] .fire-halo{width:270px;height:200px;opacity:1;animation-duration:4.6s}
[data-fire=c] .smoke{display:none}
/* A longer, gentler launch near the logs, then a gradual upward draft. */
@keyframes ember-fan-rise{
 0%{opacity:0;transform:translateY(0)}
 8%{opacity:.95}
 25%{opacity:.9;transform:translateY(calc(var(--ground-rise)*var(--travel)*-.12))}
 55%{opacity:.8;transform:translateY(calc(var(--ground-rise)*var(--travel)*-.48))}
 80%{opacity:.65;transform:translateY(calc(var(--ground-rise)*var(--travel)*-.8))}
 94%{opacity:.3}
 100%{opacity:0;transform:translateY(calc(var(--ground-rise)*var(--travel)*-1))}
}
@keyframes ember-fan-air{
 0%{transform:translateX(0)}
 25%{transform:translateX(calc(var(--drift-x)*var(--travel)*.12 + var(--curl)*.06))}
 55%{transform:translateX(calc(var(--drift-x)*var(--travel)*.48 - var(--curl)*.2))}
 80%{transform:translateX(calc(var(--drift-x)*var(--travel)*.8 + var(--curl)*.12))}
 100%{transform:translateX(calc(var(--drift-x)*var(--travel)))}
}
[data-fire=c] .unused-a{width:calc(var(--grain)*1.2);height:calc(var(--grain)*1.2);border-radius:50%}
[data-fire=c] .unused-b{width:calc(var(--grain)*1.1);height:calc(var(--grain)*2.8);border-radius:75% 25% 65% 35%}
[data-fire=c] .unused-c{width:calc(var(--grain)*1.8);height:calc(var(--grain)*2.3);border-radius:0;clip-path:polygon(40% 0,100% 28%,72% 78%,18% 100%,0 42%)}

/* Flames emerge from a low bed of charcoal with dark crust and red fissures. */
[data-fire=c] .logs{display:none}
[data-fire=c] .embers{width:48px;height:9px;background:radial-gradient(ellipse,#f65323 0%,#ae2516 46%,transparent 75%);filter:blur(2px)}
.charcoal-bed{position:absolute;left:0;bottom:-5px;width:0;height:0;z-index:5}
.charcoal-bed i{position:absolute;left:var(--coal-x);bottom:var(--coal-y);width:12px;height:8px;rotate:var(--coal-turn);border-radius:35% 48% 32% 44%;background:linear-gradient(24deg,transparent 42%,#dc3f1d 46%,#ff6e2e 49%,#9c2315 52%,transparent 57%),linear-gradient(115deg,#181616 15%,#392019 45%,#651d15 62%,#211817 80%);box-shadow:inset 0 -1px 2px #ec421c99,0 1px 2px #100b0a;animation:charcoal-heat 4.8s ease-in-out infinite;animation-delay:var(--coal-delay)}
@keyframes charcoal-heat{0%,100%{filter:brightness(.8)}50%{filter:brightness(1.2)}}
[data-fire=c] .fire-halo{background:radial-gradient(ellipse at 50% 88%,#db592438,#a82e181c 42%,transparent 72%)}
.study-ember b{background:#bf572c;box-shadow:0 0 2px #b7452344}
@keyframes ember-cool{
 0%,12%{background:#da7138;box-shadow:0 0 2px #d6552866;transform:rotate(0) scale(1)}
 40%{background:#b64d29;box-shadow:0 0 1.5px #b13a2244}
 75%{background:#813923;box-shadow:0 0 1px #8d281c22}
 100%{background:#492923;box-shadow:none;transform:rotate(var(--tumble)) scale(.45)}
}
@media(prefers-reduced-motion:reduce){.charcoal-bed i{animation:none}}

/* Emit across the upper tenth of the flame rather than from the coal bed. */
[data-fire=c] .sparks{bottom:calc(var(--fire-h)*.9)}
.study-ember{left:var(--x);bottom:calc(var(--fire-h)*var(--launch,0))}
/* Selected shape: thin irregular charcoal flakes. Motion is integrated in JS. */
.study-ember b{width:calc(var(--grain)*.9);height:calc(var(--grain)*3.1);border-radius:0;clip-path:polygon(42% 0,90% 18%,70% 58%,52% 100%,10% 76%,22% 35%);animation:none;box-shadow:0 0 2px #b7452344}
.study-ember,.study-ember i,.ember-orbit{animation:none;transform:none}

[data-fire=c] .study-ember{position:absolute;opacity:0;animation:none!important;bottom:calc(var(--fire-h)*var(--launch,0));left:var(--x)}
[data-fire=c] .study-ember i,[data-fire=c] .ember-orbit{display:block;animation:none!important}
[data-fire=c] .study-ember b{display:block;width:calc(var(--grain)*.9);height:calc(var(--grain)*3.1);border-radius:0;clip-path:polygon(42% 0,90% 18%,70% 58%,52% 100%,10% 76%,22% 35%);animation:none!important;background:#bf572c;box-shadow:0 0 2px #b7452344}
[data-fire=c] .sparks{animation:none!important;bottom:calc(var(--fire-h)*.9)}
body>.site-ground{z-index:0}
body>.public-page,body>.workspace,body>main,body>.site-footer{position:relative;z-index:1}
@media(prefers-reduced-motion:reduce){[data-fire=c] .study-ember{display:none}}

/* The footer is the launch point; embers may overflow into the page sky. */
body > footer.site-ground,
body > footer.site-ground .grass-hill,
body > footer.site-ground .campfire,
body > footer.site-ground .sparks { overflow:visible; }