/* =====================================================
   RESET, LAYOUT BASE & ACESSIBILIDADE
   ===================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background: var(--void);
  color: var(--parchment);
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
}

/* ===== Camadas de Fundo RPG Imersivo ===== */
.rpg-bg-fx {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(168, 85, 247, 0.32) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 110%, rgba(255, 159, 67, 0.26) 0%, transparent 65%),
    linear-gradient(180deg, #07060a 0%, #0e0c15 45%, #09080e 100%);
}

/* Vinheta de masmorra escura */
.bg-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 30%, rgba(6, 5, 9, 0.65) 70%, #040307 100%);
  box-shadow: inset 0 0 140px rgba(0, 0, 0, 0.92);
}

/* Luzes de tocha tremulantes nas laterais */
.bg-torch-glow {
  position: absolute;
  width: 650px;
  height: 650px;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  transform: translateZ(0);
  will-change: transform, opacity;
}

.bg-torch-glow.left {
  bottom: -80px;
  left: -140px;
  background: radial-gradient(circle, rgba(255, 159, 67, 0.65) 0%, rgba(229, 193, 88, 0.40) 35%, rgba(239, 68, 68, 0.20) 60%, transparent 75%);
  animation: torchFlickerLeft 4.5s ease-in-out infinite;
}

.bg-torch-glow.right {
  top: 20%;
  right: -160px;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.55) 0%, rgba(56, 189, 248, 0.35) 40%, rgba(255, 159, 67, 0.25) 65%, transparent 80%);
  animation: torchFlickerRight 5.5s ease-in-out infinite;
}

/* Névoa mística em movimento */
.bg-arcane-fog {
  position: absolute;
  inset: 0;
  opacity: 0.55;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(168, 85, 247, 0.30) 0%, transparent 45%),
    radial-gradient(circle at 85% 65%, rgba(16, 185, 129, 0.22) 0%, transparent 50%),
    radial-gradient(circle at 50% 85%, rgba(255, 159, 67, 0.28) 0%, transparent 55%),
    radial-gradient(circle at 75% 15%, rgba(56, 189, 248, 0.18) 0%, transparent 40%);
  background-size: 200% 200%;
  transform: translateZ(0);
  animation: fogDrift 18s ease-in-out infinite;
}

/* Selo Mágico Rúnico / Círculo Arcano Rotativo */
.bg-magic-seal {
  position: absolute;
  top: 60px;
  left: 50%;
  width: min(920px, 94vw);
  height: min(920px, 94vw);
  transform: translate3d(-50%, 0, 0);
  opacity: 0.35;
  filter: drop-shadow(0 0 35px rgba(229, 193, 88, 0.65)) drop-shadow(0 0 65px rgba(168, 85, 247, 0.40));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 500'%3E%3Ccircle cx='250' cy='250' r='240' fill='none' stroke='%23e5c158' stroke-width='2' stroke-dasharray='8,5'/%3E%3Ccircle cx='250' cy='250' r='228' fill='none' stroke='%23e5c158' stroke-width='2.5'/%3E%3Ccircle cx='250' cy='250' r='205' fill='none' stroke='%23a855f7' stroke-width='1.5' stroke-dasharray='14,8'/%3E%3Ccircle cx='250' cy='250' r='180' fill='none' stroke='%23e5c158' stroke-width='2'/%3E%3Ccircle cx='250' cy='250' r='120' fill='none' stroke='%23a855f7' stroke-width='1.5'/%3E%3Ccircle cx='250' cy='250' r='60' fill='none' stroke='%23e5c158' stroke-width='2'/%3E%3Cpolygon points='250,70 377,377 70,173 430,173 123,377' fill='none' stroke='%23e5c158' stroke-width='2'/%3E%3Cpolygon points='250,430 123,123 430,327 70,327 377,123' fill='none' stroke='%23a855f7' stroke-width='2'/%3E%3Cg fill='%23e5c158' font-family='serif' font-size='18' font-weight='bold' text-anchor='middle'%3E%3Ctext x='250' y='36'%3Eᛟ%3C/text%3E%3Ctext x='400' y='98'%3Eᚱ%3C/text%3E%3Ctext x='464' y='256'%3Eᚦ%3C/text%3E%3Ctext x='400' y='414'%3Eᚢ%3C/text%3E%3Ctext x='250' y='476'%3Eᚷ%3C/text%3E%3Ctext x='100' y='414'%3Eᛉ%3C/text%3E%3Ctext x='36' y='256'%3Eᛋ%3C/text%3E%3Ctext x='100' y='98'%3Eᚨ%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform, opacity;
  animation: rotateMagicSeal 110s linear infinite, sealGlowPulse 6s ease-in-out infinite;
}

/* Padrão rúnico estelar sutil */
.bg-runic-stars {
  position: absolute;
  inset: 0;
  opacity: 0.50;
  background-image:
    linear-gradient(rgba(229, 193, 88, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(229, 193, 88, 0.08) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 85%);
  transform: translateZ(0);
}

#emberCanvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  transform: translateZ(0);
}

/* Animações de Ambiente Otimizadas */
@keyframes rotateMagicSeal {
  0% { transform: translate3d(-50%, 0, 0) rotate(0deg); }
  100% { transform: translate3d(-50%, 0, 0) rotate(360deg); }
}

@keyframes sealGlowPulse {
  0%, 100% {
    opacity: 0.28;
  }
  50% {
    opacity: 0.44;
  }
}

@keyframes torchFlickerLeft {
  0%, 100% { opacity: 0.45; transform: translate3d(0, 0, 0) scale(1); }
  25% { opacity: 0.60; transform: translate3d(8px, -10px, 0) scale(1.06); }
  50% { opacity: 0.38; transform: translate3d(-6px, 8px, 0) scale(0.96); }
  75% { opacity: 0.56; transform: translate3d(4px, -6px, 0) scale(1.08); }
}

@keyframes torchFlickerRight {
  0%, 100% { opacity: 0.48; transform: translate3d(0, 0, 0) scale(1); }
  30% { opacity: 0.35; transform: translate3d(-8px, 10px, 0) scale(0.95); }
  60% { opacity: 0.64; transform: translate3d(6px, -8px, 0) scale(1.10); }
  85% { opacity: 0.42; transform: translate3d(-4px, 4px, 0) scale(1.03); }
}

@media (max-width: 860px) {
  .bg-torch-glow {
    width: 420px;
    height: 420px;
    filter: blur(55px);
  }
  .bg-magic-seal {
    width: min(580px, 92vw);
    height: min(580px, 92vw);
    filter: drop-shadow(0 0 25px rgba(229, 193, 88, 0.55));
  }
}

@keyframes fogDrift {
  0% { background-position: 0% 0%, 0% 0%, 0% 0%; }
  50% { background-position: 100% 60%, 40% 100%, 70% 30%; }
  100% { background-position: 0% 0%, 0% 0%, 0% 0%; }
}

main, header, footer {
  position: relative;
  z-index: 1;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--gold);
  color: #1a1300;
  padding: 8px 14px;
  z-index: 999;
}

.skip-link:focus {
  left: 8px;
  top: 8px;
}

h1, h2, h3 {
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: 0.5px;
}

a {
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* ===== Reveal on scroll ===== */
.reveal {
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.pre-reveal {
  opacity: 0;
  transform: translateY(26px);
}

.visible {
  opacity: 1;
  transform: none;
}