/* ===== Viautonoma · Loader inmersivo + coreografía de entrada =====
   Secuencia: la marca se traza → aparece el nombre → la barra completa →
   el velo se abre y el hero entra escalonado.

   Reglas de la casa que respeta (mismas que el shader de fondo):
   · Sin JS no existe: la clase .vla-gate la pone /assets/loader.js.
   · prefers-reduced-motion: se salta entero.
   · Solo en la primera visita de la sesión (sessionStorage).
   · Tope duro: nunca retiene el contenido más de 1,6 s.
   · Funciona igual en tema claro y oscuro (usa los tokens de home.css). */

/* Por defecto no existe. Solo loader.js lo enciende. */
#vla-loader{display:none}
html.vla-gate{overflow:hidden}
html.vla-gate #vla-loader{display:flex}

#vla-loader{
  position:fixed;inset:0;z-index:9999;
  flex-direction:column;align-items:center;justify-content:center;
  gap:26px;
  background:var(--bg,#06070a);
  transition:opacity .75s var(--ease,cubic-bezier(.22,1,.36,1)),
             visibility .75s var(--ease,cubic-bezier(.22,1,.36,1));
}

/* Halo de marca que respira detrás de todo */
#vla-loader::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 45% at 50% 46%,
    rgba(59,130,246,.20), rgba(6,182,212,.08) 45%, transparent 72%);
  animation:vla-breathe 3.2s ease-in-out infinite alternate;
}
:root[data-theme="light"] #vla-loader::before{
  background:radial-gradient(ellipse 55% 45% at 50% 46%,
    rgba(37,99,235,.10), rgba(8,145,178,.05) 45%, transparent 72%);
}

/* ---------- La marca ---------- */
.vla-mark{
  position:relative;width:92px;height:92px;
  display:flex;align-items:center;justify-content:center;
  animation:vla-mark-in .85s var(--ease,cubic-bezier(.22,1,.36,1)) both;
}
/* Anillo que gira: dos arcos del degradado de marca */
.vla-mark::before{
  content:"";position:absolute;inset:-14px;border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0deg, rgba(6,182,212,.85) 40deg, transparent 110deg,
    transparent 180deg, rgba(16,185,129,.75) 220deg, transparent 290deg);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 2px));
  animation:vla-spin 2.4s linear infinite;
}
/* La cápsula con el degradado, igual que .mark del nav */
.vla-mark-in{
  position:relative;width:100%;height:100%;border-radius:28px;
  display:flex;align-items:center;justify-content:center;
  background:var(--grad-primary,linear-gradient(135deg,#06b6d4 0%,#3b82f6 55%,#10b981 100%));
  box-shadow:0 12px 44px rgba(59,130,246,.42);
}
.vla-mark svg{width:62%;height:62%;overflow:visible}
/* Los dos trazos de la V se dibujan solos */
.vla-mark svg path{
  stroke-dasharray:100;stroke-dashoffset:100;
  animation:vla-draw .95s var(--ease,cubic-bezier(.22,1,.36,1)) forwards;
}
.vla-mark svg path.vla-p1{animation-delay:.18s}
.vla-mark svg path.vla-p2{animation-delay:.46s}

/* ---------- El nombre ---------- */
.vla-word{
  display:flex;gap:.02em;
  font-family:var(--fd,"Space Grotesk","Inter",system-ui,sans-serif);
  font-weight:700;font-size:clamp(1.5rem,4.4vw,2.1rem);
  letter-spacing:-.02em;color:var(--ink,#f4f4fb);
}
.vla-word span{
  display:inline-block;opacity:0;transform:translateY(14px);
  animation:vla-letter .62s var(--ease,cubic-bezier(.22,1,.36,1)) forwards;
}
/* Escalonado de las 10 letras */
.vla-word span:nth-child(1){animation-delay:.62s}
.vla-word span:nth-child(2){animation-delay:.66s}
.vla-word span:nth-child(3){animation-delay:.70s}
.vla-word span:nth-child(4){animation-delay:.74s}
.vla-word span:nth-child(5){animation-delay:.78s}
.vla-word span:nth-child(6){animation-delay:.82s}
.vla-word span:nth-child(7){animation-delay:.86s}
.vla-word span:nth-child(8){animation-delay:.90s}
.vla-word span:nth-child(9){animation-delay:.94s}
.vla-word span:nth-child(10){animation-delay:.98s}

/* ---------- La barra ---------- */
.vla-bar{
  position:relative;width:min(190px,42vw);height:2px;border-radius:2px;
  background:var(--border,rgba(255,255,255,.09));overflow:hidden;
  opacity:0;animation:vla-fade .5s var(--ease,cubic-bezier(.22,1,.36,1)) .58s forwards;
}
.vla-bar i{
  position:absolute;inset:0;transform-origin:left center;
  transform:scaleX(0);
  background:var(--grad-primary,linear-gradient(135deg,#06b6d4 0%,#3b82f6 55%,#10b981 100%));
  box-shadow:0 0 14px rgba(6,182,212,.65);
  transition:transform .45s var(--ease,cubic-bezier(.22,1,.36,1));
}

/* ---------- La salida ---------- */
html.vla-out #vla-loader{opacity:0;visibility:hidden}
html.vla-out .vla-mark{transform:scale(1.06);transition:transform .75s var(--ease,cubic-bezier(.22,1,.36,1))}

/* ---------- La entrada del hero ---------- */
html.vla-gate .hero > *{opacity:0;transform:translateY(22px)}
html.vla-gate.vla-in .hero > *{
  opacity:1;transform:none;
  transition:opacity .85s var(--ease,cubic-bezier(.22,1,.36,1)),
             transform .85s var(--ease,cubic-bezier(.22,1,.36,1));
}
html.vla-gate.vla-in .hero > *:nth-child(1){transition-delay:.06s}
html.vla-gate.vla-in .hero > *:nth-child(2){transition-delay:.16s}
html.vla-gate.vla-in .hero > *:nth-child(3){transition-delay:.26s}
html.vla-gate.vla-in .hero > *:nth-child(4){transition-delay:.36s}
html.vla-gate.vla-in .hero > *:nth-child(5){transition-delay:.44s}
html.vla-gate.vla-in .hero > *:nth-child(6){transition-delay:.52s}
html.vla-gate.vla-in .hero > *:nth-child(7){transition-delay:.60s}
/* La nav baja justo detrás del hero */
html.vla-gate .nav{opacity:0;transform:translateY(-14px)}
html.vla-gate.vla-in .nav{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease,cubic-bezier(.22,1,.36,1)) .02s,
             transform .7s var(--ease,cubic-bezier(.22,1,.36,1)) .02s;
}

/* ---------- Animaciones ---------- */
@keyframes vla-draw{to{stroke-dashoffset:0}}
@keyframes vla-spin{to{transform:rotate(360deg)}}
@keyframes vla-breathe{from{opacity:.55}to{opacity:1}}
@keyframes vla-fade{to{opacity:1}}
@keyframes vla-letter{to{opacity:1;transform:none}}
@keyframes vla-mark-in{
  from{opacity:0;transform:scale(.86)}
  to{opacity:1;transform:scale(1)}
}

/* ---------- Accesibilidad: nunca por delante de la persona ---------- */
@media (prefers-reduced-motion: reduce){
  #vla-loader{display:none !important}
  html.vla-gate{overflow:auto}
  html.vla-gate .hero > *,
  html.vla-gate .nav{opacity:1;transform:none;transition:none}
  .vla-mark,.vla-mark::before,.vla-word span,.vla-bar{animation:none}
}