:root {
  --bg: #050302;
  --bone: #eadfcf;
  --bone-soft: rgba(234, 223, 207, .72);
  --ember: #ff4b22;
  --ember-hot: #ffb057;
  --brass: #d99b45;
  --dark: rgba(0, 0, 0, .72);
  --mx: 0px;
  --my: 0px;
  --top-safe: clamp(210px, 27vh, 330px);
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: var(--bg);
  color: var(--bone);
  overflow: hidden;
}

body {
  font-family: Georgia, 'Times New Roman', serif;
}

.stage {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 18%, rgba(217, 155, 69, .09), transparent 34vmax),
    radial-gradient(circle at 58% 72%, rgba(255, 75, 34, .18), transparent 38vmax),
    linear-gradient(130deg, #020101 0%, #070403 46%, #150b07 100%);
}

.scene,
.content {
  position: absolute;
  inset: 0;
}

.scene {
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hero-picture {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--top-safe) - clamp(18px, 3.2vh, 44px));
  bottom: 0;
  z-index: 6;
  transform:
    translate3d(calc(var(--mx) * -0.014), calc(var(--my) * -0.010), 0)
    scale(1.018);
  animation: heroBreath 12s ease-in-out infinite;
  transform-origin: 54% 52%;
}

.hero-picture img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 51%;
  filter:
    saturate(1.07)
    contrast(1.05)
    brightness(.86)
    drop-shadow(0 0 54px rgba(255, 75, 34, .10));
  user-select: none;
}

@keyframes heroBreath {
  0%, 100% { scale: 1; }
  47% { scale: 1.010; }
  70% { scale: 1.004; }
}

.hero-shadow {
  position: absolute;
  inset: 0;
  z-index: 7;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,.94) 0%,
      rgba(0,0,0,.82) 15%,
      rgba(0,0,0,.28) 33%,
      rgba(0,0,0,.05) 54%,
      rgba(0,0,0,.28) 82%,
      rgba(0,0,0,.78) 100%),
    linear-gradient(90deg, rgba(0,0,0,.66), rgba(0,0,0,.11) 28%, rgba(0,0,0,.03) 57%, rgba(0,0,0,.42) 100%);
}

.top-smoke {
  position: absolute;
  z-index: 10;
  left: -8%;
  right: -8%;
  top: 0;
  height: calc(var(--top-safe) + 11vh);
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 72%, rgba(255, 75, 34, .10), transparent 58%),
    radial-gradient(ellipse at 50% 14%, rgba(234, 223, 207, .08), transparent 50%);
  filter: blur(12px);
  mix-blend-mode: screen;
  opacity: .74;
}

.ember-core,
.ember-side {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: blur(22px);
}

.ember-core {
  z-index: 3;
  left: 48%;
  top: 66%;
  width: 76vmax;
  height: 76vmax;
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(255, 75, 34, .34), rgba(217, 155, 69, .12) 27%, transparent 61%);
  opacity: .65;
  animation: emberPulse 8.5s ease-in-out infinite;
}

.ember-left {
  z-index: 8;
  left: -10vmax;
  bottom: -18vmax;
  width: 55vmax;
  height: 55vmax;
  background: radial-gradient(circle, rgba(255, 86, 28, .28), rgba(255, 176, 87, .09) 31%, transparent 66%);
  animation: emberPulse 10.5s ease-in-out infinite reverse;
}

.ember-right {
  z-index: 8;
  right: -18vmax;
  top: 18vmax;
  width: 48vmax;
  height: 48vmax;
  background: radial-gradient(circle, rgba(255, 75, 34, .20), rgba(217, 155, 69, .07) 30%, transparent 67%);
  animation: emberPulse 13s ease-in-out infinite;
}

@keyframes emberPulse {
  0%, 100% { opacity: .34; transform: scale(.96); }
  42% { opacity: .76; transform: scale(1.08); }
  66% { opacity: .49; transform: scale(1.015); }
}

.heat-shimmer {
  position: absolute;
  z-index: 18;
  left: -6%;
  right: -6%;
  bottom: -13%;
  height: 47%;
  opacity: .24;
  filter: blur(15px) contrast(1.44);
  mix-blend-mode: screen;
  background:
    repeating-linear-gradient(91deg, transparent 0 23px, rgba(255, 89, 25, .08) 24px 27px, transparent 28px 52px),
    radial-gradient(ellipse at 47% 100%, rgba(255, 75, 34, .34), transparent 58%);
  animation: heat 6.2s ease-in-out infinite alternate;
}

@keyframes heat {
  0% { transform: translate3d(-1.5%, 1.2%, 0) skewX(-2deg) scaleY(.96); opacity: .14; }
  45% { transform: translate3d(.8%, -1.4%, 0) skewX(1.4deg) scaleY(1.04); opacity: .31; }
  100% { transform: translate3d(-.5%, .2%, 0) skewX(-.7deg) scaleY(1); opacity: .22; }
}

.dust-layer {
  position: absolute;
  inset: -18%;
  pointer-events: none;
  background-repeat: repeat;
  mix-blend-mode: screen;
  mask-image: radial-gradient(circle at 50% 50%, black 0 64%, transparent 91%);
}

.dust-back {
  z-index: 4;
  opacity: .30;
  background-image:
    radial-gradient(circle, rgba(234,223,207,.085) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(217,155,69,.06) 0 1px, transparent 1.7px);
  background-size: 118px 118px, 197px 197px;
  animation: dustBack 92s linear infinite;
  transform: translate3d(calc(var(--mx) * .010), calc(var(--my) * .006), 0);
}

.dust-front {
  z-index: 25;
  opacity: .18;
  background-image:
    radial-gradient(circle, rgba(234,223,207,.13) 0 .85px, transparent 1.25px),
    radial-gradient(circle, rgba(255,75,34,.08) 0 .95px, transparent 1.35px);
  background-size: 58px 58px, 141px 141px;
  animation: dustFront 58s linear infinite;
  transform: translate3d(calc(var(--mx) * -.014), calc(var(--my) * -.008), 0);
}

@keyframes dustBack {
  from { background-position: 0 0, 0 0; }
  to { background-position: -118px -59px, 197px -98px; }
}

@keyframes dustFront {
  from { background-position: 0 0, 0 0; }
  to { background-position: 87px -116px, -141px -70px; }
}

.ash-field,
.spark-field {
  position: absolute;
  inset: 0;
  z-index: 30;
  overflow: hidden;
  pointer-events: none;
}

.spark-field { z-index: 31; }

.ash {
  position: absolute;
  left: var(--x);
  bottom: -7vh;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: rgba(234, 223, 207, var(--o));
  filter: blur(var(--b));
  box-shadow: 0 0 13px rgba(234, 223, 207, calc(var(--o) * .48));
  animation: ashRise var(--d) linear infinite;
  animation-delay: var(--delay);
}

.ash.hot {
  background: rgba(255, 75, 34, calc(var(--o) * 1.25));
  box-shadow: 0 0 20px rgba(255, 75, 34, .36);
}

@keyframes ashRise {
  0% { transform: translate3d(0, 7vh, 0) scale(.45); opacity: 0; }
  11% { opacity: .68; }
  53% { opacity: .48; }
  100% { transform: translate3d(var(--drift), -114vh, 0) scale(1.05); opacity: 0; }
}

.spark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(255, 219, 153, .95), rgba(255, 75, 34, .85), transparent);
  filter: drop-shadow(0 0 9px rgba(255, 75, 34, .55));
  opacity: 0;
  transform: rotate(var(--r));
  animation: sparkFly var(--d) ease-out infinite;
  animation-delay: var(--delay);
}

@keyframes sparkFly {
  0% { opacity: 0; transform: translate3d(0,0,0) rotate(var(--r)) scaleX(.3); }
  8% { opacity: .92; }
  39% { opacity: .56; }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) rotate(var(--r)) scaleX(1); }
}

.scanlines {
  position: absolute;
  inset: 0;
  z-index: 33;
  pointer-events: none;
  opacity: .10;
  background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 100% 5px;
  mix-blend-mode: overlay;
}

.vignette {
  position: absolute;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  background:
    radial-gradient(circle at 52% 62%, transparent 0 32%, rgba(0,0,0,.18) 60%, rgba(0,0,0,.82) 100%),
    linear-gradient(90deg, rgba(0,0,0,.78), transparent 22%, transparent 76%, rgba(0,0,0,.82));
}

.content {
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  pointer-events: none;
  height: calc(var(--top-safe) + clamp(10px, 2.2vh, 26px));
  padding: clamp(14px, 2.8vh, 34px) clamp(18px, 3vw, 48px) 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.86), rgba(0,0,0,.52) 54%, rgba(0,0,0,0));
}

.kicker,
.topline {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: clamp(.16em, .44vw, .30em);
  line-height: 1.42;
  font-size: clamp(10px, .90vw, 14px);
  text-shadow: 0 3px 24px rgba(0,0,0,.95), 0 0 22px rgba(255,75,34,.16);
}

.kicker {
  order: 1;
  color: var(--brass);
  margin-bottom: clamp(4px, .75vh, 9px);
}

.topline {
  order: 3;
  color: var(--bone-soft);
  margin-top: clamp(2px, .62vh, 8px);
}

.logo-shell {
  order: 2;
  width: min(78vw, 1180px);
  max-height: clamp(120px, 18vh, 210px);
  margin: 0;
  transform: translate3d(calc(var(--mx) * .007), calc(var(--my) * .004), 0);
  filter:
    drop-shadow(0 18px 32px rgba(0,0,0,.84))
    drop-shadow(0 0 18px rgba(255,75,34,.10));
}

.logo-shell picture,
.logo {
  display: block;
  width: 100%;
  height: auto;
}

.logo {
  max-height: clamp(120px, 18vh, 210px);
  object-fit: contain;
  user-select: none;
  animation: logoGlow 9s ease-in-out infinite;
}

@keyframes logoGlow {
  0%, 100% { filter: brightness(.96) saturate(1.02); }
  46% { filter: brightness(1.08) saturate(1.08) drop-shadow(0 0 18px rgba(255,75,34,.13)); }
  68% { filter: brightness(1.0) saturate(1.04); }
}

@media (aspect-ratio > 21/9) {
  :root { --top-safe: clamp(178px, 25vh, 300px); }
  .hero-picture img { object-position: 50% 51%; }
  .logo-shell { width: min(56vw, 1140px); }
}

@media (aspect-ratio < 4/3) {
  html, body { overflow-y: auto; }
  .stage { min-height: 100svh; height: 100svh; }
  :root { --top-safe: clamp(190px, 31vh, 340px); }
  .hero-picture {
    left: -24%;
    right: -24%;
    top: calc(var(--top-safe) - 20px);
    bottom: -2%;
    transform:
      translate3d(calc(var(--mx) * -0.010), calc(var(--my) * -0.008), 0)
      scale(1.04);
  }
  .hero-picture img {
    object-position: 49% 50%;
    filter: saturate(1.04) contrast(1.04) brightness(.78);
  }
  .content {
    height: calc(var(--top-safe) + 18px);
    padding-top: clamp(16px, 2.6vh, 26px);
  }
  .logo-shell { width: min(112vw, 820px); max-height: 150px; }
  .logo { max-height: 150px; }
  .kicker, .topline {
    max-width: min(88vw, 480px);
    font-size: clamp(9px, 2.4vw, 12px);
    letter-spacing: .14em;
  }
}

@media (max-width: 680px) {
  :root { --top-safe: clamp(180px, 34vh, 300px); }
  .logo-shell { width: 124vw; max-height: 136px; }
  .logo { max-height: 136px; }
  .hero-picture {
    left: -38%;
    right: -38%;
    top: calc(var(--top-safe) - 10px);
  }
  .vignette {
    background:
      radial-gradient(circle at 50% 62%, transparent 0 30%, rgba(0,0,0,.24) 58%, rgba(0,0,0,.88) 100%),
      linear-gradient(90deg, rgba(0,0,0,.82), transparent 31%, transparent 69%, rgba(0,0,0,.86));
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .ash-field, .spark-field, .heat-shimmer { display: none; }
}