:root {
  --fundo: #0d0b08;
  --fundo-2: #1c160d;
  --texto: #f5eee1;
  --suave: #b8ab95;
  --ouro: #f2c230;
}
@media (prefers-color-scheme: light) {
  :root { --fundo: #f6efe1; --fundo-2: #eadcbf; --texto: #17130d; --suave: #6a5c45; --ouro: #c9940f; }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 62.5%; }
body {
  min-height: 100svh; overflow: hidden;
  font: 600 1.4rem/1.6 "Open Sans", system-ui, sans-serif;
  color: var(--texto);
  background: radial-gradient(circle at 50% 42%, var(--fundo-2), var(--fundo) 70%);
}
.palco {
  position: relative; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2.8rem; padding: 3.2rem 1.6rem; text-align: center;
}

/* logo + mandalas no mesmo bloco: a mandala gira exatamente em volta da logo */
.centro { position: relative; display: grid; place-items: center; }

/* mandala dourada girando atrás da logo */
.mandala {
  position: absolute; left: 50%; top: 50%;
  width: min(78rem, 150vw); aspect-ratio: 1;
  translate: -50% -50%;
  color: var(--ouro); opacity: .3;
  animation: gira 80s linear infinite;
}
.mandala-2 {
  width: min(44rem, 92vw); opacity: .5;
  fill: none; stroke: var(--ouro); stroke-width: 1.2;
  animation: gira 45s linear infinite reverse;
}

.selo {
  position: relative; z-index: 1;
  width: clamp(20rem, 28vw, 26rem); aspect-ratio: 1;
  display: grid; place-items: center; border-radius: 50%;
  background: #fffaf0;
  box-shadow: 0 0 0 .3rem rgba(242,194,48,.75), 0 0 0 1.4rem rgba(242,194,48,.12), 0 0 10rem rgba(242,194,48,.35);
  animation: entra 1.2s cubic-bezier(.2,.7,.2,1) both, brilho 4s ease-in-out 1.2s infinite;
}
.selo img { width: 78%; height: auto; }

h1 {
  position: relative; z-index: 1;
  font: 500 clamp(4.8rem, 9vw, 8.8rem)/1 "Cormorant Garamond", Georgia, serif;
  letter-spacing: .02em;
  animation: entra 1.2s .5s cubic-bezier(.2,.7,.2,1) both;
}
h1 em { color: var(--ouro); font-style: italic; }
.linha {
  position: relative; z-index: 1;
  font-size: clamp(1.1rem, 1.4vw, 1.3rem); letter-spacing: .32em; text-transform: uppercase; color: var(--suave);
  animation: entra 1.2s .8s ease both;
}

@keyframes gira { to { rotate: 360deg; } }
@keyframes entra { from { opacity: 0; transform: translateY(2rem) scale(.96); } }
@keyframes brilho { 50% { box-shadow: 0 0 0 .3rem rgba(242,194,48,.9), 0 0 0 2rem rgba(242,194,48,.08), 0 0 14rem rgba(242,194,48,.5); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }