html, body {
  margin: 0;
  padding: 0;
  background: black;
  overflow: hidden;
  height: 100%;
  font-family: 'Cinzel', serif;
}

/* Fire canvas */
#fire {
  position: fixed;
  inset: 0;
  z-index: 0;
}

/* Title */
#title {
  position: absolute;
  top: 50%;
  width: 100%;
  text-align: center;
  transform: translateY(-50%);

  font-size: clamp(2.5rem, 6vw, 4rem);
  color: #ffcc99;
  opacity: 0;
  z-index: 2;

  text-shadow:
    0 0 8px rgba(255, 120, 0, 0.4),
    0 0 20px rgba(255, 80, 0, 0.2);

  animation:
    fadeIn 2.5s ease forwards 6s,
    flicker 4s infinite 8.5s;
}

/* Heat distortion */
#title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: rgba(255, 180, 120, 0.15);
  filter: blur(6px);
  animation: heatWave 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes fadeIn {
  to { opacity: 1; }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  92% { opacity: 0.95; }
  94% { opacity: 0.85; }
  96% { opacity: 0.98; }
}

@keyframes heatWave {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1px, 1px); }
  50%  { transform: translate(1px, -1px); }
  75%  { transform: translate(-1px, 0); }
  100% { transform: translate(0, 0); }
}