/* Página inicial — abertura "Sol" (A4, escolhida em 31/10/2026).
   Foto do horizonte em tela cheia; o emblema dentro do círculo da marca fica exatamente sobre o sol
   (posição calculada em js/inicio.js); texto centralizado embaixo.
   As outras aberturas (A, A1, A2, A3, B, C) estão guardadas em rascunhos/inicio_opcoes.html. */

.abertura {
  position: relative; display: flex; align-items: flex-end; overflow: hidden;
  min-height: max(100vh, 860px); padding: 120px 0 70px;
}
.abertura .fundo {
  position: absolute; inset: 0;
  background: url(../assets/img/horizonte-1920.webp) center 40% / cover;
}
@media (max-width: 960px) { .abertura .fundo { background-image: url(../assets/img/horizonte-960.webp); } }
.abertura::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(7,17,31,.97) 0%, rgba(7,17,31,.7) 32%, rgba(7,17,31,.08) 62%, rgba(7,17,31,.25) 100%);
}
.abertura .recipiente { position: relative; z-index: 1; text-align: center; display: flex; flex-direction: column; align-items: center; }
.abertura .sobrescrito::after { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--ciano); vertical-align: middle; margin-left: 12px; }
.abertura .subtitulo { font: 500 clamp(1.1rem, 2vw, 1.4rem)/1.4 var(--fonte-titulo); color: var(--prata); margin-bottom: 18px; }
.abertura .subtitulo b { color: var(--ciano); font-weight: 500; }
.abertura .apoio { max-width: 540px; margin: 0 auto; color: var(--texto-suave); font-size: 1.05rem; }
.abertura .botoes { justify-content: center; }

/* círculo + emblema sobre o sol */
.anel-sol {
  position: absolute; z-index: 1; width: clamp(140px, 13.5vw, 196px); aspect-ratio: 1;
  transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity 1.2s;
}
.anel-sol.pronto { opacity: 1; }
.anel-sol::before { /* disco escuro suave para o "A" não se perder no brilho do sol */
  content: ""; position: absolute; inset: 14%; border-radius: 50%;
  background: radial-gradient(circle, rgba(7,17,31,.55) 0%, rgba(7,17,31,.35) 55%, transparent 72%);
}
.anel-sol svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 5px rgba(0,207,240,.9)) drop-shadow(0 0 16px rgba(0,207,240,.45)); }
.anel-sol .giro { animation: giro 60s linear infinite; transform-origin: 50% 50%; }
.anel-sol .giro2 { animation: giro 90s linear infinite reverse; transform-origin: 50% 50%; }
.anel-sol .emblema-sol {
  position: absolute; left: 50%; top: 50%; width: 56%; transform: translate(-50%, -54%);
  filter: drop-shadow(0 0 10px rgba(0,207,240,.7)) drop-shadow(0 0 28px rgba(255,190,120,.35));
}
@keyframes giro { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .anel-sol .giro, .anel-sol .giro2 { animation: none; } }

/* celular: foto no topo (pessoa + sol visíveis), texto logo abaixo */
@media (max-width: 900px) {
  .abertura { min-height: 0; padding-top: calc(66vh - 30px); padding-bottom: 60px; }
  .abertura .fundo {
    bottom: auto; height: 74vh; background-position: 41% 40%;
    -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent); mask-image: linear-gradient(180deg, #000 70%, transparent);
  }
  .abertura::after { background: linear-gradient(0deg, var(--azul-profundo) 0%, var(--azul-profundo) 30%, rgba(7,17,31,.6) 45%, rgba(7,17,31,.05) 70%); }
}