/* ============================================================
   JARVIS MOTION KIT · v1 · CSS
   Kit de movimiento propio (reemplaza comprar plantillas tipo motionsites).
   Vanilla, cero dependencias, ~4 KB. Sirve para marcas propias y clientes.
   Uso: <link rel="stylesheet" href="jarvis-motion.css">
   Variables a sobreescribir por marca (definir en :root del sitio):
     --jm-bg     fondo base            --jm-accent  color de acento
     --jm-line   bordes                --jm-glass   tinte del vidrio
   ============================================================ */
:root{
  --jm-bg:#0A1628; --jm-accent:#06B6D4; --jm-line:rgba(94,145,190,.20);
  --jm-glass-1:rgba(16,32,54,.62); --jm-glass-2:rgba(9,19,34,.52);
  --jm-ease:cubic-bezier(.16,1,.3,1);
}

/* ── 1. FONDO ANIMADO (video o imagen) ─────────────────────── */
.jm-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:var(--jm-bg)}
.jm-bg video,.jm-bg img{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) scale(var(--jm-scale,1.04));
  min-width:100%;min-height:100%;width:auto;height:auto;object-fit:cover;
  opacity:var(--jm-bg-opacity,.7);will-change:transform;
}
/* velo de legibilidad: oscuro donde va el texto, despejado donde va el arte */
.jm-bg::after{content:'';position:absolute;inset:0;background:
  linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.58) 42%,rgba(0,0,0,.10) 100%),
  linear-gradient(180deg,rgba(0,0,0,.50) 0%,rgba(0,0,0,.08) 35%,rgba(0,0,0,.18) 65%,rgba(0,0,0,.78) 100%)}
.jm-bg.jm-center::after{background:
  radial-gradient(70% 60% at 50% 50%,transparent 0,rgba(0,0,0,.55) 88%),
  linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 30%,transparent 70%,rgba(0,0,0,.75) 100%)}

/* ── 2. TARJETAS DE VIDRIO ─────────────────────────────────── */
.jm-glass{
  background:linear-gradient(180deg,var(--jm-glass-1),var(--jm-glass-2));
  backdrop-filter:blur(14px) saturate(1.15);-webkit-backdrop-filter:blur(14px) saturate(1.15);
  border:1px solid var(--jm-line);border-radius:16px;
  transition:transform .3s var(--jm-ease),border-color .3s,box-shadow .3s;
}
.jm-glass:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--jm-accent) 55%,transparent);
  box-shadow:0 18px 48px rgba(0,0,0,.5),0 0 0 1px color-mix(in srgb,var(--jm-accent) 12%,transparent)}

/* ── 3. APARICION AL SCROLL ────────────────────────────────── */
/* SEGURIDAD: el contenido solo se oculta si el JS confirmo que corre (html.jm-on).
   Si el JS falla, no carga o el navegador no soporta el observador, TODO queda
   visible. Nunca se puede perder contenido por una animacion. */
html.jm-on [data-jm-reveal]{opacity:0;transform:translateY(24px);
  transition:opacity .75s var(--jm-ease),transform .75s var(--jm-ease)}
html.jm-on [data-jm-reveal].jm-in{opacity:1;transform:none}
html.jm-on [data-jm-reveal="left"]{transform:translateX(-28px)}
html.jm-on [data-jm-reveal="right"]{transform:translateX(28px)}
html.jm-on [data-jm-reveal="zoom"]{transform:scale(.94)}
html.jm-on [data-jm-reveal="left"].jm-in,
html.jm-on [data-jm-reveal="right"].jm-in,
html.jm-on [data-jm-reveal="zoom"].jm-in{transform:none}

/* ── 4. TEXTO QUE SE ARMA PALABRA POR PALABRA ──────────────── */
html.jm-on .jm-words > span{display:inline-block;opacity:0;transform:translateY(.5em);
  transition:opacity .6s var(--jm-ease),transform .6s var(--jm-ease)}
html.jm-on .jm-words.jm-in > span{opacity:1;transform:none}

/* ── 5. BARRA DE PROGRESO DE LECTURA ───────────────────────── */
.jm-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--jm-accent),color-mix(in srgb,var(--jm-accent) 55%,white));
  box-shadow:0 0 12px color-mix(in srgb,var(--jm-accent) 70%,transparent)}

/* ── 6. BRILLO QUE SIGUE AL CURSOR (opcional, desktop) ─────── */
.jm-spot{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(340px circle at var(--jm-mx,50%) var(--jm-my,50%),
    color-mix(in srgb,var(--jm-accent) 12%,transparent),transparent 70%)}

/* ── 7. MARQUESINA INFINITA (logos, claims) ────────────────── */
.jm-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.jm-marquee > div{display:flex;gap:var(--jm-gap,48px);width:max-content;animation:jm-slide var(--jm-speed,28s) linear infinite}
.jm-marquee:hover > div{animation-play-state:paused}
@keyframes jm-slide{to{transform:translateX(-50%)}}

/* ── 8. ACCESIBILIDAD Y MOVIL ──────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  [data-jm-reveal],.jm-words > span{opacity:1 !important;transform:none !important;transition:none}
  .jm-bg video{display:none}
  .jm-marquee > div{animation:none}
}
@media (max-width:860px){
  .jm-bg video{display:none}          /* movil: poster estatico, ahorra datos */
  .jm-spot{display:none}
}
@media (min-width:861px){ .jm-bg img.jm-poster{display:none} }