/* ═══════════════════════════════════════════════════════════════════════
   premium.css · NexoGamer — refinamiento visual + scroll-driven animations
   Rediseño premium · Fase 1.

   PROGRESSIVE ENHANCEMENT (regla de oro): todo el movimiento va detrás de
   @supports (animation-timeline) y @media (prefers-reduced-motion:
   no-preference). Si el navegador no lo soporta o el usuario pide menos
   movimiento, el contenido se ve estático y COMPLETO (nunca oculto).
   Solo se animan transform y opacity → compositor puro, 60 FPS.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Barra de progreso de lectura (fina, arriba del todo) ──────────────── */
.scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 3000;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--violet, #9D4EDD), var(--cyan, #00D9FF));
  box-shadow: 0 0 12px rgba(157, 78, 221, .5);
  pointer-events: none;
  opacity: 0; /* oculta si no hay scroll-timeline (no molesta) */
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-progress {
      opacity: 1;
      animation: ng-progress linear both;
      animation-timeline: scroll(root);
    }
    @keyframes ng-progress { to { transform: scaleX(1); } }
  }
}

/* ── Reveal al entrar en viewport + recede del hero al hacer scroll ────── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Bloques que aparecen con un leve ascenso al entrar en pantalla */
    .prop-pillar,
    .group-header,
    .product-card,
    .ver-todos-wrap,
    .cat-card,
    .value-card,
    .criteria-item {
      animation: ng-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 20%;
    }
    /* Solo opacidad: NO animamos transform, para no anular el transform del
       :hover de las tarjetas (una animación activa gana a las reglas normales). */
    @keyframes ng-reveal {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    /* Escalonado sutil de los 3 pilares (sensación de secuencia) */
    .prop-pillar:nth-child(2) { animation-range: entry 4% cover 24%; }
    .prop-pillar:nth-child(3) { animation-range: entry 8% cover 28%; }

    /* Hero → nav: el título gigante se encoge y sube hacia el nav mientras se
       desvanece al scrollear, como si se "acoplara" a la barra (que a su vez se
       vuelve sólida con .scrolled). transform-origin arriba = colapsa hacia el nav. */
    .hero-inner {
      transform-origin: 50% 0;
      animation: ng-hero-recede linear both;
      animation-timeline: scroll(root);
      animation-range: 0 50vh;
    }
    @keyframes ng-hero-recede {
      from { opacity: 1; transform: none; }
      to   { opacity: 0; transform: translateY(-60px) scale(.86); }
    }
  }
}

/* ── Entrada escalonada de las cabeceras al cargar (primera impresión) ────
   Time-based (universal), gated por reduced-motion. Va en los HIJOS del hero,
   así no choca con el recede de .hero-inner. Con reduced-motion: sin animación
   → visibles al instante. */
@media (prefers-reduced-motion: no-preference) {
  .hero-eyebrow, .hero-title, .hero-sub, .hero-actions,
  .cat-eyebrow, .cat-h1, .cat-desc, .cat-range {
    animation: ng-enter .7s cubic-bezier(.22, .61, .36, 1) both;
  }
  .hero-title,   .cat-h1    { animation-delay: .08s; }
  .hero-sub,     .cat-desc  { animation-delay: .16s; }
  .hero-actions, .cat-range { animation-delay: .24s; }
  @keyframes ng-enter {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
}

/* ── Detalles finos (Fase 3): selección de texto y scrollbar de marca ─────
   Estáticos, sin movimiento: cuidado al detalle sin coste de rendimiento. */
::selection { background: rgba(157, 78, 221, .35); color: #fff; }

html { scrollbar-width: thin; scrollbar-color: var(--violet, #9D4EDD) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(var(--violet, #9D4EDD), var(--cyan, #00D9FF));
  border-radius: 8px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--violet, #9D4EDD); background-clip: padding-box; }

/* ── Fase 3 · afinado tipográfico (solo mejora; degrada si no hay soporte) ─
   Titulares equilibrados a varias líneas y párrafos sin palabras huérfanas. */
h1, h2, h3, .hero-title, .prop-heading, .section-h, .cat-h1 { text-wrap: balance; }
p, .hero-sub, .prop-body, .cat-desc, .section-lead, .group-header p { text-wrap: pretty; }

/* ── Fase 3 · ritmo de anclaje: al saltar a una sección no queda tapada por
   el nav fijo (70px). Afecta a scrollIntoView y a la navegación por hash. */
:target { scroll-margin-top: 88px; }
section[id], #group-nav { scroll-margin-top: 88px; }