:root {
  --void: #0a0503;
  --deep-brown: #1f0f04;
  --deep-red: #2a0a02;
  --amber: #ffb066;
  --amber-dim: #8a5a2b;
  --glow: #ff7a1a;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--void);
  overflow: hidden;
}

body {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Trebuchet MS', 'Segoe UI', sans-serif;
}

/* Ambient shifting glow field */
.glow-field {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 122, 26, 0.3), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(120, 40, 10, 0.4), transparent 50%),
    radial-gradient(circle at 50% 90%, rgba(180, 80, 20, 0.25), transparent 55%);
  filter: blur(40px);
  animation: drift 22s ease-in-out infinite alternate;
  z-index: 0;
}

@keyframes drift {
  0%   { transform: translate(0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate(3%, -2%) rotate(4deg) scale(1.05); }
  100% { transform: translate(-3%, 2%) rotate(-3deg) scale(1.02); }
}

/* Faint embers / static specks */
.haze {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,176,102,0.5), transparent),
    radial-gradient(1px 1px at 80% 10%, rgba(255,176,102,0.4), transparent),
    radial-gradient(1px 1px at 60% 80%, rgba(255,176,102,0.3), transparent),
    radial-gradient(1px 1px at 30% 65%, rgba(255,176,102,0.35), transparent),
    radial-gradient(1px 1px at 90% 50%, rgba(255,176,102,0.25), transparent),
    radial-gradient(1px 1px at 45% 15%, rgba(255,176,102,0.4), transparent);
  background-repeat: repeat;
  opacity: 0.6;
  z-index: 1;
}

.content {
  position: relative;
  z-index: 2;
  text-align: center;
}

h1 {
  font-size: clamp(2rem, 7vw, 4.5rem);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--amber);
  text-shadow:
    0 0 10px rgba(255, 122, 26, 0.6),
    0 0 30px rgba(180, 80, 20, 0.5),
    0 0 60px rgba(80, 30, 10, 0.6);
  animation: pulse 4.5s ease-in-out infinite;
  padding-left: 0.25em; /* offset letter-spacing so text stays centered */
}

@keyframes pulse {
  0%, 100% {
    opacity: 0.85;
    text-shadow:
      0 0 10px rgba(255, 122, 26, 0.5),
      0 0 30px rgba(180, 80, 20, 0.4),
      0 0 60px rgba(80, 30, 10, 0.5);
  }
  50% {
    opacity: 1;
    text-shadow:
      0 0 16px rgba(255, 122, 26, 0.85),
      0 0 45px rgba(180, 80, 20, 0.7),
      0 0 90px rgba(120, 50, 15, 0.7);
  }
}

.divider {
  width: 60px;
  height: 1px;
  margin: 1.5rem auto 0;
  background: linear-gradient(90deg, transparent, var(--amber-dim), transparent);
  opacity: 0.6;
}