.site-header {
  overflow: hidden;
  isolation: isolate;
}

.site-header > * {
  position: relative;
  z-index: 2;
}

.site-header::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: -80% -12% -25%;
  pointer-events: none;
  opacity: .48;
  background:
    radial-gradient(ellipse at 14% 100%,rgba(255,174,44,.52),rgba(230,57,0,.24) 16%,transparent 38%),
    radial-gradient(ellipse at 53% 112%,rgba(255,106,15,.42),transparent 34%),
    radial-gradient(ellipse at 86% 100%,rgba(255,156,34,.5),rgba(210,43,0,.2) 15%,transparent 37%);
  filter: blur(8px) saturate(1.3);
  mix-blend-mode: screen;
  animation: header-fire-glow 4.8s ease-in-out infinite alternate;
}

.hero {
  animation: hero-fire-drift 13s ease-in-out infinite alternate;
}

.hero::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 0;
  inset: -12%;
  pointer-events: none;
  opacity: .64;
  background:
    radial-gradient(ellipse at 8% 92%,rgba(255,190,54,.54),rgba(255,68,3,.28) 10%,transparent 28%),
    radial-gradient(ellipse at 37% 104%,rgba(255,119,18,.4),transparent 27%),
    radial-gradient(ellipse at 69% 98%,rgba(255,182,44,.5),rgba(226,52,0,.24) 11%,transparent 29%),
    radial-gradient(ellipse at 96% 88%,rgba(255,100,11,.38),transparent 25%);
  background-repeat: no-repeat;
  filter: blur(10px) saturate(1.35);
  mix-blend-mode: screen;
  mask-image: linear-gradient(to top,#000 0,#000 42%,transparent 82%);
  animation: hero-flame-rise 6.2s ease-in-out infinite alternate;
}

.hero-logo-only {
  position: relative;
  z-index: 2;
}

@keyframes header-fire-glow {
  0% { transform: translate3d(-2%,10%,0) scale(1); opacity: .32; }
  55% { transform: translate3d(2%,-3%,0) scale(1.08,1.22); opacity: .62; }
  100% { transform: translate3d(-1%,-9%,0) scale(1.14,1.35); opacity: .46; }
}

@keyframes hero-fire-drift {
  0% { background-position: 48% 100%; background-size: cover; }
  50% { background-position: 51% 96%; background-size: 106% auto; }
  100% { background-position: 53% 100%; background-size: 112% auto; }
}

@keyframes hero-flame-rise {
  0% { transform: translate3d(-2%,8%,0) scale(1); opacity: .42; }
  45% { transform: translate3d(2%,-2%,0) scale(1.08,1.18); opacity: .72; }
  100% { transform: translate3d(-1%,-11%,0) scale(1.16,1.34); opacity: .56; }
}

@media (prefers-reduced-motion: reduce) {
  .site-header::before, .hero, .hero::after { animation: none; }
}