/* =========================================================
   Abertura animada · "explosão" do título ao abrir o site
   Ativada pela classe .com-intro no <html> (script no <head>).
   Linha do tempo: núcleo 0–0,45s · explosão 0,45s · título 0,5–1,6s ·
   frase 2–3s (com nova rajada) · fogos 4–9s · saída aos 10s
   ========================================================= */
.intro { display: none; }

.com-intro body { overflow: hidden; }

.com-intro .intro {
  display: grid; place-items: center;
  position: fixed; inset: 0; z-index: 9999;
  overflow: hidden; cursor: pointer;
  background: radial-gradient(ellipse at 50% 46%, #2b4a6f 0%, #16293f 58%, #0b1726 100%);
  /* Salvaguarda: some sozinha mesmo que o JavaScript falhe */
  animation: introSai .6s ease 11.5s forwards;
}

.intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Núcleo de luz que "carrega" antes de explodir */
.intro__nucleo {
  position: absolute; left: 50%; top: 46%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: #fff7d1;
  box-shadow: 0 0 24px 8px rgba(249, 214, 92, .9), 0 0 80px 30px rgba(91, 200, 242, .45);
  animation: introNucleo .5s cubic-bezier(.5, 0, .9, .4) both;
}
@keyframes introNucleo {
  0%   { transform: scale(.1); opacity: 0; }
  75%  { transform: scale(1.6); opacity: 1; }
  100% { transform: scale(0); opacity: 0; }
}

/* Onda de choque */
/* Cresce em tamanho (não em escala) para a borda continuar fina */
.intro__onda {
  position: absolute; left: 50%; top: 46%; width: 0; height: 0; transform: translate(-50%, -50%);
  border-radius: 50%; border: 2px solid rgba(249, 214, 92, .95);
  box-shadow: 0 0 24px rgba(249, 214, 92, .55), inset 0 0 24px rgba(91, 200, 242, .35);
  opacity: 0; animation: introOnda 1.1s cubic-bezier(.12, .75, .3, 1) .45s both;
}
.intro__onda--2 { border-color: rgba(91, 200, 242, .9); box-shadow: 0 0 24px rgba(91, 200, 242, .5); animation-delay: .62s; animation-duration: 1.3s; }
@keyframes introOnda {
  0%   { width: 0; height: 0; opacity: 1; }
  100% { width: 170vmax; height: 170vmax; opacity: 0; }
}

/* Clarão */
.intro__flash {
  position: absolute; inset: 0; background: radial-gradient(circle at 50% 46%, #fffbe8 0%, rgba(255, 251, 232, 0) 65%);
  opacity: 0; animation: introFlash .55s ease-out .43s both; pointer-events: none;
}
@keyframes introFlash { 0% { opacity: 0; } 18% { opacity: .9; } 100% { opacity: 0; } }

/* Título */
.intro__conteudo { position: relative; text-align: center; padding: 0 20px; color: #fff; }

/* Logo do hospital no topo: desce suavemente logo após a explosão e ganha um brilho */
.intro__logo {
  display: block; margin: 0 auto clamp(12px, 2.4vh, 24px);
  height: clamp(70px, 17vh, 170px); width: auto; max-width: 62vw;   /* no celular não ofusca o título */
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, .35));
  animation: introLogo 1.1s cubic-bezier(.2, 1.1, .3, 1) .7s both, introLogoBrilho 2.4s ease-in-out 1.8s 1;
}
@keyframes introLogo {
  0%   { opacity: 0; transform: translateY(-40px) scale(.85); filter: blur(10px) drop-shadow(0 8px 28px rgba(0, 0, 0, .35)); }
  100% { opacity: 1; transform: none; filter: drop-shadow(0 8px 28px rgba(0, 0, 0, .35)); }
}
@keyframes introLogoBrilho {
  0%, 100% { filter: drop-shadow(0 8px 28px rgba(0, 0, 0, .35)); }
  50%      { filter: drop-shadow(0 0 26px rgba(249, 214, 92, .55)) drop-shadow(0 8px 28px rgba(0, 0, 0, .35)); }
}
.intro__eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(11px, 2.6vw, 14px);
  letter-spacing: .16em; text-transform: uppercase; color: var(--sun);
  padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  animation: introSurge .6s ease 1s both;
}
.intro__titulo {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.025em; line-height: 1.04;
  /* Limitado também pela altura, para logo + título + frase caberem em telas baixas */
  font-size: clamp(24px, min(8.2vw, 12.5vh), 118px);
  text-shadow: 0 10px 40px rgba(0, 0, 0, .35);
  animation: introTitulo 1.1s cubic-bezier(.18, 1.35, .32, 1) .5s both;
}
.intro__titulo .grad { display: inline-block; filter: drop-shadow(0 6px 24px rgba(91, 200, 242, .35)); }
.intro__titulo .sparkle { font-size: .8em; }
/* Depois de entrar, o título "respira" devagar enquanto os fogos acontecem */
.intro__conteudo { animation: introRespira 3.2s ease-in-out 2.4s infinite; }
@keyframes introRespira { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } }
@keyframes introTitulo {
  0%   { opacity: 0; transform: scale(.35); filter: blur(16px); letter-spacing: .2em; }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: none; letter-spacing: -.025em; }
}
@keyframes introSurge { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Frase de reconhecimento: entra depois do título, com brilho que percorre o texto */
.intro__frase {
  margin-top: clamp(18px, 3vw, 30px);
  font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em;
  font-size: clamp(20px, 4vw, 40px); color: rgba(255, 255, 255, .92);
  animation: introFrase 1s cubic-bezier(.2, 1.2, .3, 1) 2s both;
}
.intro__frase strong {
  font-weight: 800;
  background: linear-gradient(100deg, var(--sun) 0%, #fff6c8 45%, var(--sun) 55%, var(--sun-deep) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: introBrilho 1.6s ease-in-out 2.6s both;
}
@keyframes introFrase {
  0%   { opacity: 0; transform: translateY(24px) scale(.92); filter: blur(8px); }
  100% { opacity: 1; transform: none; filter: none; }
}
@keyframes introBrilho { from { background-position: 100% 0; } to { background-position: 0 0; } }

.intro__pular {
  position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center;
  font-size: 13px; color: rgba(255, 255, 255, .55); letter-spacing: .04em;
  animation: introSurge .5s ease 1.4s both;
}

/* Saída: a camada cresce levemente e se dissolve, revelando o site */
.intro--saindo { animation: introSai .65s cubic-bezier(.4, 0, .2, 1) forwards !important; pointer-events: none; }
@keyframes introSai {
  to { opacity: 0; transform: scale(1.08); visibility: hidden; }
}

/* O título do site entra suave logo depois da abertura */
.intro-revelado .hero__inner { animation: introSurge .7s ease both; }