/* ============================================================
   WTECH — Animaciones y efectos dinámicos
   "Todo debe brillar"
   ============================================================ */

/* ---- Keyframes base ---- */
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.65}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes navDrop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
@keyframes floatX{0%,100%{transform:translateX(0)}50%{transform:translateX(14px)}}
@keyframes spinSlow{to{transform:rotate(360deg)}}

/* ---- Reveal al hacer scroll ---- */
.reveal{opacity:0;transform:translateY(30px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
.reveal.vis{opacity:1;transform:translateY(0);}
.reveal-l{opacity:0;transform:translateX(-34px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
.reveal-l.vis{opacity:1;transform:translateX(0);}
.reveal-r{opacity:0;transform:translateX(34px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
.reveal-r.vis{opacity:1;transform:translateX(0);}
.reveal-sc{opacity:0;transform:scale(.94);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);}
.reveal-sc.vis{opacity:1;transform:scale(1);}

/* ---- Orbes flotantes de fondo (aurora verde) ---- */
.aurora{position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;z-index:0;opacity:.55;}
.aurora.a1{width:460px;height:460px;top:-140px;right:-120px;background:radial-gradient(circle,rgba(34,197,94,.35),transparent 70%);animation:floatY 11s ease-in-out infinite;}
.aurora.a2{width:380px;height:380px;bottom:-120px;left:-90px;background:radial-gradient(circle,rgba(20,184,166,.28),transparent 70%);animation:floatX 13s ease-in-out infinite;}
.aurora.a3{width:300px;height:300px;top:30%;left:40%;background:radial-gradient(circle,rgba(132,204,22,.18),transparent 70%);animation:floatY 15s ease-in-out infinite;}

/* ---- Malla de puntos sutil ---- */
.dot-grid{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(22,163,74,.14) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000,transparent 75%);
  mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,#000,transparent 75%);}

/* ---- Brillo / shimmer que recorre ---- */
@keyframes shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.shine{position:relative;overflow:hidden;}
.shine::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);transition:none;}
.shine:hover::after{animation:sweep .9s ease;}
@keyframes sweep{from{left:-60%}to{left:130%}}

/* ---- Texto con gradiente animado ---- */
@keyframes hueShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.grad-animate{
  background:linear-gradient(90deg,var(--green-700),var(--green-500),var(--emer-500),var(--green-600),var(--green-700));
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:hueShift 6s ease infinite;}

/* ---- Contador stat: latido de brillo ---- */
@keyframes numGlow{0%,100%{text-shadow:0 0 0 rgba(34,197,94,0)}50%{text-shadow:0 0 22px rgba(34,197,94,.35)}}
.stat-num,.kn,.ys-total,.pstat-num{animation:numGlow 4.5s ease-in-out infinite;}

/* ---- Halo pulsante para badges "en vivo" ---- */
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}70%{box-shadow:0 0 0 12px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.live-ring{animation:ring 2.2s ease-out infinite;}

/* ---- Botón con resplandor pulsante ---- */
@keyframes glowPulse{0%,100%{box-shadow:0 8px 26px rgba(22,163,74,.35)}50%{box-shadow:0 10px 40px rgba(34,197,94,.6)}}
.btn-glow{animation:glowPulse 2.6s ease-in-out infinite;}

/* ---- Barra superior de gradiente animado ---- */
.topbar{height:3px;width:100%;background:linear-gradient(90deg,var(--green-600),var(--emer-500),var(--lime),var(--green-500));background-size:300% 100%;animation:hueShift 5s linear infinite;}

/* ---- Tilt: preparado por JS ---- */
.tilt{transition:transform .18s ease;transform-style:preserve-3d;will-change:transform;}

/* ---- Aparición de barras (métricas) ---- */
.bar-fill{transform-origin:left;}

/* ---- Iconos con micro animación en hover ---- */
.mv-icon{transition:transform .35s cubic-bezier(.34,1.56,.64,1);}
.mv-card:hover .mv-icon{transform:translateY(-4px) rotate(-4deg);}

/* ---- Respeta usuarios con movimiento reducido ---- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important;}
  .aurora,.marquee-track{animation:none!important;}
}

/* ============================================================
   EFECTOS NIVEL A  (red de partículas + view transitions)
   Para revertir: elimina todo este bloque.
   ============================================================ */

/* Canvas de red de partículas dentro de los hero */
.fx-net{position:absolute;inset:0;z-index:1;pointer-events:none;}
.hero .fx-net,.sup-hero .fx-net,.page-hero .fx-net{opacity:.9;}
/* La malla de puntos se atenúa para no competir con las partículas */
.hero .dot-grid,.sup-hero .dot-grid,.page-hero .dot-grid{opacity:.3;}

/* Transiciones entre páginas (mejora progresiva; navegadores sin soporte navegan normal) */
@view-transition{navigation:auto;}
@keyframes vt-in{from{opacity:0;transform:translateY(8px)}}
@keyframes vt-out{to{opacity:0;transform:translateY(-8px)}}
::view-transition-old(root){animation:vt-out .26s cubic-bezier(.4,0,.2,1) both;}
::view-transition-new(root){animation:vt-in .34s cubic-bezier(.16,1,.3,1) both;}

@media(prefers-reduced-motion:reduce){
  ::view-transition-old(root),::view-transition-new(root){animation:none;}
}