/* =========================================================
   enhance.css — capa de animaciones/interacciones.
   Aditiva y reversible. Usa las variables existentes
   (--accent, --accent-soft, --line, etc.) para NO alterar
   colores ni tipografías de la marca.
   ========================================================= */

:root { --ts-ease: cubic-bezier(.2,.7,.2,1); }

/* ---- Scroll reveal (staggered) -------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ts-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .85s var(--ts-ease), transform .85s var(--ts-ease);
    will-change: opacity, transform;
  }
  .ts-reveal.ts-left  { transform: translateX(-34px); }
  .ts-reveal.ts-right { transform: translateX(34px); }
  .ts-reveal.ts-scale {
    transform: perspective(1000px) translateY(46px) scale(.88);
    transition: opacity .7s var(--ts-ease), transform .8s cubic-bezier(.16,1,.3,1);
  }
  .ts-reveal.ts-in    { opacity: 1; transform: none; }
}

/* ---- Cards: lift + halo de acento al hover -------------- */
/* Solo sombra y borde: no recorta nada ni cambia el layout. */
.ts-glow {
  transition: transform .4s var(--ts-ease),
              box-shadow .4s var(--ts-ease),
              border-color .4s var(--ts-ease);
}
.ts-glow:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
  box-shadow: 0 22px 55px -26px var(--accent),
              0 0 0 1px var(--accent-soft);
}

/* ---- Botones: magnéticos + glow sutil de acento -------- */
.btn {
  transition: transform .3s var(--ts-ease),
              background .18s ease,
              border-color .18s ease,
              box-shadow .3s var(--ts-ease);
}
.btn-primary:hover { box-shadow: 0 0 34px -8px rgba(255,255,255,.35); }
.btn-accent:hover  { box-shadow: 0 0 38px -6px var(--accent); }
.btn-ghost:hover   { box-shadow: 0 0 26px -10px var(--accent-soft); }

/* ---- Hero: parallax muy sutil del video ---------------- */
.ts-parallax { will-change: transform; transition: transform .15s linear; }

/* ---- Punto del logo orbitando el centro ---------------- */
.ts-logo-orbit {
  transform-box: view-box;
  transform-origin: 32px 32px;     /* centro del mark */
  animation: tsSpin 5s linear infinite;
}

/* ---- Íconos "caminos": puntos y anillo girando -------- */
.ts-orbit-dot {
  transform-box: view-box;
  transform-origin: 60px 60px;     /* centro del ícono */
  animation: tsSpin 10s linear infinite;
}
.ts-orbit-ring {
  transform-box: view-box;
  transform-origin: 60px 60px;
  animation: tsSpin 28s linear infinite;
}
@keyframes tsSpin { to { transform: rotate(360deg); } }

/* ---- Video de Tessa/Hero: foco al hacer scroll --------- */
.ts-video-focus { position: relative; transition: box-shadow .5s var(--ts-ease); }
.ts-video-focus.ts-lit {
  box-shadow: 0 0 0 1px var(--accent-soft), 0 36px 90px -34px var(--accent);
}
/* anillo de energía giratorio (sensación "EN VIVO") */
.ts-video-focus::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(from 0deg, transparent 0 68%, var(--accent) 84%, 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 .6s var(--ts-ease);
  animation: tsSpin 4s linear infinite;
  pointer-events: none;
  z-index: 2;
}
.ts-video-focus.ts-lit::before { opacity: .9; }

/* Escala suave al enfocar (solo donde no hay parallax, ej. video de Tessa) */
.ts-video-scale { transition: box-shadow .5s var(--ts-ease), transform .6s var(--ts-ease); }
.ts-video-scale.ts-lit { transform: scale(1.025); }

/* ---- Barra de progreso de scroll (acento) -------------- */
#ts-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--accent), #fff);
  box-shadow: 0 0 14px var(--accent);
  z-index: 10000; pointer-events: none;
}

/* =========================================================
   TEMA: Agentes IA + cerebro central + video de fondo global
   ========================================================= */

/* El body deja ver el video fijo de atrás */
html { background: #060607; }
body { background: transparent !important; }

/* Red neuronal viva (canvas) — agente IA atrapado en la web */
#ts-web {
  position: fixed; inset: 0;
  z-index: -3;
  pointer-events: none;
}
/* Scrim sutil de profundidad (ya sin video) */
#ts-bgscrim {
  position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 75% at 50% 0%, rgba(16,185,129,.10), transparent 55%),
    radial-gradient(100% 60% at 50% 100%, rgba(16,185,129,.06), transparent 60%),
    linear-gradient(180deg, rgba(6,6,7,.55) 0%, rgba(6,6,7,.30) 45%, rgba(6,6,7,.60) 100%);
}
/* "Cerebro central" que late en el centro de la pantalla */
#ts-core {
  position: fixed; left: 50%; top: 44%;
  width: 62vmax; height: 62vmax;
  transform: translate(-50%,-50%);
  z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(16,185,129,.05), transparent 60%);
  filter: blur(46px);
  animation: tsCorePulse 7s ease-in-out infinite;
}
@keyframes tsCorePulse {
  0%,100% { opacity: .45; transform: translate(-50%,-50%) scale(1); }
  50%     { opacity: .85; transform: translate(-50%,-50%) scale(1.14); }
}

/* Secciones/paneles "glass": el video se ve a través -------- */
.tessa-section, .suite-section {
  background: rgba(10,10,12,.42) !important;
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
          backdrop-filter: blur(10px) saturate(1.1);
}
.modulo, .camino, .pricing-row, .industria-card, .timeline-step {
  background: rgba(18,18,22,.62) !important;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

/* Botones FULL animados: barrido de luz + pulso de acento --- */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; top: 0; left: -150%;
  width: 60%; height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-20deg);
  pointer-events: none;
}
.btn:hover::after { animation: tsSheen .8s ease forwards; }
@keyframes tsSheen { to { left: 160%; } }
/* Pulso continuo solo en los CTA de acento */
.btn-accent { animation: tsBtnPulse 3.2s ease-in-out infinite; }
@keyframes tsBtnPulse {
  0%,100% { box-shadow: 0 0 0 0 var(--accent-soft); }
  50%     { box-shadow: 0 0 30px -4px var(--accent); }
}
.btn .arrow, .btn svg { transition: transform .3s var(--ts-ease); }
.btn:hover .arrow, .btn:hover svg { transform: translateX(5px); }

/* Cada bloque EMERGE DESDE ATRÁS (profundidad 3D) -------------- */
.ts-reveal.ts-fx {
  opacity: 0;
  transform: translateY(80px) scale(.45);
  transform-origin: 50% 60%;
  filter: blur(22px);
  transition: opacity .8s var(--ts-ease),
              transform 1.05s cubic-bezier(.16,1,.3,1),
              filter .8s var(--ts-ease);
}
.ts-reveal.ts-fx.ts-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  animation: tsSpawn 1s cubic-bezier(.16,1,.3,1);
}
/* destello de energía: como si saliera de un nodo */
@keyframes tsSpawn {
  0%   { box-shadow: 0 0 34px 6px var(--accent); }
  60%  { box-shadow: 0 0 18px 2px var(--accent-soft); }
  100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}

/* Typewriter: letras que se escriben al bajar ------------------ */
.ts-char { opacity: 0; }
.ts-char.on { opacity: 1; transition: opacity .05s linear; }
.ts-typing { position: relative; }
.ts-typing::after {
  content: "▌"; color: var(--accent);
  margin-left: 1px; animation: tsCaret .7s steps(1) infinite;
}
@keyframes tsCaret { 50% { opacity: 0; } }

/* Hero a una sola columna (se quitó el frame de video) ------- */
.hero-grid { grid-template-columns: 1fr !important; }
/* Defensa: oculta el frame del hero aunque el navegador tenga el JSX viejo en caché */
.hero-video { display: none !important; }

/* HUD "el sistema te reconoce" ------------------------------- */
#ts-hud {
  position: fixed; left: 16px; bottom: 16px; z-index: 9998;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--mono, monospace);
  font-size: 11px; letter-spacing: .04em;
  color: var(--ink-dim);
  background: rgba(10,10,12,.55);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 7px 13px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 0 24px -10px var(--accent);
  pointer-events: none;
  animation: tsHudIn .6s var(--ts-ease) both;
}
#ts-hud b { color: var(--ink); font-weight: 500; }
.ts-hud-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes tsHudIn { from { opacity: 0; transform: translateY(10px); } }
@media (max-width: 640px) { #ts-hud { display: none; } }

/* ---- Reduce motion: todo visible, sin movimiento -------- */
@media (prefers-reduced-motion: reduce) {
  .ts-reveal { opacity: 1 !important; transform: none !important;
               filter: none !important; clip-path: none !important; }
  .ts-char { opacity: 1 !important; }
  .ts-typing::after { display: none; }
  .ts-glow:hover { transform: none; }
  .ts-logo-orbit, .ts-orbit-dot, .ts-orbit-ring, .ts-video-focus::before,
  #ts-core, .btn-accent { animation: none; }
  #ts-web, #ts-hud { display: none; }
}