/* Ecrã de entrada da ASM Web Solutions (intro.js liga/desliga).
   Ideia: um site a ser construído. Grelha de projeto -> o símbolo desenha-se em traço ->
   uma linha de "compilação" enche-o com o gradiente da marca -> o nome escreve-se como num
   terminal -> o símbolo voa para o seu lugar na barra de navegação e a página aparece.
   Duração total ~3,6 s; tudo em transform/opacity/clip-path (composição, sem reflow). */

.asm-intro { display: none; }

html.asm-intro-on { overflow: hidden; }
html.asm-intro-on .asm-intro {
  display: block; position: fixed; inset: 0; z-index: 100;
  pointer-events: auto; cursor: pointer;
}
/* o símbolo da barra fica escondido até o da entrada lá chegar */
html.asm-intro-on .brand-mark { opacity: 0; }

/* fundo e grelha de projeto */
.asm-intro::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 45%, #0e1522 0%, #07090d 62%);
}
.asm-intro-grelha {
  position: absolute; inset: 0; opacity: 0;
  background-image: radial-gradient(rgba(120, 180, 235, 0.22) 1px, transparent 1.3px);
  background-size: 26px 26px; background-position: center;
  -webkit-mask: radial-gradient(60% 55% at 50% 48%, #000 0%, transparent 100%);
  mask: radial-gradient(60% 55% at 50% 48%, #000 0%, transparent 100%);
}

.asm-intro-lockup {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
}
.asm-intro-marca {
  position: relative; width: min(64vw, 440px); aspect-ratio: 571 / 237;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 0 28px rgba(70, 194, 245, 0.18));
}

/* 1. o contorno desenha-se */
.asm-intro-tracos { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.asm-intro-traco {
  fill: none; stroke: #6fd3ff; stroke-width: 1.4; vector-effect: non-scaling-stroke;
  stroke-linejoin: round; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;
}

/* 2. a "compilação": o gradiente da marca entra atrás de uma linha de luz */
.asm-intro-cheio {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #2463b9 0%, #1f72c2 34%, #1a8fd0 55%, #12b4de 78%, #34d9f3 100%);
  -webkit-mask: url(assets/asm-mark.svg) center / 100% 100% no-repeat;
  mask: url(assets/asm-mark.svg) center / 100% 100% no-repeat;
  clip-path: inset(0 100% 0 0);
}
.asm-intro-scan {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 2px; opacity: 0;
  background: linear-gradient(to bottom, transparent, #d6f6ff 30%, #d6f6ff 70%, transparent);
  box-shadow: 0 0 18px 5px rgba(70, 194, 245, 0.55);
}

/* 3. o nome escreve-se, com cursor */
.asm-intro-nome {
  margin: 0; display: flex; align-items: center;
  font-family: var(--sans); font-weight: 600; font-size: clamp(11px, 1.5vw, 15px);
  letter-spacing: 0.42em; color: #d5dee9; white-space: nowrap;
  padding-left: 0.42em; /* compensa o espaçamento da última letra */
}
.asm-intro-nome > span:not(.asm-intro-cursor) { opacity: 0; }
.asm-intro-cursor {
  display: inline-block; width: 0.55em; height: 1.15em; margin-left: 0.15em;
  background: #46c2f5; opacity: 0;
}

/* ---------- linha do tempo (só arranca com .asm-intro-pronto) ---------- */
/* o fundo só sai quando o símbolo já está quase na barra (não passa por cima dos textos) */
html.asm-intro-pronto .asm-intro-grelha { animation: asmGrelha 0.6s ease-out forwards, asmIntroFundoSai 0.55s 3.05s ease forwards; }
html.asm-intro-pronto .asm-intro::before { animation: asmIntroFundoSai 0.55s 3.05s ease forwards; }

html.asm-intro-pronto .asm-intro-traco {
  animation: asmTraco 1.15s cubic-bezier(0.6, 0, 0.25, 1) forwards, asmTracoApaga 0.45s 2.05s ease forwards;
}
html.asm-intro-pronto .asm-intro-traco-1 { animation-delay: 0.12s, 2.05s; animation-duration: 1.35s, 0.45s; }
html.asm-intro-pronto .asm-intro-traco-2 { animation-delay: 0.42s, 2.05s; }
html.asm-intro-pronto .asm-intro-traco-3 { animation-delay: 0.5s, 2.05s; }
html.asm-intro-pronto .asm-intro-traco-4 { animation-delay: 0.62s, 2.05s; }
html.asm-intro-pronto .asm-intro-traco-5 { animation-delay: 0.7s, 2.05s; }
html.asm-intro-pronto .asm-intro-traco-6 { animation-delay: 0.78s, 2.05s; }

html.asm-intro-pronto .asm-intro-cheio { animation: asmEnche 0.85s 1.3s cubic-bezier(0.65, 0, 0.35, 1) forwards; }
html.asm-intro-pronto .asm-intro-scan { animation: asmScan 0.85s 1.3s cubic-bezier(0.65, 0, 0.35, 1) forwards; }

html.asm-intro-pronto .asm-intro-cursor { animation: asmCursor 0.8s 1.6s steps(1) infinite; }
/* Cada letra aparece com um esbatimento curto. Não usar steps(1) aqui: com atrasos como 2s o
   Chrome/Edge calcula o fim como 0,9999999 em vez de 1, o degrau arredonda para baixo e a letra
   fica invisível (o nome aparecia "WEB … IONS"). */
html.asm-intro-pronto .asm-intro-nome > span:not(.asm-intro-cursor) { animation: asmLetra 0.14s ease-out both; }
html.asm-intro-pronto .asm-intro-nome > span:nth-child(1)  { animation-delay: 1.8s; }
html.asm-intro-pronto .asm-intro-nome > span:nth-child(2)  { animation-delay: 1.85s; }
html.asm-intro-pronto .asm-intro-nome > span:nth-child(3)  { animation-delay: 1.9s; }
html.asm-intro-pronto .asm-intro-nome > span:nth-child(4)  { animation-delay: 1.95s; }
html.asm-intro-pronto .asm-intro-nome > span:nth-child(5)  { animation-delay: 2s; }
html.asm-intro-pronto .asm-intro-nome > span:nth-child(6)  { animation-delay: 2.05s; }
html.asm-intro-pronto .asm-intro-nome > span:nth-child(7)  { animation-delay: 2.1s; }
html.asm-intro-pronto .asm-intro-nome > span:nth-child(8)  { animation-delay: 2.15s; }
html.asm-intro-pronto .asm-intro-nome > span:nth-child(9)  { animation-delay: 2.2s; }
html.asm-intro-pronto .asm-intro-nome > span:nth-child(10) { animation-delay: 2.25s; }
html.asm-intro-pronto .asm-intro-nome > span:nth-child(11) { animation-delay: 2.3s; }
html.asm-intro-pronto .asm-intro-nome > span:nth-child(12) { animation-delay: 2.35s; }
html.asm-intro-pronto .asm-intro-nome > span:nth-child(13) { animation-delay: 2.4s; }
html.asm-intro-pronto .asm-intro-nome { animation: asmSome 0.35s 2.75s ease forwards; }

/* 4. o símbolo voa para a barra de navegação (intro.js mede --voo-x/y/s) */
html.asm-intro-pronto .asm-intro-marca { animation: asmIntroVoa 0.75s 2.8s cubic-bezier(0.7, 0, 0.2, 1) forwards; }

@keyframes asmGrelha { to { opacity: 1; } }
@keyframes asmTraco { to { stroke-dashoffset: 0; } }
@keyframes asmTracoApaga { to { opacity: 0; } }
@keyframes asmEnche { to { clip-path: inset(0 0 0 0); } }
@keyframes asmScan {
  0% { left: 0%; opacity: 0; }
  15% { opacity: 1; }
  85% { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@keyframes asmLetra { from { opacity: 0; } to { opacity: 1; } }
@keyframes asmCursor { 0% { opacity: 1; } 50% { opacity: 0; } }
@keyframes asmSome { to { opacity: 0; transform: translateY(6px); } }
@keyframes asmIntroVoa {
  to {
    transform: translate(var(--voo-x, 0px), var(--voo-y, -40vh)) scale(var(--voo-s, 0.15));
    filter: drop-shadow(0 0 0 rgba(70, 194, 245, 0));
  }
}
@keyframes asmIntroFundoSai { to { opacity: 0; } }

@media (max-width: 640px) {
  .asm-intro-marca { width: 74vw; }
  .asm-intro-lockup { gap: 16px; }
}