/* Optional smoke, ash, and soft embers. Original dust remains in styles.css. */
.atmosphere-embers .atmosphere-layer {
  position: absolute;
  display: block;
  pointer-events: none;
  background-repeat: no-repeat;
}

.ember-particles {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.is-particle-enhanced .ember-sparks,
.is-particle-enhanced .ember-ash { display: none; }

/* The texture is static; the three staggered plumes move independently. */
.ember-smoke {
  inset: -30% -28% -36%;
  background-image: url("/brand/smoke.svg");
  background-size: 100% 100%;
  transform-origin: 25% 85%;
  animation: ember-smoke-rise 25s linear infinite;
}
.ember-smoke-back {
  --smoke-peak: .76;
  animation-duration: 31s;
  animation-delay: -15s;
}
.ember-smoke-mid {
  --smoke-peak: .62;
  inset: -15% -32% -48%;
  background-position: 12% 100%;
  background-size: 90% 110%;
  animation-duration: 23s;
  animation-delay: -4s;
}
.ember-smoke-front {
  --smoke-peak: .5;
  inset: -38% -15% -28%;
  background-position: 0 60%;
  background-size: 115% 95%;
  animation-duration: 38s;
  animation-delay: -29s;
}

.ember-bokeh {
  inset: -15% -10%;
  background:
    radial-gradient(circle 18px at 10% 79%, #c29c6d1f 0, #c29c6d12 28%, transparent 75%),
    radial-gradient(circle 7px at 28% 28%, #d7b58a21 0, #d7b58a0d 24%, transparent 80%),
    radial-gradient(circle 25px at 48% 93%, #bfa18417 0, #bfa1840d 30%, transparent 77%),
    radial-gradient(circle 11px at 75% 61%, #d2af7c24 0, #d2af7c0f 28%, transparent 78%),
    radial-gradient(circle 15px at 93% 22%, #c3ab891a 0, #c3ab890a 25%, transparent 78%);
  animation: ember-bokeh-drift 29s ease-in-out -11s infinite alternate;
}

/* Quiet no-canvas fallback: round, dim glints mixed into a denser ash field. */
.ember-sparks {
  inset: 0 -3%;
  background-size: 100% 100%;
  animation: ember-spark-rise 13s linear infinite;
}
.ember-sparks-back {
  background-image:
    radial-gradient(circle 2.6px at 9% 80%, #d8b18580, #ce976a29 25%, transparent 75%),
    radial-gradient(circle 1.5px at 29% 43%, #bba08366, transparent 75%),
    radial-gradient(circle 2.1px at 59% 84%, #ddbd9273, #cb9a6321 22%, transparent 75%),
    radial-gradient(circle 1.4px at 83% 58%, #c8ae8a66, transparent 75%);
  animation-delay: -7.2s;
}
.ember-sparks-front {
  background-image:
    radial-gradient(circle 3.5px at 17% 94%, #d9b8908c, #c7925e24 20%, transparent 80%),
    radial-gradient(circle 1.8px at 43% 63%, #dfbe9773, transparent 78%),
    radial-gradient(circle 2.5px at 71% 85%, #cda27680, #b9865321 22%, transparent 78%),
    radial-gradient(circle 1.3px at 92% 35%, #c2ab8a66, transparent 75%);
  animation-duration: 17s;
  animation-delay: -3.3s;
}

.ember-ash {
  inset: -15% -5%;
  background:
    radial-gradient(ellipse 1.8px .8px at 4% 80%, #cdc7b494, transparent),
    radial-gradient(ellipse .7px 1.3px at 8% 34%, #aaa99d80, transparent),
    radial-gradient(ellipse 1.1px .6px at 13% 63%, #c6c3b57a, transparent),
    radial-gradient(ellipse .8px 1.7px at 18% 92%, #b9b8ac80, transparent),
    radial-gradient(ellipse 1.7px .7px at 23% 41%, #d1ccbd99, transparent),
    radial-gradient(ellipse .6px 1.3px at 27% 71%, #aaa99d80, transparent),
    radial-gradient(ellipse 1.5px .9px at 31% 18%, #c7c4b58c, transparent),
    radial-gradient(ellipse 1.8px .8px at 36% 86%, #d7caba99, transparent),
    radial-gradient(ellipse .8px 1.4px at 40% 49%, #b2b6ae80, transparent),
    radial-gradient(ellipse 1.2px .6px at 44% 67%, #c2bfb28c, transparent),
    radial-gradient(ellipse .7px 1.5px at 49% 30%, #b4b4a880, transparent),
    radial-gradient(ellipse 1.8px .8px at 53% 96%, #d2cbbb99, transparent),
    radial-gradient(ellipse .8px 1.3px at 57% 56%, #b2b6ae80, transparent),
    radial-gradient(ellipse 1.4px .7px at 61% 15%, #d4c9b88c, transparent),
    radial-gradient(ellipse .6px 1.2px at 65% 77%, #b5b6a980, transparent),
    radial-gradient(ellipse 1.6px .9px at 69% 38%, #c9c5b98c, transparent),
    radial-gradient(ellipse .8px 1.6px at 73% 88%, #b9b8ac80, transparent),
    radial-gradient(ellipse 1.2px .6px at 77% 59%, #cbc5b58c, transparent),
    radial-gradient(ellipse 1.6px .8px at 82% 22%, #d1c7b699, transparent),
    radial-gradient(ellipse .7px 1.3px at 86% 74%, #b2b5aa80, transparent),
    radial-gradient(ellipse 1.3px .7px at 90% 47%, #cbc5b68c, transparent),
    radial-gradient(ellipse .8px 1.5px at 94% 91%, #b9b6a880, transparent),
    radial-gradient(ellipse 1.6px .8px at 97% 30%, #d1c4b299, transparent);
  animation: ember-ash-drift 21s linear -10s infinite;
}

/* Gradient geometry and smoke filters stay fixed; only layers move and fade. */
@keyframes ember-smoke-rise {
  0% { opacity: 0; transform: translate3d(-10%, 24%, 0) scale(.94) rotate(-3deg); }
  18% { opacity: var(--smoke-peak); }
  42% { opacity: calc(var(--smoke-peak) * .8); transform: translate3d(1%, 6%, 0) scale(1.02) rotate(-1deg); }
  65% { opacity: var(--smoke-peak); }
  83% { opacity: calc(var(--smoke-peak) * .6); }
  100% { opacity: 0; transform: translate3d(16%, -27%, 0) scale(1.12) rotate(3deg); }
}
@keyframes ember-bokeh-drift {
  from { opacity: .45; transform: translate3d(-13px, 12px, 0) scale(.98); }
  to { opacity: .72; transform: translate3d(26px, -20px, 0) scale(1.06); }
}
@keyframes ember-spark-rise {
  0% { opacity: 0; transform: translate3d(-13px, 30%, 0) rotate(-3deg); }
  20% { opacity: .5; }
  70% { opacity: .35; }
  100% { opacity: 0; transform: translate3d(30px, -72%, 0) rotate(4deg); }
}
@keyframes ember-ash-drift {
  0% { opacity: 0; transform: translate3d(-23px, 26%, 0) rotate(-5deg); }
  18% { opacity: .8; }
  70% { opacity: .62; }
  100% { opacity: 0; transform: translate3d(44px, -59%, 0) rotate(8deg); }
}

.atmosphere-embers.is-paused .atmosphere-layer { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .atmosphere-embers { display: none; }
}