/* A forged-black field with concentrated ember currents moving behind the page. */
html { background: #020304; }
body { position: relative; overflow-x: hidden; background: #020304; isolation: isolate; }
/* One viewport-wide atmosphere, shared by every section and the footer. */
.forge-atmosphere {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
html[data-atmosphere="ready"] body::before,
html[data-atmosphere="ready"] body::after {
  display: none;
  animation: none;
}
body::before,
body::after {
  content: '';
  position: fixed;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
}
body::before {
  inset: -18vh -15vw;
  background:
    radial-gradient(ellipse 32% 40% at 14% 84%, rgba(255,205,128,.98) 0, rgba(255,122,22,.92) 8%, rgba(255,76,0,.54) 24%, rgba(255,51,0,.14) 46%, transparent 64%),
    radial-gradient(ellipse 30% 42% at 86% 38%, rgba(255,190,98,.94) 0, rgba(255,113,14,.84) 10%, rgba(255,69,0,.42) 28%, rgba(255,47,0,.1) 48%, transparent 66%),
    radial-gradient(ellipse 28% 32% at 58% 96%, rgba(255,174,72,.82) 0, rgba(255,94,0,.6) 16%, rgba(255,62,0,.2) 40%, transparent 68%);
  background-blend-mode: screen;
  filter: blur(36px) saturate(158%) contrast(112%);
  transform: translate3d(-2%, 8%, 0) scale(1.04);
  opacity: .94;
  /* Start mid-drift so the first seconds never appear static. */
  animation: forge-energy-rise 18s cubic-bezier(.4,0,.6,1) -6s infinite alternate;
}
body::after {
  inset: -16vh -12vw;
  background:
    radial-gradient(ellipse 28% 34% at 72% 72%, rgba(255,132,31,.68), rgba(255,73,0,.3) 24%, rgba(255,54,0,.08) 48%, transparent 68%),
    radial-gradient(ellipse 26% 36% at 22% 16%, rgba(255,166,66,.58), rgba(255,87,0,.22) 28%, rgba(255,56,0,.06) 48%, transparent 68%),
    linear-gradient(145deg, rgba(2,3,4,.04), rgba(2,3,4,.72) 54%, rgba(255,69,0,.12));
  filter: blur(58px) saturate(142%);
  transform: translate3d(3%, 6%, 0) scale(1.08);
  opacity: .86;
  animation: forge-energy-swell 25s cubic-bezier(.4,0,.6,1) -14s infinite alternate;
}
body > .site-header, body > main, body > .site-footer, body > .brand-rail { position: relative; z-index: 1; }
.site-header, .site-footer, .brand-rail { background: rgba(2,3,4,.34); }
.site-header { z-index: 5; }
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 4px 0;
  border: 0;
  color: #b9c0c1;
  background: none;
  font: 400 .875rem/1.4 var(--body);
}
.motion-toggle::before { content: ''; width: 8px; height: 10px; border-inline: 2px solid currentColor; }
.motion-toggle[aria-pressed="true"]::before { border: 0; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.motion-toggle:hover { color: var(--light); }
html[data-motion-paused="true"] { scroll-behavior: auto; }
html[data-motion-paused="true"] body::before,
html[data-motion-paused="true"] body::after,
html[data-motion-paused="true"] #included .feature-demo * { animation-play-state: paused; }
@keyframes forge-energy-rise {
  0% { transform: translate3d(-8%, 17%, 0) scale(1.08); opacity: .74; }
  50% { transform: translate3d(6%, -3%, 0) scale(1.17); opacity: .97; }
  100% { transform: translate3d(-2%, -23%, 0) scale(1.1); opacity: .78; }
}
@keyframes forge-energy-swell {
  0% { transform: translate3d(8%, 14%, 0) scale(1.06); opacity: .6; }
  50% { transform: translate3d(-8%, -9%, 0) scale(1.2); opacity: .9; }
  100% { transform: translate3d(4%, -24%, 0) scale(1.1); opacity: .68; }
}
@media (max-width: 800px) {
  body::before { inset: -18vh -42vw; filter: blur(30px) saturate(156%) contrast(110%); opacity: .96; }
  body::after { inset: -16vh -36vw; filter: blur(46px) saturate(138%); opacity: .86; }
  .site-header, .brand-rail { background: rgba(2,3,4,.48); }
}
@media (prefers-reduced-motion: reduce) {
  body::before, body::after { animation: none; transform: none; }
  .motion-toggle { display: none; }
}