/* ==========================================================================
   Abertura (par do assets/intro.js)

   Efeito com DUAS logotipos, na ordem pedida:
     Fase 1  elemento de apoio (símbolo proprietário) entra + brilho + varredura mint
     Fase 2  o símbolo sai e a LOGOTIPO HERO ("AI SPACE by sauter") entra
     Fase 3  a cortina sobe revelando o hero (que já traz a mesma logotipo)

   Este CSS vive em arquivo próprio e linkado — antes morava no native-scroll.css,
   que foi removido junto com a conversão de scroll; sem ele a intro ficava sem
   estilo. Respeita prefers-reduced-motion (intro.js nem monta a cortina).
   ========================================================================== */
#intro-cover {
  position: fixed;
  inset: 0;
  z-index: 2000; /* acima do loader lottie do tema (z-index 999) */
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #15032d;
  transition: opacity .7s ease, transform .7s cubic-bezier(.7, 0, .3, 1);
}

#intro-cover .intro-stage {
  position: relative;
  display: grid;
  place-items: center;
  width: min(80vw, 560px);
  height: 190px;
}

/* Fase 1 — elemento de apoio */
#intro-cover .intro-mark {
  position: absolute;
  width: min(26vw, 148px);
  opacity: 0;
  transform: scale(.82);
  animation:
    intro-mark-in .65s cubic-bezier(.215, .61, .355, 1) forwards,
    intro-mark-pulse 1s ease .5s,
    intro-mark-out .5s ease 1.25s forwards;
}

#intro-cover .intro-mark svg { width: 100%; height: auto; display: block; }
#intro-cover .intro-mark svg path { fill: #fff; }

/* Efeito — varredura mint cruzando o símbolo */
#intro-cover .intro-sweep {
  position: absolute;
  top: 0;
  left: -45%;
  width: 45%;
  height: 100%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(186, 239, 38, .5), transparent);
  transform: skewX(-12deg);
  opacity: 0;
  animation: intro-sweep .7s ease .7s;
}

/* Fase 2 — logotipo hero entra depois que o símbolo sai */
#intro-cover .intro-hero {
  position: absolute;
  width: min(74vw, 500px);
  opacity: 0;
  transform: translateY(14px);
  animation: intro-hero-in .7s cubic-bezier(.215, .61, .355, 1) 1.6s forwards;
}

#intro-cover .intro-hero img { width: 100%; height: auto; display: block; }

/* Fase 3 — cortina sobe */
#intro-cover.intro-out {
  opacity: 0;
  transform: translateY(-6%);
  pointer-events: none;
}

@keyframes intro-mark-in {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes intro-mark-pulse {
  0%   { filter: drop-shadow(0 0 0 rgba(186, 239, 38, 0)); }
  50%  { filter: drop-shadow(0 0 22px rgba(186, 239, 38, .55)); }
  100% { filter: drop-shadow(0 0 0 rgba(186, 239, 38, 0)); }
}
@keyframes intro-mark-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.08); }
}
@keyframes intro-sweep {
  0%   { left: -45%; opacity: 0; }
  20%  { opacity: 1; }
  100% { left: 105%; opacity: 0; }
}
@keyframes intro-hero-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Enquanto a intro roda, a logotipo do hero (embaixo) só aparece no fim,
   pra emendar sem piscar com a que estava na cortina. */
html.has-intro .hero-logo { animation-delay: 2.4s; }