/* Animación de entrada: pulso de electrocardiograma cuyo pico dibuja la "A"
   del logo, aparece el logo, se escribe "ApexM Systems" con un barrido y todo
   se desliza a la derecha y se esfuma. Dura ~1.5s.
   Solo corre si js/boot.js marcó <html class="intro-play"> (primera página de
   la visita); si no, este bloque queda oculto y no afecta nada. Va 100% en CSS
   para arrancar con el primer pintado, sin esperar a ningún script. */

.intro { display: none; }

html.intro-play .intro {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, #1b1e25 0%, #121419 70%);
  animation: introOut 280ms cubic-bezier(.4, 0, .2, 1) 1.22s forwards;
}
/* Mientras corre, la página de fondo no se desplaza */
html.intro-play body { overflow: hidden; }

.intro-lockup {
  display: flex;
  align-items: center;
  gap: 18px;
  animation: introLeave 320ms cubic-bezier(.55, 0, 1, .45) 1.06s forwards;
}

.intro-mark { position: relative; width: 80px; height: 80px; flex-shrink: 0; }

/* Trazo del electrocardiograma: línea base, onda P, bajada Q y el pico R que
   recorre los dos lados de la "A" (coordenadas medidas sobre el logo). */
.intro-ecg {
  position: absolute;
  left: -150px;
  top: 0;
  width: 250px;
  height: 84px;
  overflow: visible;
}
.intro-ecg path {
  fill: none;
  stroke: var(--accent-2, #e8b579);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 0 6px rgba(232, 181, 121, .75));
  animation:
    ecgDraw 540ms cubic-bezier(.45, 0, .25, 1) 80ms forwards,
    ecgFade 260ms ease-out 620ms forwards;
}

.intro-logo {
  position: absolute;
  inset: 0;
  width: 80px;
  height: 80px;
  opacity: 0;
  transform: scale(.92);
  filter: blur(6px) brightness(1.9);
  animation: logoIn 380ms cubic-bezier(.23, 1, .32, 1) 470ms forwards;
}

.intro-word {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
  clip-path: inset(0 100% 0 0);
  animation: wordWipe 420ms cubic-bezier(.23, 1, .32, 1) 620ms forwards;
}
.intro-word span {
  font-family: var(--font-display, 'Sora', sans-serif);
  font-weight: 600;
  font-size: 2.1rem;
  letter-spacing: -0.02em;
  color: var(--text-0, #f2f4f7);
}
.intro-word small {
  font-family: var(--font-body, 'Manrope', sans-serif);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .32em;
  color: var(--chrome-500, #98a0b2);
}
/* Destello que acompaña el borde del barrido */
.intro-word::after {
  content: '';
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: 0;
  width: 26px;
  background: linear-gradient(90deg, transparent, rgba(232, 181, 121, .55), transparent);
  opacity: 0;
  animation: wordSheen 420ms cubic-bezier(.23, 1, .32, 1) 620ms forwards;
}

@keyframes ecgDraw { to { stroke-dashoffset: 0; } }
@keyframes ecgFade { to { opacity: 0; } }
@keyframes logoIn { to { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); } }
@keyframes wordWipe { to { clip-path: inset(0 0 0 0); } }
@keyframes wordSheen {
  0% { opacity: 1; transform: translateX(0); }
  85% { opacity: 1; }
  100% { opacity: 0; transform: translateX(var(--intro-word-w, 220px)); }
}
@keyframes introLeave { to { opacity: 0; transform: translateX(56px); filter: blur(4px); } }
@keyframes introOut { to { opacity: 0; visibility: hidden; } }

/* Tocar o presionar una tecla la cierra al instante */
html.intro-play .intro.is-skipped { animation: introOut 150ms ease-out forwards; }

@media (max-width: 620px) {
  .intro-lockup { gap: 12px; transform: scale(.82); }
  .intro-lockup { animation-name: introLeaveMobile; }
}
@keyframes introLeaveMobile { from { transform: scale(.82); } to { opacity: 0; transform: scale(.82) translateX(56px); filter: blur(4px); } }

/* ---------- Versión corta: al llegar desde otra página del sitio (~0.9s) ---------- */
html.intro-short .intro { animation-duration: 180ms; animation-delay: .7s; }
html.intro-short .intro-lockup { animation-duration: 220ms; animation-delay: .58s; }
html.intro-short .intro-ecg path {
  animation-duration: 300ms, 150ms;
  animation-delay: 0s, 330ms;
}
html.intro-short .intro-logo { animation-duration: 250ms; animation-delay: 240ms; }
html.intro-short .intro-word,
html.intro-short .intro-word::after { animation-duration: 260ms; animation-delay: 320ms; }

/* ---------- Cortina al salir hacia otra página ---------- */
.page-cover {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, #1b1e25 0%, #121419 70%);
  opacity: 0;
  animation: coverIn 160ms cubic-bezier(.23, 1, .32, 1) forwards;
  pointer-events: none;
}
@keyframes coverIn { to { opacity: 1; } }