/* =====================================================================
   WormShop — Capa NEON Motion & UX  (ws-motion-ux.css)
   ---------------------------------------------------------------------
   Se carga SIEMPRE al final (después de ws-archive.css y ws-storefront.css)
   para poder afinar movimiento e interacción sin tocar ninguna de las dos
   hojas grandes ni el markup.

   REGLAS DE RENDIMIENTO QUE CUMPLE ESTA HOJA (no romperlas al editar):
     · Solo se animan `transform` y `opacity` (propiedades de compositor:
       no provocan layout ni repaint).
     · CERO animación de box-shadow, filter, blur, background o color.
     · `will-change` solo en los 3 elementos realmente animados en bucle
       del hero. En ningún otro sitio.
     · Todo el movimiento del hero se PAUSA cuando el hero sale de pantalla
       (clase .ws-motion-idle que pone assets/js/ws-hero-motion.js).
     · Respeta prefers-reduced-motion y prefers-reduced-data.
   ===================================================================== */

/* Duraciones/curvas únicas para que todas las microinteracciones se sientan
   parte del mismo sistema. */
:root {
  --ws-t-fast: 140ms;
  --ws-t-base: 200ms;
  --ws-t-slow: 320ms;
  --ws-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* =====================================================================
   1. HERO ORBITAL — movimiento vivo y barato
   ===================================================================== */

/* Cada anillo conserva su rotación base y gira desde ahí: así el óvalo
   inclinado sigue viéndose igual, solo que ahora orbita. */
@keyframes ws-ring-a { from { transform: rotate(-10deg); } to { transform: rotate(350deg); } }
@keyframes ws-ring-b { from { transform: rotate(13deg) scale(.92); } to { transform: rotate(373deg) scale(.92); } }
@keyframes ws-ring-c { from { transform: rotate(66deg); } to { transform: rotate(426deg); } }

/* Rejilla del planeta: rota dentro del planeta (overflow:hidden) y da la
   sensación de superficie girando. */
@keyframes ws-planet-spin { from { transform: rotate(-14deg); } to { transform: rotate(346deg); } }

/* Respiración vertical del planeta — profundidad barata, 1 sola capa. */
@keyframes ws-planet-bob {
  from { transform: translate3d(0, -7px, 0); }
  to   { transform: translate3d(0, 7px, 0); }
}

/* Flote de los nodos de categoría (STREAMING/GAMING/SOFTWARE/EDUCACIÓN). */
@keyframes ws-node-float {
  from { transform: translate3d(0, -6px, 0); }
  to   { transform: translate3d(0, 6px, 0); }
}

/* Halo y plataforma: solo opacidad (sin tocar el box-shadow). */
@keyframes ws-aura-breathe {
  from { opacity: .72; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.035); }
}
@keyframes ws-soft-pulse {
  from { opacity: .55; }
  to   { opacity: 1; }
}

/* Deriva lentísima del campo de estrellas — una sola capa compositada. */
@keyframes ws-stars-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-1.4%, 1.1%, 0); }
}

@keyframes ws-scroll-hint {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, 4px, 0); }
}

#storefront .orbit-stage {
  /* Contiene el pintado del hero: el navegador no vuelve a evaluar el resto
     de la página cuando algo se mueve acá dentro. */
  contain: layout paint;
}

#storefront .orbit-planet {
  will-change: transform;
  animation: ws-planet-bob 8.5s ease-in-out infinite alternate;
}

#storefront .planet-grid {
  will-change: transform;
  animation: ws-planet-spin 14s linear infinite;
}

#storefront .orbit-ring {
  will-change: transform;
}
#storefront .orbit-ring-a { animation: ws-ring-a 22s linear infinite; }
#storefront .orbit-ring-b { animation: ws-ring-b 28s linear infinite reverse; }
#storefront .orbit-ring-c { animation: ws-ring-c 36s linear infinite; }

#storefront .orbit-aura { animation: ws-aura-breathe 8s ease-in-out infinite alternate; }

#storefront .orbit-node { animation: ws-node-float 6.5s ease-in-out infinite alternate; }
#storefront .node-game  { animation-delay: -1.2s; }
#storefront .node-code  { animation-delay: -2.4s; }
#storefront .node-learn { animation-delay: -3.6s; }

#storefront .orbit-platform div { animation: ws-soft-pulse 6s ease-in-out infinite alternate; }
#storefront .orbit-platform div:nth-child(2) { animation-delay: -2.2s; }
#storefront .orbit-platform div:nth-child(3) { animation-delay: -4.4s; }

#storefront .orbit-stars {
  /* Margen extra para que la deriva nunca descubra un borde vacío. */
  inset: -4% !important;
  animation: ws-stars-drift 90s ease-in-out infinite alternate;
}

#storefront .hero-tag-dot { animation: ws-soft-pulse 2.4s ease-in-out infinite alternate; }
#storefront .orbit-scroll span {
  display: inline-block;
  animation: ws-scroll-hint 1.9s ease-in-out infinite alternate;
}

/* Parallax de profundidad: lo alimenta ws-hero-motion.js escribiendo dos
   custom properties. Sin JS, ambas valen 0 y no pasa nada. */
#storefront .orbit-stage {
  transform: translate3d(var(--ws-par-x, 0px), var(--ws-par-y, 0px), 0);
  transition: transform 360ms var(--ws-ease-out);
}
#storefront .orbit-planet,
#storefront .orbit-ring,
#storefront .orbit-node {
  /* Los hijos ya animan por keyframes; el parallax vive en el contenedor,
     así no hay dos animaciones peleando por el mismo transform. */
}

/* Pausa total cuando el hero no está en pantalla (lo marca el JS). */
#storefront.ws-motion-idle .orbit-stars,
#storefront.ws-motion-idle .orbit-aura,
#storefront.ws-motion-idle .orbit-planet,
#storefront.ws-motion-idle .planet-grid,
#storefront.ws-motion-idle .orbit-ring,
#storefront.ws-motion-idle .orbit-node,
#storefront.ws-motion-idle .orbit-platform div,
#storefront.ws-motion-idle .hero-tag-dot,
#storefront.ws-motion-idle .orbit-scroll span {
  animation-play-state: paused;
}

/* =====================================================================
   2. UX INTERACTIVA — que se note qué es clicable
   ===================================================================== */

/* --- Botones: hover / active / focus consistentes --- */
#storefront .btn,
#dashboard .btn,
#storefront .orbit-primary,
#storefront .orbit-secondary {
  transition:
    transform var(--ws-t-fast) var(--ws-ease-out),
    background-color var(--ws-t-base) ease,
    border-color var(--ws-t-base) ease,
    color var(--ws-t-base) ease,
    box-shadow var(--ws-t-base) ease;
}
#storefront .btn:active,
#dashboard .btn:active,
#storefront .orbit-primary:active,
#storefront .orbit-secondary:active {
  transform: translate3d(0, 1px, 0) scale(.985);
}

#storefront .orbit-primary:hover,
.ws-archive-hero-actions .orbit-primary:hover {
  transform: translate3d(0, -2px, 0);
}

/* Barrido de luz en el CTA principal: es un pseudo-elemento que se mueve
   con transform, no un gradiente animado. */
#storefront .orbit-primary { position: relative; overflow: hidden; isolation: isolate; }
#storefront .orbit-primary::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 55%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
  transform: translate3d(0, 0, 0);
  transition: transform 520ms var(--ws-ease-out);
  pointer-events: none;
}
#storefront .orbit-primary:hover::after { transform: translate3d(320%, 0, 0); }

/* Foco visible rojo y homogéneo en TODO lo interactivo. */
#storefront a:focus-visible,
#storefront button:focus-visible,
#storefront .cat-chip:focus-visible,
#storefront .m-card-title:focus-visible,
#dashboard a:focus-visible,
#dashboard button:focus-visible,
#dashboard .dash-nav-item:focus-visible {
  outline: 2px solid var(--ws-brand);
  outline-offset: 2px;
  border-radius: 8px;
}

/* --- Enlaces de navegación --- */
#storefront .navlinks a,
#storefront .nav-mobile-panel a {
  transition: color var(--ws-t-base) ease;
}
#storefront .navlinks a:hover { color: var(--ws-brand); }

/* --- Chips de categoría: hover claro y ESTADO ACTIVO inequívoco --- */
#storefront .ws-cat-rail .cat-chip,
#storefront #categorias .cat-chip {
  transition:
    transform var(--ws-t-base) var(--ws-ease-out),
    color var(--ws-t-base) ease,
    border-color var(--ws-t-base) ease,
    box-shadow var(--ws-t-base) ease;
}
#storefront .ws-cat-rail .cat-chip:hover { transform: translate3d(0, -3px, 0); color: #fff; }
#storefront .ws-cat-rail .cat-chip:active { transform: translate3d(0, -1px, 0) scale(.97); }

#storefront .ws-cat-rail .cat-chip-icon {
  transition:
    transform var(--ws-t-base) var(--ws-ease-out),
    border-color var(--ws-t-base) ease,
    box-shadow var(--ws-t-base) ease;
}
#storefront .ws-cat-rail .cat-chip:hover .cat-chip-icon {
  transform: scale(1.06);
  border-color: rgba(var(--ws-brand-rgb), .55);
}

/* Activo = rojo real, no un matiz. */
#storefront .ws-cat-rail .cat-chip.active,
#storefront #categorias .cat-chip.active {
  color: var(--ws-brand);
  font-weight: 700;
}
#storefront .ws-cat-rail .cat-chip.active .cat-chip-icon {
  border-color: var(--ws-brand);
  box-shadow: 0 0 0 3px rgba(var(--ws-brand-rgb), .22), 0 8px 22px rgba(var(--ws-brand-rgb), .24);
}
/* Subrayado rojo bajo la categoría activa: refuerza el estado sin glow extra. */
#storefront .ws-cat-rail .cat-chip.active > span:last-child {
  position: relative;
}
#storefront .ws-cat-rail .cat-chip.active > span:last-child::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: -5px;
  height: 2px;
  border-radius: 2px;
  background: var(--ws-brand);
}

/* --- Tarjetas de producto: feedback claro al pasar por encima --- */
#storefront .m-card,
#dashboard .m-card {
  transition:
    transform var(--ws-t-slow) var(--ws-ease-out),
    border-color var(--ws-t-base) ease,
    box-shadow var(--ws-t-base) ease;
}
#storefront .m-card:hover,
#dashboard .m-card:hover {
  transform: translate3d(0, -4px, 0);
  border-color: rgba(var(--ws-brand-rgb), .45);
}
#storefront .m-card:active,
#dashboard .m-card:active { transform: translate3d(0, -1px, 0); }

#storefront .m-card .m-card-media,
#dashboard .m-card .m-card-media { overflow: hidden; }
#storefront .m-card .m-card-media img,
#dashboard .m-card .m-card-media img {
  transition: transform 460ms var(--ws-ease-out);
}
#storefront .m-card:hover .m-card-media img,
#dashboard .m-card:hover .m-card-media img { transform: scale(1.055); }

/* Nombre del producto: se lee como enlace real. */
#storefront .m-card-title,
#dashboard .m-card-title {
  transition: color var(--ws-t-base) ease;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
}
#storefront .m-card:hover .m-card-title,
#dashboard .m-card:hover .m-card-title {
  color: var(--ws-brand);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(var(--ws-brand-rgb), .6);
}

/* Precio: el dato más importante de la tarjeta, en rojo de marca. */
#storefront .m-price,
#dashboard .m-price {
  color: var(--ws-brand);
  font-weight: 800;
}

/* Favorito y acciones secundarias. */
#storefront .fav-btn,
#dashboard .fav-btn {
  transition: transform var(--ws-t-fast) var(--ws-ease-out), color var(--ws-t-base) ease;
}
#storefront .fav-btn:hover,
#dashboard .fav-btn:hover { transform: scale(1.12); color: var(--ws-brand); }
#storefront .fav-btn:active,
#dashboard .fav-btn:active { transform: scale(.94); }

#storefront .m-card .review-link:hover,
#dashboard .m-card .review-link:hover { color: var(--ws-brand-strong); }

/* Tarjetas de beneficio y bloque VIP: mismo lenguaje de hover. */
#storefront .benefit,
#storefront .public-vip-strip {
  transition:
    transform var(--ws-t-slow) var(--ws-ease-out),
    border-color var(--ws-t-base) ease;
}
#storefront .benefit:hover {
  transform: translate3d(0, -3px, 0);
  border-color: rgba(var(--ws-brand-rgb), .38);
}
#storefront .benefit .premium-icon {
  transition: transform var(--ws-t-base) var(--ws-ease-out);
}
#storefront .benefit:hover .premium-icon { transform: translate3d(0, -2px, 0) scale(1.06); }

/* Cursor honesto: si no es clicable, no lo parece. */
#storefront .cat-chip,
#storefront .m-card-media,
#storefront .m-card-title,
#storefront .fav-btn { cursor: pointer; }

/* =====================================================================
   3. PREFERENCIAS DEL USUARIO — siempre mandan
   ===================================================================== */
@media (prefers-reduced-motion: reduce), (prefers-reduced-data: reduce) {
  #storefront .orbit-stars,
  #storefront .orbit-aura,
  #storefront .orbit-planet,
  #storefront .planet-grid,
  #storefront .orbit-ring,
  #storefront .orbit-node,
  #storefront .orbit-platform div,
  #storefront .hero-tag-dot,
  #storefront .orbit-scroll span {
    animation: none !important;
    will-change: auto;
  }
  #storefront .orbit-stage { transition: none !important; transform: none !important; }
}

/* En táctil no hay hover ni parallax de puntero: quitamos el coste. */
@media (hover: none), (pointer: coarse) {
  #storefront .orbit-stage { transition: none; transform: none; }
  #storefront .orbit-stars { animation: none !important; }
  #storefront .orbit-primary::after { display: none; }
}