/* SISTENET — motion.css
   Helpers de animación signature: circuito, tilt, spotlight, gradient border, puertas. */

/* @property permite animar el ángulo del gradiente en el border */
@property --angulo {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

/* ═════════════════════════════════════════════════
   Circuito vivo — trazo dibujable + nodos pulsantes
   ═════════════════════════════════════════════════ */
.circuito__trazos path {
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: circuitoDibuja 1400ms cubic-bezier(.65,0,.35,1) forwards;
}
.circuito__trazos path:nth-child(1)  { animation-delay: 100ms; }
.circuito__trazos path:nth-child(2)  { animation-delay: 180ms; }
.circuito__trazos path:nth-child(3)  { animation-delay: 260ms; }
.circuito__trazos path:nth-child(4)  { animation-delay: 340ms; }
.circuito__trazos path:nth-child(5)  { animation-delay: 420ms; }
.circuito__trazos path:nth-child(6)  { animation-delay: 140ms; }
.circuito__trazos path:nth-child(7)  { animation-delay: 220ms; }
.circuito__trazos path:nth-child(8)  { animation-delay: 300ms; }
.circuito__trazos path:nth-child(9)  { animation-delay: 380ms; }
.circuito__trazos path:nth-child(10) { animation-delay: 460ms; }
.circuito__trazos path:nth-child(n+11) { animation-delay: 540ms; }

@keyframes circuitoDibuja {
  to { stroke-dashoffset: 0; }
}

.circuito__nodos .nodo {
  opacity: 0;
  transform-origin: center;
  animation: nodoEntra 400ms cubic-bezier(.34,1.56,.64,1) forwards,
             nodoPulso 3.6s ease-in-out infinite;
}
.circuito__nodos .nodo:nth-child(2n)  { animation-delay: 900ms, 900ms; }
.circuito__nodos .nodo:nth-child(3n)  { animation-delay: 1100ms, 1300ms; }
.circuito__nodos .nodo:nth-child(4n)  { animation-delay: 1300ms, 1700ms; }
.circuito__nodos .nodo:nth-child(5n)  { animation-delay: 1500ms, 2100ms; }

@keyframes nodoEntra {
  from { opacity: 0; transform: scale(0); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes nodoPulso {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(96,165,250,0)); }
  50%      { filter: drop-shadow(0 0 6px rgba(96,165,250,0.9)); }
}

.circuito__chip {
  opacity: 0;
  animation: chipEntra 700ms cubic-bezier(.2,.7,.3,1) 60ms forwards;
}
@keyframes chipEntra {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

/* Divisor de circuito entre secciones — el trazo se dibuja al entrar en viewport */
.divisor-circuito path {
  stroke-dasharray: 300;
  stroke-dashoffset: 300;
  transition: stroke-dashoffset 1200ms cubic-bezier(.65,0,.35,1);
}
.divisor-circuito.is-in path { stroke-dashoffset: 0; }

/* ═════════════════════════════════════════════════
   Tilt 3D — set en JS con quickTo
   ═════════════════════════════════════════════════ */
.tilt {
  transform-style: preserve-3d;
  transition: transform 600ms cubic-bezier(.2,.7,.3,1);
  will-change: transform;
}
.tilt__contenido {
  transform: translateZ(20px);
  transition: transform 600ms cubic-bezier(.2,.7,.3,1);
}

/* ═════════════════════════════════════════════════
   Spotlight follow cursor
   ═════════════════════════════════════════════════ */
.spotlight { position: relative; overflow: hidden; }
.spotlight::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%),
              rgba(96,165,250,0.18), transparent 40%);
  opacity: 0;
  transition: opacity 280ms ease-out;
  pointer-events: none;
  z-index: 1;
}
.spotlight:hover::before, .spotlight:focus-within::before { opacity: 1; }
.spotlight > * { position: relative; z-index: 2; }

/* ═════════════════════════════════════════════════
   Gradient border animado — cinta de circuito
   ═════════════════════════════════════════════════ */
.gradient-border {
  position: relative;
  isolation: isolate;
}
.gradient-border::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--angulo, 0deg),
              transparent 0%, transparent 60%,
              #60A5FA 75%, #2563EB 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity 280ms ease-out;
  pointer-events: none;
  z-index: 0;
}
.gradient-border:hover::after, .gradient-border:focus-within::after {
  opacity: 1;
  animation: bordeGira 4s linear infinite;
}
@keyframes bordeGira { to { --angulo: 360deg; } }

/* ═════════════════════════════════════════════════
   Lightbox estilo "puertas del ascensor separándose"
   ═════════════════════════════════════════════════ */
.lightbox--puertas .puerta {
  position: absolute;
  top: 0; bottom: 0;
  width: 50%;
  background: linear-gradient(90deg, #0B0F1A, #143A7A);
  z-index: 2;
  transition: transform 420ms cubic-bezier(.65,0,.35,1);
}
.lightbox--puertas .puerta--izq { left: 0; transform-origin: left; }
.lightbox--puertas .puerta--der { right: 0; transform-origin: right; }

.lightbox--puertas:not(.is-open) .puerta { transform: translateX(0); }
.lightbox--puertas.is-open .puerta--izq { transform: translateX(-100%); }
.lightbox--puertas.is-open .puerta--der { transform: translateX(100%); }

/* ═════════════════════════════════════════════════
   Reveals verticales — más agresivos que la base
   ═════════════════════════════════════════════════ */
.reveal--strong {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 620ms cubic-bezier(.2,.7,.3,1),
              transform 620ms cubic-bezier(.2,.7,.3,1);
}
.reveal--strong.is-in { opacity: 1; transform: none; }

/* ═════════════════════════════════════════════════
   ZOOM-IN — tarjetas que se acercan al usuario al scroll
   Aplica a .zoom-in (típicamente los servicios bento).
   Usan una perspectiva compartida: escala + translate Z simulado
   con transform-origin center y ligero blur al inicio.
   ═════════════════════════════════════════════════ */
.zoom-in {
  opacity: 0;
  transform: scale(0.82) translateY(60px);
  filter: blur(6px);
  transition:
    opacity 780ms cubic-bezier(.2,.7,.3,1),
    transform 900ms cubic-bezier(.2,.7,.3,1),
    filter 700ms cubic-bezier(.2,.7,.3,1);
  will-change: transform, opacity, filter;
}
.zoom-in.is-in {
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
}
.zoom-in[data-delay="1"] { transition-delay: 60ms, 60ms, 60ms; }
.zoom-in[data-delay="2"] { transition-delay: 180ms, 180ms, 180ms; }
.zoom-in[data-delay="3"] { transition-delay: 300ms, 300ms, 300ms; }
.zoom-in[data-delay="4"] { transition-delay: 420ms, 420ms, 420ms; }

/* Alternativa: zoom-in-lento (para sección completa como el section__head) */
.zoom-slow {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 900ms cubic-bezier(.2,.7,.3,1),
              transform 1100ms cubic-bezier(.2,.7,.3,1);
}
.zoom-slow.is-in { opacity: 1; transform: none; }

/* Fondo perspectiva para el bloque de servicios — refuerza sensación 3D */
.perspectiva { perspective: 1400px; perspective-origin: 50% 30%; }

@media (prefers-reduced-motion: reduce) {
  .zoom-in, .zoom-slow {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ═════════════════════════════════════════════════
   Ticker técnico horizontal
   ═════════════════════════════════════════════════ */
.ticker {
  overflow: hidden;
  background: var(--noche);
  color: var(--electrico);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(96,165,250,0.15);
  border-top: 1px solid rgba(96,165,250,0.08);
  height: 30px;
  display: flex;
  align-items: center;
}
.ticker__track {
  display: flex;
  gap: var(--s-8);
  padding-left: var(--s-6);
  white-space: nowrap;
  animation: tickerScroll 42s linear infinite;
}
.ticker__item { display: inline-flex; align-items: center; gap: var(--s-3); }
.ticker__item::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--exito);
  box-shadow: 0 0 6px rgba(16,185,129,0.9);
  animation: tickerPulso 1.8s ease-in-out infinite;
}
.ticker__item--amber::before { background: var(--acento); box-shadow: 0 0 6px rgba(245,158,11,.9); }
@keyframes tickerScroll { to { transform: translateX(-50%); } }
@keyframes tickerPulso { 0%,100% { opacity: 1 } 50% { opacity: 0.35 } }

/* ═════════════════════════════════════════════════
   Header sway (balance del logo al pasar el cursor)
   ═════════════════════════════════════════════════ */
.cabecera .marca img {
  transition: transform 500ms cubic-bezier(.34,1.56,.64,1);
}
.cabecera .marca:hover img { transform: translateY(-2px) rotate(-2deg); }

/* ═════════════════════════════════════════════════
   Motion opt-out — respeta prefers-reduced-motion
   ═════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .circuito__trazos path { stroke-dashoffset: 0 !important; animation: none !important; }
  .circuito__nodos .nodo { opacity: 1 !important; animation: none !important; }
  .circuito__chip { opacity: 1 !important; animation: none !important; }
  .divisor-circuito path { stroke-dashoffset: 0 !important; }
  .tilt, .tilt__contenido { transform: none !important; transition: none !important; }
  .spotlight::before { display: none !important; }
  .gradient-border::after { animation: none !important; opacity: 1 !important; }
  .lightbox--puertas .puerta { transition-duration: 0.01ms !important; }
  .ticker__track { animation: none !important; }
  .cabecera .marca img { transition: none !important; }
}