/* ============================================================
   Abertura (splash) - a logo grande, animada, como primeira
   página. Aparece no load, sai sozinha (ou ao interagir) e
   revela o site. Respeita prefers-reduced-motion.
   ============================================================ */

html.intro-open, html.intro-open body { overflow: hidden; }

.intro {
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  background:
    radial-gradient(62% 58% at 50% 42%, #ffffff 0%, #fdf7ec 62%, #f6ecd6 100%);
  transition: opacity 0.6s var(--ease), visibility 0.6s var(--ease);
  /* rede de segurança: some sozinha se o JS não rodar */
  animation: introFailsafe 10ms linear 6s forwards;
}
.intro.is-hiding { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes introFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.intro-stage { position: relative; display: grid; place-items: center; padding: 6vw; }

/* anéis dourado/vermelho que pulsam atrás da logo */
.intro-ring {
  position: absolute; top: 50%; left: 50%; width: min(72vw, 440px); aspect-ratio: 1;
  transform: translate(-50%, -50%) scale(0.85); border-radius: 50%;
  border: 2px solid var(--gold-400); opacity: 0;
  animation: introRing 1.5s var(--ease) 0.15s forwards;
}
.intro-ring.two { border-color: var(--red-500); animation-delay: 0.32s; width: min(84vw, 520px); }

.intro-logo {
  position: relative; width: min(66vw, 400px); height: auto; display: block;
  filter: drop-shadow(0 22px 48px rgba(164, 22, 26, 0.18));
  animation: introPop 1s var(--ease-out) both;
}
.intro.is-hiding .intro-logo { transform: scale(1.07); transition: transform 0.6s var(--ease); }

/* fallback caso assets/logo.png ainda não exista */
.intro-fallback { display: none; flex-direction: column; align-items: center; gap: var(--s-4); text-align: center; }
.intro-fallback .fb-mark {
  width: 96px; height: 96px; border-radius: 28px; display: grid; place-items: center; color: var(--gold-300);
  background: linear-gradient(150deg, var(--red-600), var(--red-800)); box-shadow: var(--sh-red);
  animation: introPop 0.9s var(--ease-out) both;
}
.intro-fallback .fb-mark svg { width: 44px; height: 44px; }
.intro-fallback .fb-text { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 6vw, 2.4rem); color: var(--ink); letter-spacing: -0.03em; }

.intro-hint {
  position: absolute; left: 0; right: 0; bottom: max(6%, 28px); text-align: center;
  font-size: var(--fs-xs); color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
  opacity: 0; animation: fade-in 0.6s ease 1.2s forwards;
}

@keyframes introPop {
  0%   { opacity: 0; transform: scale(0.7) translateY(12px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes introRing {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.82); }
  45%  { opacity: 0.75; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-logo, .intro-ring, .intro-hint, .intro-fallback .fb-mark { animation: none !important; opacity: 1; }
  .intro-ring { display: none; }
}