/* ═══════════════════════════════════════════════════════════════
   PONTEGEEK — LIQUID GLASS
   Sistema reutilizable de "vidrio líquido" para controles y tarjetas.
   Lo cargan las páginas estáticas y el layout de React.
   Clases:
     .glass        → material translúcido + rim light + profundidad
     .glass-sheen  → solo el brillo especular que sigue el cursor
                     (para tarjetas de color sólido, sin difuminar el fondo)
     .glass-card   → material en tarjetas con imagen (incluye sheen)
   Tokens en tokens.css (--glass-*). El brillo lo mueve js/glass.js.

   Degradación: sin backdrop-filter cae a sólido; con
   prefers-reduced-transparency vuelve a sólido; con
   prefers-reduced-motion se apaga el sheen.
   ═══════════════════════════════════════════════════════════════ */

/* variables del brillo (las setea glass.js por elemento) */
.glass, .glass-sheen, .glass-card { --gx: 50%; --gy: 0%; }

/* ── Material (solo si el navegador soporta backdrop-filter) ── */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass,
  .glass-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-brd);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-rim), var(--glass-elev);
  }

  /* posicionamiento para el pseudo del brillo */
  .glass, .glass-sheen, .glass-card { position: relative; }
  .glass, .glass-card { overflow: hidden; }

  .glass::after,
  .glass-sheen::after,
  .glass-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    background: radial-gradient(140px circle at var(--gx) var(--gy),
                rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 60%);
  }
  /* en tarjetas de color sólido el reflejo es más amplio y en soft-light
     para realzar el degradado sin lavar el texto */
  .glass-sheen::after,
  .glass-card::after {
    background: radial-gradient(220px circle at var(--gx) var(--gy),
                rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0) 62%);
    mix-blend-mode: soft-light;
  }
  .glass:hover::after,
  .glass-sheen:hover::after,
  .glass-card:hover::after { opacity: 1; }
}

/* ── Fallback: usuarios que reducen transparencia → sólido ── */
@media (prefers-reduced-transparency: reduce) {
  .glass,
  .glass-card {
    background: var(--surf);
    border: 1px solid var(--line);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
}

/* ── Fallback: movimiento reducido → sin brillo móvil ── */
@media (prefers-reduced-motion: reduce) {
  .glass::after,
  .glass-sheen::after,
  .glass-card::after { display: none; }
}