/* Entrada de la portada (Shared/_Intro.cshtml). Va aparte del resto del sitio para que el diseño de la página
 * no la cambie: sus colores oscuros quedan fijos aquí. NO MODIFICAR sin que el autor lo pida. */
.intro {
  --texto: #c9c9d6; --brillante: #f3f3fa; --borde-fuerte: rgba(255, 255, 255, .14);
  font: 16px/1.65 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}

html.intro-activa { overflow: hidden; }
.intro {
  position: fixed; inset: 0; z-index: 100; overflow: hidden; cursor: pointer;
  background:
    radial-gradient(900px 600px at 50% 50%, rgba(75, 70, 200, .28), transparent 70%),
    radial-gradient(1200px 800px at 85% 0%, rgba(0, 120, 212, .16), transparent 60%),
    #05050c;
  transition: opacity .9s ease, transform .9s cubic-bezier(.6, 0, .3, 1), filter .9s ease;
}
.intro.saliendo { opacity: 0; transform: scale(1.18); filter: blur(8px); pointer-events: none; }
.intro-plano { position: absolute; inset: 0; width: 100%; height: 100%; }

/* la cámara se acerca lentamente mientras se dibuja */
.i-dibujo, .i-cuadricula { transform-origin: 800px 450px; animation: i-camara 4.4s cubic-bezier(.3, 0, .2, 1) both; }
@keyframes i-camara { from { transform: scale(.94); } to { transform: scale(1.03); } }
.i-cuadricula { animation: i-camara 4.4s cubic-bezier(.3, 0, .2, 1) both, i-aparecer .9s ease both; }

/* trazos que se dibujan solos (los path llevan pathLength="1") */
.i-muros path, .i-cota path, .i-puertas path, .i-ruta path, .i-ruta-brillo path {
  stroke-dasharray: 1; stroke-dashoffset: 1; animation: i-trazar 1s cubic-bezier(.6, 0, .3, 1) forwards;
}
@keyframes i-trazar { to { stroke-dashoffset: 0; } }
.i-muros path:nth-child(1) { animation-duration: 1.3s; animation-delay: .25s; }
.i-muros path:nth-child(2) { animation-delay: .75s; }
.i-muros path:nth-child(3) { animation-delay: .9s; }
.i-muros path:nth-child(4) { animation-delay: 1.05s; }
.i-muros path:nth-child(5) { animation-delay: 1.15s; }
.i-cota path { animation-duration: .8s; animation-delay: 1.1s; }
.i-cota path:nth-child(2) { animation-delay: 1.25s; }
.i-cota path:nth-child(3) { animation-delay: 1.35s; }
.i-puertas path { animation-duration: .6s; animation-delay: 1.35s; }
.i-puertas path:nth-child(2) { animation-delay: 1.45s; }
.i-puertas path:nth-child(3) { animation-delay: 1.55s; }
.i-puertas path:nth-child(4) { animation-delay: 1.65s; }
.i-ruta path, .i-ruta-brillo path { animation-duration: .9s; animation-delay: 1.85s; }
.i-ruta path:nth-child(n+2), .i-ruta-brillo path:nth-child(n+2) { animation-duration: .5s; animation-delay: 2.35s; }

.i-ventanas, .i-texto { opacity: 0; animation: i-aparecer .6s ease forwards 1.4s; }
.i-recintos { animation-delay: 1.6s; }
.i-luminarias g > * { opacity: 0; transform-box: fill-box; transform-origin: center; animation: i-saltar .45s cubic-bezier(.3, 1.6, .5, 1) forwards; animation-delay: calc(1.7s + var(--n) * .06s); }
.i-enchufe { opacity: 0; animation: i-aparecer .3s ease forwards; animation-delay: calc(2.3s + var(--n) * .12s); }
.i-enchufe > :not(.i-anillo) { transform-box: fill-box; transform-origin: center; animation: i-saltar .45s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: inherit; }
.i-anillo { transform-box: fill-box; transform-origin: center; animation: i-onda 1.4s ease-out infinite; animation-delay: calc(2.3s + var(--n) * .12s); }
.i-tablero { opacity: 0; transform-box: fill-box; transform-origin: center; animation: i-saltar .6s cubic-bezier(.3, 1.6, .5, 1) forwards 2.95s; }
@keyframes i-aparecer { from { opacity: 0; } to { opacity: 1; } }
@keyframes i-saltar { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
@keyframes i-onda { 0% { opacity: .9; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.5); } }

.i-escaner { animation: i-barrer 2.6s cubic-bezier(.5, 0, .5, 1) forwards .15s; }
@keyframes i-barrer { from { transform: translateX(0); } to { transform: translateX(2120px); } }

/* logo con neón al centro, cuando el plano ya está dibujado */
.intro-marca { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; padding: 16px; }
.intro-marca::before { /* oscurece el plano detrás del logo para que el neón resalte */
  content: ""; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(min(46vw, 560px) min(34vw, 400px) at 50% 50%, rgba(3, 3, 10, .88), rgba(3, 3, 10, .55) 55%, transparent 80%);
  animation: i-aparecer .8s ease forwards 2.9s;
}
.intro-logo { position: relative; width: min(500px, 74vw); opacity: 0; animation: i-encender 1.1s linear forwards 3.05s; }
.intro-logo img {
  width: 100%; height: auto;
  /* contorno de neón: blanco pegado al borde y azul hacia afuera (cada sombra suma a la anterior) */
  filter:
    drop-shadow(0 0 1px #f2f8ff) drop-shadow(0 0 2px #bfe0ff)
    drop-shadow(0 0 6px #4aa3ff) drop-shadow(0 0 16px #0078d4) drop-shadow(0 0 34px rgba(60, 90, 255, .7));
  animation: i-latir 2.6s ease-in-out infinite 4.2s;
}
/* parpadeo de tubo al encenderse */
@keyframes i-encender {
  0% { opacity: 0; transform: scale(.97); }
  8% { opacity: .85; } 12% { opacity: .1; } 20% { opacity: .95; } 24% { opacity: .25; }
  34% { opacity: 1; } 38% { opacity: .55; } 46%, 100% { opacity: 1; transform: none; }
}
@keyframes i-latir { 50% { filter:
    drop-shadow(0 0 1px #ffffff) drop-shadow(0 0 3px #d4eaff)
    drop-shadow(0 0 9px #6cb8ff) drop-shadow(0 0 24px #0a84ff) drop-shadow(0 0 48px rgba(60, 90, 255, .85)); } }

/* rótulo de la lámina y botón saltar */
.intro-rotulo {
  position: absolute; right: 24px; bottom: 22px; display: flex; border: 1px solid rgba(160, 170, 240, .35);
  font: 600 .7rem/1 Consolas, "Cascadia Mono", monospace; letter-spacing: .12em; color: #9aa0d6;
  background: rgba(5, 5, 12, .6); opacity: 0; animation: i-aparecer .6s ease forwards 1.2s;
}
.intro-rotulo span { padding: 9px 12px; }
.intro-rotulo span + span { border-left: 1px solid rgba(160, 170, 240, .35); }
.intro-saltar {
  position: absolute; left: 24px; bottom: 20px; padding: 8px 14px; border-radius: 99px; cursor: pointer;
  border: 1px solid var(--borde-fuerte); background: rgba(255, 255, 255, .05); color: var(--texto); font: inherit; font-size: .85rem;
}
.intro-saltar:hover { color: var(--brillante); background: rgba(255, 255, 255, .1); }
/* celular vertical: plano en la mitad de arriba, logo abajo */
.intro.vertical .intro-plano { top: 7%; height: 52%; }
.intro.vertical .intro-marca { place-items: end center; }
.intro.vertical .intro-marca { padding-bottom: 130px; }
.intro.vertical .intro-logo { width: min(300px, 74vw); }
.intro.vertical .intro-marca::before { background: radial-gradient(70vw 34vh at 50% 78%, rgba(3, 3, 10, .9), rgba(3, 3, 10, .5) 55%, transparent 80%); }
@media (max-width: 700px) { .intro-rotulo span:nth-child(2) { display: none; } .intro-rotulo { right: 16px; } .intro-saltar { left: 16px; } }