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

:root {
  --bg: #0A0908;       /* fundo principal */
  --surface: #161312;  /* superfície / cards */
  --red: #C2301A;      /* vermelho Muspell */
  --ember: #E8541F;    /* brasa viva */
  --deep: #7A1A0E;     /* vermelho profundo */
  --text: #EDE6DF;     /* texto */
  --p: 0;              /* intensidade do pulso (0 a 1), controlada pelo main.js */
}

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

body {
  overflow: hidden;
  cursor: default;
}

/* Camada de efeitos (cume vulcânico, fissuras, brasas e ondas de calor) atrás da logo */
#fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Vinheta: escurece as bordas e leva o olhar para a chama */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 44%, transparent 42%, rgba(10, 9, 8, 0.72) 100%);
}

.stage {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right))
           max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
}

/* Aura de brasa pulsando atrás da logo */
.stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(900px, 130vw);
  height: min(900px, 130vw);
  translate: -50% -50%;
  background: radial-gradient(circle, rgba(232, 84, 31, 0.2) 0%, rgba(194, 48, 26, 0.08) 36%, transparent 68%);
  opacity: 0;
  animation: aura 5.5s ease-in-out 1s infinite;
  pointer-events: none;
}

/* Âncora fixa: o main.js calcula onde fica a chama a partir dela */
.mark {
  position: relative;
  width: min(380px, 68vw, calc(56vh * 0.942));
}

.logo {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
  animation: float 7s ease-in-out 1.4s infinite;
  /* Cada sopro de Surtr e cada erupção acende a logo */
  filter:
    drop-shadow(0 0 calc(8px + 34px * var(--p)) rgba(232, 84, 31, calc(0.18 + 0.62 * var(--p))))
    brightness(calc(1 + 0.22 * var(--p)));
}

.logo.is-visible {
  opacity: 1;
  transform: none;
}

/* Brilho do M: faixa de brasa que cruza a logo de tempos em tempos */
.sweep { animation: sweep 10s cubic-bezier(0.4, 0, 0.2, 1) 3.5s infinite; }
.glow  { animation: glow 4.4s ease-in-out infinite; }

/* Chama: acende depois da logo aparecer e passa a tremular */
.flame {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  opacity: 0;
  animation:
    ignite 1.6s cubic-bezier(0.2, 0.9, 0.3, 1.15) 1.1s forwards,
    flicker 2.4s ease-in-out 2.8s infinite alternate;
}

.flame-core {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: core 1.8s ease-in-out 2.8s infinite alternate;
}

/* Quando Surtr sopra: a chama dá um clarão e decai devagar */
.logo.surge .flame { filter: brightness(1.45); transition: filter 0.06s linear; }
.logo .flame       { transition: filter 0.9s ease-out; }

@keyframes float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -6px; }
}

@keyframes aura {
  0%, 100% { opacity: 0.35; scale: 0.94; }
  50%      { opacity: 1;    scale: 1.06; }
}

@keyframes glow {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; }
}

@keyframes sweep {
  0%        { transform: translateX(0); }
  36%, 100% { transform: translateX(920px); }
}

@keyframes ignite {
  0%   { opacity: 0; transform: scale(0.15, 0.05); }
  55%  { opacity: 1; transform: scale(1.12, 1.22); }
  100% { opacity: 1; transform: scale(1, 1); }
}

@keyframes flicker {
  0%   { transform: scale(1, 1) skewX(0deg); }
  30%  { transform: scale(1.025, 1.06) skewX(-1.6deg); }
  62%  { transform: scale(0.985, 0.97) skewX(1.2deg); }
  100% { transform: scale(1.03, 1.08) skewX(-0.6deg); }
}

@keyframes core {
  0%   { transform: scale(1, 1); }
  100% { transform: scale(1.1, 1.16); }
}

@media (prefers-reduced-motion: reduce) {
  .logo,
  .stage::before,
  .sweep,
  .glow,
  .flame,
  .flame-core {
    animation: none;
    transition: none;
    transform: none;
  }
  .stage::before { opacity: 0.6; }
  .flame { opacity: 1; }
  .sweep { display: none; }
  .logo { translate: 0 0; }
}