.hero-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:44px;align-items:center}
.hero-layout .hero-in{max-width:none}
.hero-flame{display:flex;align-items:center;justify-content:center;min-width:0}
.hero-flame .pd-flame{--flame-u:1.45px;--pd-cyan-deep:#20708A;--pd-signal:#30B0D0;--pd-spark:#22D3EE;--pd-plasma-core:#EAFBFF}
@media(max-width:1000px){.hero-layout{display:block}.hero-flame{display:none}}

.pd-flame{
  position:relative;
  width:calc(150*var(--flame-u));
  height:calc(230*var(--flame-u));
  pointer-events:none;
}

/* ── variant gating ─────────────────────────────
   layered (default): layers + base, no motes, no body pseudo
   particles: body pseudo + motes, no layers
   full: layers + base + motes, no body pseudo          */
.pd-flame[data-variant="particles"] .fl,
.pd-flame[data-variant="particles"] .fl-base{display:none}
.pd-flame:not([data-variant="particles"]):not([data-variant="full"]) .pp{display:none}
.pd-flame:not([data-variant="particles"])::before,
.pd-flame:not([data-variant="particles"])::after{content:none}

/* ── 01 · layered flame ── */
.pd-flame .fl-stack{
  position:absolute;left:50%;bottom:calc(20*var(--flame-u));
  width:calc(120*var(--flame-u));height:calc(190*var(--flame-u));
  transform:translateX(-50%);
  transform-origin:50% 100%;
  animation:pf-sway 2.6s ease-in-out infinite alternate;
  filter:blur(calc(.6*var(--flame-u)));
}
.pd-flame .fl{
  position:absolute;left:50%;
  border-radius:50% 0 50% 50%;
  transform-origin:50% 50%;
}
/* outer — coolest visible plasma */
.pd-flame .fl-outer{
  width:calc(84*var(--flame-u));height:calc(84*var(--flame-u));
  bottom:calc(12*var(--flame-u));
  background:var(--pd-cyan-deep);
  box-shadow:0 0 calc(22*var(--flame-u)) calc(8*var(--flame-u)) rgba(32,112,138,.55);
  animation:pf-lick-a 2.1s ease-in-out infinite alternate;
}
/* mid — signal cyan body */
.pd-flame .fl-mid{
  width:calc(62*var(--flame-u));height:calc(62*var(--flame-u));
  bottom:calc(14*var(--flame-u));
  background:var(--pd-signal);
  box-shadow:0 0 calc(18*var(--flame-u)) calc(6*var(--flame-u)) rgba(48,176,208,.5);
  animation:pf-lick-b 1.7s ease-in-out infinite alternate;
}
/* inner — electric spark sheath */
.pd-flame .fl-inner{
  width:calc(44*var(--flame-u));height:calc(44*var(--flame-u));
  bottom:calc(16*var(--flame-u));
  background:var(--pd-spark);
  box-shadow:0 0 calc(14*var(--flame-u)) calc(5*var(--flame-u)) rgba(34,211,238,.55);
  animation:pf-lick-c 1.45s ease-in-out infinite alternate;
}
/* core — white-hot */
.pd-flame .fl-core{
  width:calc(30*var(--flame-u));height:calc(30*var(--flame-u));
  bottom:calc(18*var(--flame-u));
  background:var(--pd-plasma-core);
  box-shadow:0 0 calc(12*var(--flame-u)) calc(4*var(--flame-u)) rgba(234,251,255,.6);
  animation:pf-lick-d 1.2s ease-in-out infinite alternate;
}
/* base glow pool */
.pd-flame .fl-base{
  position:absolute;left:50%;bottom:calc(10*var(--flame-u));
  width:calc(96*var(--flame-u));height:calc(26*var(--flame-u));
  transform:translateX(-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(34,211,238,.35) 0%,rgba(48,176,208,.18) 45%,transparent 72%);
  animation:pf-pool 2.3s ease-in-out infinite alternate;
}
/* layer flicker — full transform in every keyframe (centered
   teardrop); alternate direction = seamless, no snap          */
@keyframes pf-lick-a{
  from{transform:translateX(-50%) rotate(-45deg) scale(1.00,1.00)}
  33% {transform:translateX(-51%) rotate(-46.2deg) scale(.985,1.05)}
  66% {transform:translateX(-49%) rotate(-44.2deg) scale(1.01,.955)}
  to  {transform:translateX(-50%) rotate(-45.6deg) scale(.995,1.03)}
}
@keyframes pf-lick-b{
  from{transform:translateX(-50%) rotate(-45.4deg) scale(1.00,1.02)}
  40% {transform:translateX(-48.6%) rotate(-43.9deg) scale(.98,.95)}
  to  {transform:translateX(-51.2%) rotate(-46.1deg) scale(1.015,1.06)}
}
@keyframes pf-lick-c{
  from{transform:translateX(-49.4%) rotate(-44.5deg) scale(1.01,.97)}
  50% {transform:translateX(-50.8%) rotate(-45.9deg) scale(.985,1.06)}
  to  {transform:translateX(-49.8%) rotate(-44.9deg) scale(1.005,1.0)}
}
@keyframes pf-lick-d{
  from{transform:translateX(-50%) rotate(-45deg) scale(1,1)}
  to  {transform:translateX(-50.6%) rotate(-45.8deg) scale(.97,1.08)}
}
@keyframes pf-sway{
  from{transform:translateX(-50%) rotate(-1deg) scaleY(1)}
  45% {transform:translateX(-50%) rotate(1.4deg) scaleY(1.03)}
  to  {transform:translateX(-50%) rotate(-.6deg) scaleY(.97)}
}
@keyframes pf-pool{
  from{opacity:.8;transform:translateX(-50%) scaleX(1)}
  to  {opacity:1;transform:translateX(-50%) scaleX(1.12)}
}

/* ── 02 · soft body (particles variant + legacy .plasma-fire) ── */
:is(.pd-flame[data-variant="particles"], .plasma-fire)::before{
  content:"";position:absolute;left:50%;bottom:calc(18*var(--flame-u));
  width:calc(78*var(--flame-u));height:calc(78*var(--flame-u));
  border-radius:50% 0 50% 50%;
  background:radial-gradient(circle at 62% 62%,
    var(--pd-spark) 0%,var(--pd-signal) 42%,var(--pd-cyan-deep) 78%,transparent 100%);
  box-shadow:0 0 calc(30*var(--flame-u)) calc(10*var(--flame-u)) rgba(48,176,208,.35);
  filter:blur(calc(1.5*var(--flame-u)));
  animation:pfire-body 2.2s ease-in-out infinite alternate;
}
:is(.pd-flame[data-variant="particles"], .plasma-fire)::after{
  content:"";position:absolute;left:50%;bottom:calc(26*var(--flame-u));
  width:calc(30*var(--flame-u));height:calc(30*var(--flame-u));
  border-radius:50% 0 50% 50%;
  background:var(--pd-plasma-core);
  box-shadow:0 0 calc(16*var(--flame-u)) calc(6*var(--flame-u)) rgba(234,251,255,.55);
  filter:blur(calc(1*var(--flame-u)));
  animation:pfire-core 1.4s ease-in-out infinite alternate;
}
.plasma-fire{position:relative;width:calc(150*var(--flame-u));
  height:calc(230*var(--flame-u));pointer-events:none}
@keyframes pfire-body{
  from{transform:translateX(-50%) rotate(-45deg) scale(1,1)}
  45% {transform:translateX(-51.4%) rotate(-46.4deg) scale(.975,1.06)}
  to  {transform:translateX(-48.9%) rotate(-44.1deg) scale(1.02,.95)}
}
@keyframes pfire-core{
  from{transform:translateX(-50%) rotate(-45deg) scale(1,1)}
  to  {transform:translateX(-50.8%) rotate(-46deg) scale(.96,1.1)}
}

/* ── rising plasma motes (02 + 03 + legacy .plasma-particle) ── */
:is(.pd-flame .pp, .plasma-particle){
  position:absolute;bottom:calc(70*var(--flame-u));left:50%;
  width:calc(4*var(--flame-u));height:calc(4*var(--flame-u));
  border-radius:50%;
  background:var(--pd-signal);
  box-shadow:0 0 calc(8*var(--flame-u)) calc(2*var(--flame-u)) rgba(48,176,208,.45);
  opacity:0;
  animation:pp-rise var(--d,4s) linear var(--dl,0s) infinite;
}
@keyframes pp-rise{
  0%  {transform:translate(calc(var(--x0,0)*var(--flame-u)),0) scale(1);opacity:0}
  12% {opacity:var(--o,.8)}
  100%{transform:translate(calc(var(--x1,0)*var(--flame-u)),calc(-150*var(--flame-u))) scale(.25);opacity:0}
}
/* per-particle trajectories (deterministic, hand-seeded) */
:is(.pp-1) {--x0:-6; --x1:-26;--d:3.8s;--dl:.0s; --o:.85}
:is(.pp-2) {--x0:4;  --x1:18; --d:4.6s;--dl:.6s; --o:.7}
:is(.pp-3) {--x0:-14;--x1:-8; --d:5.2s;--dl:1.2s;--o:.6;width:calc(3*var(--flame-u));height:calc(3*var(--flame-u))}
:is(.pp-4) {--x0:10; --x1:34; --d:3.4s;--dl:1.8s;--o:.8}
:is(.pp-5) {--x0:0;  --x1:-14;--d:4.2s;--dl:2.4s;--o:.9;background:var(--pd-spark)}
:is(.pp-6) {--x0:-9; --x1:-30;--d:5.6s;--dl:.9s; --o:.5;width:calc(2.5*var(--flame-u));height:calc(2.5*var(--flame-u))}
:is(.pp-7) {--x0:15; --x1:8;  --d:3.9s;--dl:3.1s;--o:.75}
:is(.pp-8) {--x0:-3; --x1:22; --d:4.9s;--dl:1.5s;--o:.65}
:is(.pp-9) {--x0:7;  --x1:-18;--d:3.6s;--dl:2.9s;--o:.85;background:var(--pd-spark)}
:is(.pp-10){--x0:-12;--x1:2;  --d:5.4s;--dl:.3s; --o:.55;width:calc(3*var(--flame-u));height:calc(3*var(--flame-u))}
:is(.pp-11){--x0:2;  --x1:30; --d:4.4s;--dl:3.6s;--o:.7}
:is(.pp-12){--x0:-16;--x1:-34;--d:5.8s;--dl:2.1s;--o:.45;width:calc(2.5*var(--flame-u));height:calc(2.5*var(--flame-u))}
:is(.pp-13){--x0:12; --x1:-4; --d:3.5s;--dl:4.2s;--o:.8}
:is(.pp-14){--x0:-5; --x1:14; --d:4.7s;--dl:.75s;--o:.6}
:is(.pp-15){--x0:5;  --x1:-24;--d:4.1s;--dl:3.4s;--o:.9;background:var(--pd-plasma-core);
       box-shadow:0 0 calc(8*var(--flame-u)) calc(2*var(--flame-u)) rgba(234,251,255,.5)}

/* ── reduced motion: freeze mid-breath; composition still reads ── */
@media (prefers-reduced-motion:reduce){
  .pd-flame .fl-stack,.pd-flame .fl,.pd-flame .fl-base,
  .pd-flame::before,.pd-flame::after,
  .plasma-fire::before,.plasma-fire::after{animation:none}
  :is(.pd-flame .pp,.plasma-particle){animation:none;opacity:calc(var(--o,.7)*.5);
    transform:translate(calc(var(--x0,0)*var(--flame-u)),calc(-40*var(--flame-u)))}
}