/* =========================================================
   ECOSIGNAL — SpaceX Motion Pack (CSS)
   Archivo: animaciones.css
   ========================================================= */

/* Accesibilidad: respeta reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important; scroll-behavior:auto !important; }
}

/* ---------- 0) Fondo Space / Stars (ultraligero) ---------- */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 18% 12%, rgba(33,196,255,.12), transparent 45%),
    radial-gradient(circle at 82% 78%, rgba(33,196,255,.08), transparent 45%),
    radial-gradient(circle, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size:auto, auto, 140px 140px;
  opacity:.55;
}

body::after{
  content:"";
  position:fixed;
  inset:-35%;
  pointer-events:none;
  z-index:-1;
  background: radial-gradient(circle at 50% 40%, rgba(33,196,255,.12), transparent 55%);
  filter: blur(26px);
  opacity:.35;
}

/* ---------- 1) Micro scanlines + noise (muy sutil) ---------- */
.space-overlay{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:2;
  opacity:.14;
  mix-blend-mode: overlay;
  background:
    linear-gradient(to bottom, rgba(255,255,255,.03), rgba(255,255,255,0) 40%),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.02) 0px,
      rgba(255,255,255,.02) 1px,
      transparent 2px,
      transparent 6px
    );
}

/* ---------- 2) Nav “shrink” on scroll ---------- */
.nav{
  transition: height .25s ease, background .25s ease, border-color .25s ease;
}
.nav.nav--compact{
  height: 62px;
  background: rgba(2,4,10,.88);
  border-bottom-color: rgba(255,255,255,.08);
}

/* ---------- 3) Logo “soft glow” ---------- */
.brand-logo{
  filter: drop-shadow(0 0 14px rgba(33,196,255,.22));
  transition: transform .18s ease, filter .18s ease;
}
.nav-brand:hover .brand-logo{
  transform: translateY(-1px);
  filter: drop-shadow(0 0 18px rgba(33,196,255,.35));
}

/* ---------- 4) Botones SpaceX hover ---------- */
.btn{
  position:relative;
  overflow:hidden;
}
.btn::after{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.22), transparent 55%);
  opacity:0;
  transition: opacity .18s ease;
}
.btn:hover::after{ opacity:1; }

/* ---------- 5) Cards hover “lift + rim light” ---------- */
.plan-card, .tech-card, .about-card, .contact-card, .hero-card{
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.plan-card:hover, .tech-card:hover, .about-card:hover, .contact-card:hover{
  transform: translateY(-4px);
  border-color: rgba(33,196,255,.35);
  box-shadow: 0 18px 60px rgba(0,0,0,.55);
}

/* ---------- 6) Scroll Reveal (entrada pro) ---------- */
.reveal{
  opacity:0;
  transform: translateY(18px) scale(.985);
  filter: blur(3px);
  transition: opacity .7s ease, transform .7s ease, filter .7s ease;
  will-change: opacity, transform, filter;
}
.reveal.show{
  opacity:1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}
.reveal.delay-1{ transition-delay:.08s; }
.reveal.delay-2{ transition-delay:.16s; }
.reveal.delay-3{ transition-delay:.24s; }

/* ---------- 7) Hero “telemetry” (orbit motion) ---------- */
@keyframes drift1 { 0%{transform:translate(0,0)} 50%{transform:translate(10px,-8px)} 100%{transform:translate(0,0)} }
@keyframes drift2 { 0%{transform:translate(0,0)} 50%{transform:translate(-12px,10px)} 100%{transform:translate(0,0)} }
@keyframes pulse  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.22)} }
@keyframes spinSoft { from{ transform: rotate(-14deg);} to{ transform: rotate(346deg);} }

.orbit-path{ animation: spinSoft 18s linear infinite; }
.orbit-node.n1{ animation: drift1 5.5s ease-in-out infinite, pulse 1.8s ease-in-out infinite; }
.orbit-node.n2{ animation: drift2 6.1s ease-in-out infinite, pulse 2.2s ease-in-out infinite; }
.orbit-node.n3{ animation: drift1 7.1s ease-in-out infinite, pulse 2.0s ease-in-out infinite; }
.orbit-node.n4{ animation: drift2 6.7s ease-in-out infinite, pulse 2.5s ease-in-out infinite; }

/* ---------- 8) Badge ONLINE “beacon” ---------- */
@keyframes beacon {
  0%,100%{ box-shadow: 0 0 10px rgba(33,196,255,.18); }
  50%    { box-shadow: 0 0 28px rgba(33,196,255,.42); }
}
.hero-card-badge{ animation: beacon 1.9s ease-in-out infinite; }

/* ---------- 9) Parallax hooks (JS mueve estos) ---------- */
.parallax{
  transform: translate3d(var(--px,0), var(--py,0), 0);
  will-change: transform;
}