/* ==========================================================================
   Prospera Educ — V3 · abertura de marca
   Reescrita em CSS puro do logo motion (antes React + runtime de canvas).
   Nenhum vídeo, nenhum JS de animação: só @keyframes sobre os PNGs da marca.

   Timeline — 5.4s no total, nas mesmas 4 cenas do original:
     Ignição    0.00s → 1.50s   (  0% →  28% )  símbolo surge de baixo, brilho cruza, anel pulsa
     Wordmark   1.50s → 2.90s   ( 28% →  54% )  símbolo recolhe à esquerda, logotipo é revelado
     Assinatura 2.90s → 4.30s   ( 54% →  80% )  assinatura entra, câmera dá leve zoom
     Selo       4.30s → 5.40s   ( 80% → 100% )  logotipo recolhe, selo fecha, fade final

   O truque de layout: o lockup já é montado na posição FINAL (símbolo pequeno
   à esquerda do logotipo). Na cena 1 o símbolo é apenas transformado para
   parecer centralizado e grande — assim nada faz reflow, só transform/opacity.
   ========================================================================== */

.intro {
  --dur: 5.4s;
  --sym: 132px;                                   /* tamanho do símbolo no lockup */
  --word: 340px;                                  /* largura do logotipo no lockup */
  --gap: 28px;
  --shift: calc((var(--word) + var(--gap)) / 2);  /* recentraliza o símbolo no palco */
  --grow: 2.5;                                    /* escala do símbolo na ignição */

  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--navy, #000C28);
  animation: intro-out var(--dur) linear forwards;
}
.intro[hidden] { display: none; }

.intro__stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* ------------------------------------------------------------- Fundo -- */

.intro__grid {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-image:
    linear-gradient(rgba(255,255,255,1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 65% 60% at 50% 50%, #000 10%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 65% 60% at 50% 50%, #000 10%, transparent 78%);
  animation: intro-grid var(--dur) ease-out forwards;
}

.intro__bloom {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: intro-bloom var(--dur) ease-in-out forwards;
}

.intro__flash {
  position: absolute;
  width: min(900px, 150vw);
  aspect-ratio: 1;
  border-radius: 999px;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle, rgba(127,160,255,.55) 0%, rgba(23,70,234,0) 62%);
  animation: intro-flash var(--dur) ease-out forwards;
}

/* Selo final: o símbolo se fecha dentro do quadrado azul da marca. */
.intro__seal {
  position: absolute;
  width: calc(var(--sym) * 2.2);
  aspect-ratio: 1;
  border-radius: 24%;
  background: linear-gradient(160deg, #1746EA 0%, #00219B 100%);
  box-shadow: 0 40px 120px rgba(23,70,234,.55);
  opacity: 0;
  transform: scale(.82);
  animation: intro-seal var(--dur) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ------------------------------------------------------------ Lockup -- */

.intro__lockup {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap);
  animation: intro-zoom var(--dur) ease-in-out forwards;
}

.intro__symbol {
  position: relative;
  width: var(--sym);
  height: var(--sym);
  flex: none;
  opacity: 0;
  transform: translateX(var(--shift)) scale(var(--grow));
  clip-path: inset(100% 0 0 0);
  animation: intro-symbol var(--dur) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.intro__symbol img { width: 100%; height: 100%; object-fit: contain; }

/* Brilho que cruza o símbolo no momento da ignição. */
.intro__sweep {
  position: absolute;
  top: -30%;
  left: -40%;
  width: 34%;
  height: 160%;
  background: linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.9) 50%, rgba(255,255,255,0) 100%);
  mix-blend-mode: overlay;
  opacity: 0;
  animation: intro-sweep var(--dur) ease-in-out forwards;
}

/* Anel que pulsa sobre o "e" do símbolo. */
.intro__ring {
  position: absolute;
  left: 4%;
  top: 4%;
  width: 22%;
  height: 22%;
  border-radius: 999px;
  border: 2px solid #7FA0FF;
  opacity: 0;
  transform: scale(2.6);
  animation: intro-ring var(--dur) cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.intro__wordmark {
  width: var(--word);
  flex: none;
  clip-path: inset(0 100% 0 0);
  animation: intro-word var(--dur) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.intro__wordmark img { width: 100%; height: auto; }

/* --------------------------------------------------------- Assinatura -- */

.intro__tagline {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(50% + clamp(110px, 16vh, 190px));
  text-align: center;
  padding-inline: 24px;
  opacity: 0;
  transform: translateY(22px);
  animation: intro-tagline var(--dur) cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.intro__claim {
  font-family: var(--font-display, Sora), sans-serif;
  font-weight: 200;
  font-size: clamp(22px, 3.4vw, 46px);
  letter-spacing: -.035em;
  color: #fff;
  text-wrap: balance;
}
.intro__claim span { color: #7FA0FF; }
.intro__kicker {
  font-family: var(--font-mono, monospace);
  font-size: clamp(11px, 1.2vw, 18px);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin-top: clamp(14px, 2vh, 26px);
}

/* ------------------------------------------------------------- Pular -- */

.intro__skip {
  position: absolute;
  right: clamp(16px, 4vw, 32px);
  bottom: clamp(16px, 4vw, 32px);
  background: transparent;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  cursor: pointer;
  opacity: 0;
  transition: color .2s, border-color .2s;
  animation: intro-skip var(--dur) ease-out forwards;
}
.intro__skip:hover { color: #fff; border-color: rgba(255,255,255,.6); }

/* ---------------------------------------------------------- Keyframes -- */

@keyframes intro-symbol {
  0%   { opacity: 0; transform: translateX(var(--shift)) scale(calc(var(--grow) * 1.16)); clip-path: inset(100% 0 0 0); }
  6%   { opacity: 1; }
  14%  { transform: translateX(var(--shift)) scale(calc(var(--grow) * 1.04)); clip-path: inset(0 0 0 0); }
  25%  { opacity: 1; transform: translateX(var(--shift)) scale(var(--grow)); clip-path: inset(0 0 0 0); }
  28%  { transform: translateX(var(--shift)) scale(var(--grow)); }
  46%  { transform: translateX(0) scale(1); }
  80%  { opacity: 1; transform: translateX(0) scale(1); }
  93%  { opacity: 1; transform: translateX(var(--shift)) scale(1.18); }
  97%  { opacity: 0; transform: translateX(var(--shift)) scale(1.18); }
  /* clip-path precisa ser redeclarado aqui: sem isso ele volta a interpolar
     para o valor base inset(100%) e o símbolo desaparece após a ignição. */
  100% { opacity: 0; clip-path: inset(0 0 0 0); }
}

@keyframes intro-tagline {
  0%, 58% { opacity: 0; transform: translateY(22px); }
  70%     { opacity: 1; transform: translateY(0); }
  82%     { opacity: 1; transform: translateY(0); }
  90%     { opacity: 0; transform: translateY(0); }
  100%    { opacity: 0; transform: translateY(0); }
}

@keyframes intro-word {
  0%, 34% { clip-path: inset(0 100% 0 0); opacity: 1; }
  58%     { clip-path: inset(0 0 0 0); opacity: 1; }
  80%     { clip-path: inset(0 0 0 0); opacity: 1; }
  90%     { clip-path: inset(0 100% 0 0); opacity: 1; }
  100%    { clip-path: inset(0 100% 0 0); opacity: 0; }
}

@keyframes intro-sweep {
  0%, 5%  { opacity: 0; transform: translateX(0); }
  10%     { opacity: .9; }
  30%     { opacity: 0; transform: translateX(520%); }
  100%    { opacity: 0; transform: translateX(520%); }
}

@keyframes intro-ring {
  0%, 18% { opacity: 0; transform: scale(2.6); }
  26%     { opacity: .9; transform: scale(1.18); }
  40%     { opacity: 0; transform: scale(1.18); }
  100%    { opacity: 0; }
}

@keyframes intro-zoom {
  0%, 54% { transform: scale(1); }
  80%     { transform: scale(1.045); }
  100%    { transform: scale(1); }
}

@keyframes intro-bloom {
  0%   { opacity: 0; background: radial-gradient(ellipse 58% 62% at 50% 50%, rgba(23,70,234,.85) 0%, rgba(0,33,155,.32) 40%, rgba(0,12,40,0) 72%); }
  24%  { opacity: 1; background: radial-gradient(ellipse 58% 62% at 50% 50%, rgba(23,70,234,.85) 0%, rgba(0,33,155,.32) 40%, rgba(0,12,40,0) 72%); }
  54%  { opacity: .62; background: radial-gradient(ellipse 58% 62% at 42% 50%, rgba(23,70,234,.85) 0%, rgba(0,33,155,.32) 40%, rgba(0,12,40,0) 72%); }
  100% { opacity: .4;  background: radial-gradient(ellipse 58% 62% at 42% 50%, rgba(23,70,234,.85) 0%, rgba(0,33,155,.32) 40%, rgba(0,12,40,0) 72%); }
}

@keyframes intro-grid {
  0%, 8% { opacity: 0; }
  36%    { opacity: .05; }
  100%   { opacity: .05; }
}

@keyframes intro-flash {
  0%, 8% { opacity: 0; }
  19%    { opacity: .85; }
  34%    { opacity: 0; }
  100%   { opacity: 0; }
}

@keyframes intro-seal {
  0%, 84% { opacity: 0; transform: scale(.82); }
  96%     { opacity: 1; transform: scale(1); }
  100%    { opacity: 1; transform: scale(1); }
}

@keyframes intro-skip {
  0%, 4% { opacity: 0; }
  12%    { opacity: 1; }
  88%    { opacity: 1; }
  100%   { opacity: 0; }
}

@keyframes intro-out {
  0%, 94% { opacity: 1; visibility: visible; }
  100%    { opacity: 0; visibility: hidden; }
}

/* ------------------------------------------------------- Telas menores -- */

@media (max-width: 760px) {
  .intro { --sym: 88px; --word: 226px; --gap: 18px; --grow: 2.2; }
}

@media (max-width: 420px) {
  .intro { --sym: 72px; --word: 184px; --gap: 14px; --grow: 2; }
}

/* Sem animação: a abertura simplesmente não roda (o JS também não a ativa). */
@media (prefers-reduced-motion: reduce) {
  .intro { display: none; }
}