/* ==========================================================================
   MACRO REBORN — EFECTOS VISUALES
   --------------------------------------------------------------------------
   Capa de pulido visual: entradas suaves, brillos que siguen al cursor,
   microinteracciones y detalles. Es solo una capa ADICIONAL:

   - No modifica ninguna hoja existente. Se carga al final del <head>,
     después de theme-canonical.css, y solo agrega.
   - Usa los tokens del tema (--accent-color, --gold, --line, ...), así que
     funciona igual en modo oscuro/claro y en las cuatro paletas.
   - Todo cuelga de html.fx-on (lo pone js/efectos.js). Si el JS no corre,
     la página queda exactamente como estaba.
   - Todo lo que se mueve cuelga de html.fx-motion, que NO se activa si la
     persona pidió "reducir movimiento" en su sistema: también lo que se
     mueve al pasar el ratón o al pulsar, y el paso de una página a otra.
     Bajo html.fx-on queda solo lo que no se mueve: colores, sombras, bordes.
   - Lo que se ve al cargar se ve desde el principio: solo entra con
     suavidad lo que aparece al bajar (js/efectos.js).
   - Lo que se anima sin fin se para fuera de la vista (.fx-pausa) y con la
     pestaña oculta (html.fx-oculta); las dos clases las pone js/efectos.js.
     También lo de la cabecera vieja de la portada, que se anima en
     css/inicio.css (specs/021-portada).
   - Para no chocar con transform/transition de las hojas existentes se usan
     las propiedades individuales translate / scale y listas de transición
     completas.

   Llegó con SamuMacro el 13/10/2026. El 14/10 se ajustó a las reglas XIV y
   XVIII de la constitución (specs/014-fundir-cambios-samu, research D6).
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}

@property --fx-rr {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

html.fx-on {
  --fx-ease: cubic-bezier(.22, .72, .24, 1);
  --fx-glow: color-mix(in srgb, var(--accent-color, #8b5cf6) 40%, transparent);
  --fx-glow-soft: color-mix(in srgb, var(--accent-color, #8b5cf6) 16%, transparent);
  --fx-trans: box-shadow .25s ease, background-color .2s ease, border-color .2s ease,
              color .2s ease, opacity .2s ease, filter .25s ease;
}
html.fx-motion {
  --fx-trans: translate .22s var(--fx-ease), scale .16s var(--fx-ease),
              transform .22s var(--fx-ease), box-shadow .25s ease,
              background-color .2s ease, border-color .2s ease,
              color .2s ease, opacity .2s ease, filter .25s ease;
}

/* --------------------------------------------------------------------------
   1. Selección, scrollbar de la página y cambio de página
   -------------------------------------------------------------------------- */

html.fx-on ::selection {
  background: color-mix(in srgb, var(--accent-color, #8b5cf6) 38%, transparent);
  color: inherit;
}

html.fx-on::-webkit-scrollbar { width: 11px; height: 11px; }
html.fx-on::-webkit-scrollbar-track { background: transparent; }
html.fx-on::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent-color, #8b5cf6) 45%, var(--bg-panel-alt, #2f1a5c));
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
html.fx-on::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent-color, #8b5cf6) 75%, var(--bg-panel-alt, #2f1a5c));
  background-clip: padding-box;
}

html.fx-motion::view-transition-old(root) {
  animation: fxFadeOut .16s ease both;
}
html.fx-motion::view-transition-new(root) {
  animation: fxFadeIn .24s ease both;
}

/* --------------------------------------------------------------------------
   2. Barra de progreso de lectura y botón de volver arriba
   -------------------------------------------------------------------------- */

.fx-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 100001;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, var(--accent-color, #8b5cf6), var(--gold-bright, #ffd666));
  box-shadow: 0 0 12px var(--fx-glow);
  opacity: 0;
  transition: opacity .25s ease;
}
.fx-progress.fx-visible { opacity: 1; }

.fx-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 900;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line, #3d2166);
  background: color-mix(in srgb, var(--bg-panel, #241145) 88%, transparent);
  color: var(--text-main, #f4f1fb);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, border-color .2s ease, box-shadow .25s ease;
}
.fx-top.fx-visible { opacity: 1; pointer-events: auto; }
.fx-top:hover {
  border-color: var(--accent-color, #8b5cf6);
  box-shadow: 0 8px 26px rgba(0, 0, 0, .3), 0 0 18px var(--fx-glow);
}
html.fx-motion .fx-top {
  translate: 0 14px;
  transition: opacity .25s ease, translate .3s var(--fx-ease), border-color .2s ease, box-shadow .25s ease, scale .16s ease;
}
html.fx-motion .fx-top.fx-visible { translate: 0 0; }
html.fx-motion .fx-top:hover { translate: 0 -2px; }
html.fx-motion .fx-top:active { scale: .94; }

/* --------------------------------------------------------------------------
   3. Entrada suave de contenido (la clase la maneja js/efectos.js, y solo
      la pone en lo que no se ve al cargar)
      Se usa animation y no transition para no pisar transiciones propias; al
      terminar, el JS quita las clases y el elemento vuelve a su estilo normal.
   -------------------------------------------------------------------------- */

html.fx-motion .fx-reveal { opacity: 0; }
html.fx-motion .fx-reveal.fx-in {
  animation: fxRise .62s var(--fx-ease) both;
  animation-delay: var(--fx-d, 0ms);
}

html.fx-motion .fx-img-wait { opacity: 0 !important; }
html.fx-motion .fx-img-in { animation: fxImgIn .55s ease-out both; }

/* --------------------------------------------------------------------------
   4. Brillo que sigue al cursor en tarjetas (el JS elige el pseudo-elemento
      libre: fx-spot-a = ::after, fx-spot-b = ::before). Solo con movimiento.
   -------------------------------------------------------------------------- */

html.fx-on .fx-rel { position: relative; }

html.fx-motion .fx-spot-a::after,
html.fx-motion .fx-spot-b::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(260px circle at var(--fx-mx, 50%) var(--fx-my, 50%),
      color-mix(in srgb, var(--accent-soft, #c084fc) 20%, transparent), transparent 62%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-color, #8b5cf6) 55%, transparent);
  transition: opacity .3s ease;
}
html.fx-motion .fx-spot-a:hover::after,
html.fx-motion .fx-spot-b:hover::before { opacity: 1; }

/* Destello diagonal que cruza la imagen de una tarjeta al pasar el cursor */
html.fx-motion .fx-shine-a::after,
html.fx-motion .fx-shine-b::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .20) 50%, transparent 62%);
  translate: -130% 0;
  transition: none;
}
html.fx-motion :is(.portal-juego-link, .juego-card, .tarjeta-relacionada, .juego-relacionado-card, .mr-personal-card, .bazar-card, .mr-original-card):hover .fx-shine-a::after,
html.fx-motion :is(.portal-juego-link, .juego-card, .tarjeta-relacionada, .juego-relacionado-card, .mr-personal-card, .bazar-card, .mr-original-card):hover .fx-shine-b::before {
  translate: 130% 0;
  transition: translate .85s var(--fx-ease);
}

/* La zona de la imagen se acerca un poco más, con suavidad */
html.fx-motion .juego-imagen img,
html.fx-motion .portal-juego-imagen img {
  transition: transform .6s var(--fx-ease), filter .4s ease;
}

/* --------------------------------------------------------------------------
   5. Botones y controles
   -------------------------------------------------------------------------- */

html.fx-motion button:not(:disabled):active,
html.fx-motion [role="button"]:active,
html.fx-motion .boton:active,
html.fx-motion .boton-secundario:active,
html.fx-motion .cat-btn:active { scale: .97; }

html.fx-on .boton,
html.fx-on .boton-secundario,
html.fx-on .cat-btn,
html.fx-on .mr-chip,
html.fx-on .portal-home-accesos a,
html.fx-on .portal-home-busqueda button {
  transition: var(--fx-trans);
}

html.fx-on .boton:hover,
html.fx-on .boton-secundario:hover,
html.fx-on .cat-btn:hover,
html.fx-on .portal-home-busqueda button:hover {
  box-shadow: 0 8px 22px -6px var(--fx-glow);
}
html.fx-motion .boton:hover,
html.fx-motion .boton-secundario:hover,
html.fx-motion .cat-btn:hover,
html.fx-motion .portal-home-busqueda button:hover {
  translate: 0 -2px;
}
html.fx-on .portal-home-accesos a:hover { box-shadow: 0 8px 22px -8px var(--fx-glow); }
html.fx-motion .boton:active,
html.fx-motion .boton-secundario:active,
html.fx-motion .cat-btn:active,
html.fx-motion .portal-home-busqueda button:active { translate: 0 0; }

/* Onda al hacer clic (la dispara el JS en el pseudo-elemento libre) */
html.fx-on .fx-rip-a::after,
html.fx-on .fx-rip-b::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
}
html.fx-motion .fx-rip-a.fx-rippling::after,
html.fx-motion .fx-rip-b.fx-rippling::before {
  background: radial-gradient(circle var(--fx-rr) at var(--fx-rx, 50%) var(--fx-ry, 50%),
    color-mix(in srgb, currentColor 24%, transparent), transparent 100%);
  animation: fxRipple .6s ease-out both;
}

/* Campos: el aro de foco aparece con suavidad */
html.fx-on :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), textarea, select) {
  transition: border-color .2s ease, box-shadow .25s ease, background-color .2s ease;
}
html.fx-on :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), textarea, select):focus {
  border-color: var(--accent-color, #8b5cf6);
  box-shadow: 0 0 0 3px var(--focus-ring, rgba(56, 189, 248, .22));
}

html.fx-on :focus-visible {
  outline-color: var(--accent-color, #8b5cf6);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   6. Barra de navegación (solo detalles; no cambia su estructura)
   -------------------------------------------------------------------------- */

html.fx-on .navbar .nav-logo:hover {
  filter: drop-shadow(0 0 10px rgba(172, 57, 255, .55));
}
html.fx-motion .navbar .nav-logo {
  transition: filter .35s ease, scale .35s var(--fx-ease);
}
html.fx-motion .navbar .nav-logo:hover { scale: 1.035; }

html.fx-on .nav-categorias a { position: relative; }
html.fx-on .nav-categorias a:not(.activa-nav)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--accent-color, #d18aff), transparent);
  translate: -50% 0;
  pointer-events: none;
}
html.fx-on .nav-categorias a:not(.activa-nav):hover::after { width: 62%; }
html.fx-motion .nav-categorias a:not(.activa-nav)::after { transition: width .28s var(--fx-ease); }

html.fx-on .navbar .user-guest-boton:hover .user-guest-avatar {
  box-shadow: 0 0 0 2px rgba(172, 57, 255, .5), 0 0 16px rgba(172, 57, 255, .45);
}
html.fx-motion .navbar .user-guest-boton .user-guest-avatar {
  transition: box-shadow .3s ease, scale .3s var(--fx-ease);
}
html.fx-motion .navbar .user-guest-boton:hover .user-guest-avatar { scale: 1.05; }

/* --------------------------------------------------------------------------
   7. Portada: brillos del encabezado, título y buscador. Lo de arriba se ve
      desde el principio, sin entrada animada.
   -------------------------------------------------------------------------- */

/* Un brillo que recorre el título tres veces y para */
html.fx-motion .portal-home-titulo {
  background-image: linear-gradient(100deg,
    var(--text-main) 0%, var(--text-main) 42%,
    var(--gold-bright, #ffd666) 50%,
    var(--text-main) 58%, var(--text-main) 100%);
  background-size: 260% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: fxShimmer 8s ease-in-out 1.4s 3;
}

html.fx-motion .portal-home-glow {
  transition: translate .9s var(--fx-ease);
  animation: fxDrift 16s ease-in-out infinite alternate;
}
html.fx-motion .portal-home-glow-2 { animation-duration: 21s; animation-delay: -6s; }
html.fx-motion .portal-home-glow-1 {
  translate: calc(var(--fx-px, 0) * 26px) calc(var(--fx-py, 0) * 18px);
}
html.fx-motion .portal-home-glow-2 {
  translate: calc(var(--fx-px, 0) * -22px) calc(var(--fx-py, 0) * -16px);
}

html.fx-on .portal-home-busqueda {
  transition: box-shadow .3s ease, border-color .25s ease;
}
html.fx-on .portal-home-busqueda:focus-within {
  border-color: var(--accent-color, #8b5cf6);
  box-shadow: 0 0 0 4px var(--focus-ring, rgba(56, 189, 248, .22)), 0 16px 44px -12px var(--fx-glow);
}

html.fx-motion .portal-seccion-header a { transition: translate .2s var(--fx-ease), color .2s ease; }
html.fx-motion .portal-seccion-header a:hover { translate: 3px 0; }

/* Pulso suave del indicador "servidor en línea" */
html.fx-motion .estado-servidor .punto { animation: fxPulse 2.6s ease-out infinite; }

/* Lo que se anima sin fin, parado fuera de la vista y con la pestaña oculta.
   Con la especificidad justa para ganar a las reglas de arriba, que lo
   ponen en marcha con el atajo animation. También lo de la cabecera vieja
   de la portada, que se anima en css/inicio.css: los orbes, el logo, la
   flecha y los puntos (specs/021-portada). */
html.fx-motion .fx-pausa :is(.portal-home-glow, .portal-home-titulo, .orbe, .logo-wrapper, .scroll-cue, .punto),
html.fx-motion :is(.estado-servidor, .eyebrow) .punto.fx-pausa,
html.fx-oculta :is(.portal-home-glow, .portal-home-titulo, .orbe, .logo-wrapper, .scroll-cue),
html.fx-oculta :is(.estado-servidor, .eyebrow) .punto {
  animation-play-state: paused;
}

/* --------------------------------------------------------------------------
   8. Tarjetas de juego y paneles: transiciones completas y profundidad
   -------------------------------------------------------------------------- */

html.fx-motion :is(.portal-juego-link, .juego-card, .macro-home-hub-card, .acceso-card, .portal-categoria-card, .mr-category-card, .noticia, .bazar-card, .mr-original-card, .tarjeta-relacionada, .juego-relacionado-card) {
  transition: transform .3s var(--fx-ease), border-color .25s ease, box-shadow .3s ease, background-color .25s ease;
}
/* acceso, noticia, bazar y originals no tenían elevación propia; las demás ya la tienen */
html.fx-motion :is(.acceso-card, .noticia, .bazar-card, .mr-original-card):hover {
  translate: 0 -3px;
}
html.fx-on :is(.macro-home-hub-card, .acceso-card, .portal-categoria-card, .mr-category-card, .noticia, .bazar-card, .mr-original-card):hover {
  box-shadow: 0 16px 34px -14px rgba(0, 0, 0, .5), 0 0 24px -8px var(--fx-glow);
}

html.fx-on .portal-juego-link:hover,
html.fx-on .juego-card:hover {
  box-shadow: 0 18px 36px -12px rgba(0, 0, 0, .5), 0 0 26px -8px var(--fx-glow);
}

/* --------------------------------------------------------------------------
   9. Avatares, podio y pequeños detalles
   -------------------------------------------------------------------------- */

html.fx-motion :is(.rk-podio-card, .tarjeta-avatar, .avatar-tarjeta) {
  transition: translate .3s var(--fx-ease), transform .3s var(--fx-ease), box-shadow .3s ease;
}
html.fx-motion :is(.rk-podio-card, .tarjeta-avatar, .avatar-tarjeta):hover {
  translate: 0 -3px;
}

html.fx-motion .pie-columna a { transition: translate .2s var(--fx-ease), color .2s ease; }
html.fx-motion .pie-columna a:hover { translate: 3px 0; }

/* --------------------------------------------------------------------------
   10. Ventanas modales
   -------------------------------------------------------------------------- */

html.fx-motion .mr-modal-backdrop { animation: fxFadeIn .25s ease-out both; }
html.fx-on .mr-modal-dialog {
  box-shadow:
    var(--sombra-suave, 0 28px 80px rgba(0, 0, 0, .42)),
    0 0 0 1px color-mix(in srgb, var(--accent-color, #8b5cf6) 22%, transparent),
    0 0 64px -18px var(--fx-glow);
}

/* --------------------------------------------------------------------------
   11. Páginas de acceso (login / registro)
   -------------------------------------------------------------------------- */

html.fx-on .auth-card {
  box-shadow:
    var(--sombra-suave, 0 18px 40px rgba(0, 0, 0, .35)),
    0 0 60px -22px var(--fx-glow);
}

/* --------------------------------------------------------------------------
   Animaciones
   -------------------------------------------------------------------------- */

@keyframes fxRise {
  from { opacity: 0; translate: 0 18px; }
  to   { opacity: 1; translate: 0 0; }
}
@keyframes fxFadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes fxFadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes fxImgIn {
  from { opacity: 0; filter: blur(6px); scale: 1.03; }
  to   { opacity: 1; filter: blur(0);   scale: 1; }
}
@keyframes fxShimmer {
  0%, 62% { background-position: 120% 0; }
  100%    { background-position: -20% 0; }
}
@keyframes fxDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(34px, -22px, 0) scale(1.14); }
}
@keyframes fxPulse {
  0%   { box-shadow: 0 0 8px var(--green, #35d488), 0 0 0 0 color-mix(in srgb, var(--green, #35d488) 55%, transparent); }
  70%  { box-shadow: 0 0 8px var(--green, #35d488), 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 8px var(--green, #35d488), 0 0 0 0 transparent; }
}
@keyframes fxRipple {
  from { --fx-rr: 0px;   opacity: 1; }
  to   { --fx-rr: 320px; opacity: 0; }
}