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

/* Variáveis */
:root {
  --gold: #c9a84c;
  --gold-light: #e8c96b;
  --gold-dim: #7a5f28;
  --gold-glow: rgba(201, 168, 76, 0.35);
  --dark-bg: #07060a;
  --dark-mid: #100d15;
  --dark-panel: rgba(12, 10, 18, 0.85);
  --text-light: #f0e8d0;
  --text-dim: #8a7a5a;
}

/* Estrutura Base */
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--dark-bg);
}

/* Canvas de partículas */
#canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Camadas de Fundo */
.bg-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
}
#bg-image {
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.85) saturate(0.8) sepia(0.15);
  transform: scale(1.02);
}
#bg-vignette {
  z-index: 2;
  background: radial-gradient(ellipse at center, transparent 55%, rgba(7,6,10,0.45) 85%, #07060a 100%);
}
#bg-top-fade {
  z-index: 3;
  background: linear-gradient(to bottom, #07060a 0%, transparent 25%, transparent 75%, #07060a 100%);
}

/* Cena Principal */
#scene {
  position: fixed;
  inset: 0;
  z-index: 6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Logotipo – MAIS RÁPIDO */
.main-logo {
  max-width: 85vw;
  width: 550px;
  height: auto;
  opacity: 0;
  animation: blazeIn 0.8s ease forwards 0.2s;   /* ← ALTERADO */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Container do Botão – MAIS RÁPIDO */
.cta-wrap {
  opacity: 0;
  animation: fadeUp 0.6s ease forwards 0.4s;    /* ← ALTERADO */
}

/* Botão */
.cta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Cinzel', serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  padding: 12px 32px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.23);
  backdrop-filter: blur(5px);
  transition: all 0.3s ease;
  cursor: pointer;
}
.cta-btn:hover {
  color: #ffffff;
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 255, 255, 0.15);
}

/* Animações */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes blazeIn {
  0%   { opacity: 0; transform: translateY(30px) scale(0.95); filter: blur(6px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* Responsividade */
@media (max-width: 480px) {
  .cta-btn {
    font-size: 0.65rem;
    letter-spacing: 0.3em;
    padding: 10px 22px;
  }
}

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