/* ============================================================
   gamer-fx.css — MU Drakon, capa de efectos "next level"
   Se carga DESPUÉS de gamer.css / realm.css. Es 100% aditiva:
   no redefine layout, solo agrega movimiento, brillo y feedback.
   Respeta html.drakon-effects-off y prefers-reduced-motion.
   ============================================================ */

:root {
  --fx-magenta: var(--tomato, #d4a061);
  --fx-magenta-bright: var(--tomato-bright, #f6ddbe);
  --fx-gold: var(--gold, #c5a16a);
  --fx-gold-bright: var(--gold-bright, #edd0a0);
}

/* ---------- barra de progreso de scroll ---------- */
#gfx-progress {
  position: fixed;
  inset: 0 auto auto 0;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient(90deg, var(--fx-magenta), var(--fx-gold-bright), var(--fx-magenta-bright));
  background-size: 200% 100%;
  box-shadow: 0 0 12px 1px rgba(212, 160, 97, .55);
  transition: width .12s linear;
  animation: gfx-progress-flow 6s linear infinite;
}
html.drakon-effects-off #gfx-progress,
html.gfx-reduced #gfx-progress { animation: none; box-shadow: none; }
@keyframes gfx-progress-flow { to { background-position: 200% 0; } }

/* ---------- navbar: estado "scrolleado" ---------- */
.topbar {
  transition: min-height .28s ease, box-shadow .28s ease, background-color .28s ease;
}
.topbar.gfx-scrolled {
  min-height: 62px;
  box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .75), 0 1px 0 var(--line-strong);
  background: rgba(9, 12, 14, .98) !important;
}
.brand__title, .footer__brand-title { transition: text-shadow .3s ease; }
.topbar.gfx-scrolled .brand__title { text-shadow: 0 0 18px rgba(212, 160, 97, .35); }

/* ---------- nav links: subrayado animado ---------- */
.nav-link {
  position: relative;
  transition: color .2s ease, transform .2s ease;
}
.nav-link:not(.nav-link--rainbow)::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--nav-hover, var(--fx-gold-bright)), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s cubic-bezier(.3, .8, .4, 1);
}
.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.is-active::after { transform: scaleX(1); }
.nav-link:hover { transform: translateY(-1px); }

/* ---------- botones: brillo, halo pulsante y barrido de luz ---------- */
/* Todos los botones con pseudo-elementos deben contener su propio brillo. */
.btn,
.btn--primary,
.mk-btn:not(.mk-btn--ghost),
.ws-item__btn,
.ws-cfg__buy,
.svf-submit { position: relative; overflow: hidden; isolation: isolate; }

.btn--primary,
.mk-btn:not(.mk-btn--ghost),
.ws-item__btn,
.ws-cfg__buy,
.svf-submit {
  transition: transform .22s cubic-bezier(.3, .8, .4, 1), box-shadow .28s ease, filter .22s ease;
}
.btn--primary::before,
.mk-btn:not(.mk-btn--ghost)::before,
.ws-item__btn::before,
.ws-cfg__buy::before,
.svf-submit::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  background: conic-gradient(from var(--gfx-angle, 0deg), transparent 0 65%, var(--fx-gold-bright) 78%, var(--fx-magenta-bright) 88%, transparent 100%);
  opacity: 0;
  transition: opacity .3s ease;
  animation: gfx-spin 3.2s linear infinite paused;
}
.btn--primary:hover::before,
.mk-btn:not(.mk-btn--ghost):hover::before,
.ws-item__btn:hover::before,
.ws-cfg__buy:hover::before,
.svf-submit:hover::before {
  opacity: 1;
  animation-play-state: running;
}
.btn--primary:hover,
.mk-btn:not(.mk-btn--ghost):hover,
.ws-item__btn:hover,
.ws-cfg__buy:hover,
.svf-submit:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 10px 26px -8px rgba(212, 160, 97, .55), 0 0 0 1px rgba(237, 208, 160, .35) inset;
}
.btn--primary:active,
.mk-btn:not(.mk-btn--ghost):active { transform: translateY(0) scale(.985); }

@property --gfx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes gfx-spin { to { --gfx-angle: 360deg; } }

/* barrido de brillo (shine) al pasar el mouse */
.btn--primary::after,
.mk-btn:not(.mk-btn--ghost)::after,
.ws-item__btn::after,
.ws-cfg__buy::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -60%;
  width: 40%;
  background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
  pointer-events: none;
}
.btn--primary:hover::after,
.mk-btn:not(.mk-btn--ghost):hover::after,
.ws-item__btn:hover::after,
.ws-cfg__buy:hover::after { left: 130%; }

/* pulso constante y sutil para la CTA principal del hero/descarga */
.btn--blade { animation: gfx-cta-pulse 2.6s ease-in-out infinite; }
.btn--blade:hover { animation-play-state: paused; }
@keyframes gfx-cta-pulse {
  0%, 100% { box-shadow: 0 6px 18px -6px rgba(212, 160, 97, .45); }
  50% { box-shadow: 0 6px 26px -4px rgba(212, 160, 97, .85), 0 0 0 4px rgba(212, 160, 97, .08); }
}

/* ---------- tarjetas: spotlight que sigue el cursor + tilt ---------- */
.class-card, .promo-box, .stat-card, .download-card, .event-card, .mk-item, .ws-item, .gallery__item {
  --mx: 50%;
  --my: 50%;
  transform: perspective(900px) rotateX(var(--gfx-rx, 0deg)) rotateY(var(--gfx-ry, 0deg)) translateZ(0);
  transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease;
  will-change: transform;
}
.class-card::after, .promo-box::after, .stat-card::after, .download-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx) var(--my), rgba(237, 208, 160, .16), transparent 62%);
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
}
.class-card:hover::after, .promo-box:hover::after, .stat-card:hover::after, .download-card:hover::after { opacity: 1; }
.stat-card:hover, .promo-box:hover { box-shadow: 0 14px 34px -16px rgba(212, 160, 97, .5); }
.class-card:hover { box-shadow: 0 18px 40px -14px rgba(212, 160, 97, .55), 0 0 0 1px var(--fx-gold) inset; }

/* ---------- números de stats: pulso al actualizarse ---------- */
.stat-card__value.gfx-bump { animation: gfx-bump .5s ease; }
@keyframes gfx-bump {
  0% { transform: scale(1); color: var(--text); }
  35% { transform: scale(1.18); color: var(--fx-gold-bright); text-shadow: 0 0 14px rgba(237, 208, 160, .6); }
  100% { transform: scale(1); }
}
.live-dot { animation: gfx-live-pulse 1.8s ease-in-out infinite; }
@keyframes gfx-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(105, 215, 160, .55); }
  50% { box-shadow: 0 0 0 6px rgba(105, 215, 160, 0); }
}

/* ---------- entrada escalonada para grillas cargadas por JS ---------- */
.gfx-pop {
  animation: gfx-pop .5s cubic-bezier(.22, .8, .32, 1) both;
}
@keyframes gfx-pop {
  from { opacity: 0; transform: translateY(14px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---------- títulos de sección: subrayado animado al entrar ---------- */
.section-head h2 {
  position: relative;
  display: inline-block;
}
.section-head h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -8px;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--fx-magenta-bright), var(--fx-gold-bright), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .7s cubic-bezier(.2, .8, .3, 1);
}
.section-head.gfx-in h2::after,
.is-premium-visible .section-head h2::after { transform: scaleX(1); }

/* ---------- glow cursor ambiente (solo desktop, con puntero fino) ---------- */
#gfx-cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 420px; height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 160, 97, .10), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .4s ease;
  transform: translate3d(var(--gfx-cx, -420px), var(--gfx-cy, -420px), 0);
  will-change: transform;
}
#gfx-cursor-glow.gfx-visible { opacity: 1; }

/* ---------- scrollbar temática ---------- */
html { scrollbar-color: var(--fx-magenta) rgba(16, 21, 25, .6); }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: rgba(11, 16, 19, .9); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--fx-magenta), var(--fx-gold));
  border-radius: 8px;
  border: 2px solid rgba(11, 16, 19, .9);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--fx-magenta-bright), var(--fx-gold-bright)); }

/* ---------- hero title: brillo tenue ---------- */
.hero__title-primary, .hero__title-secondary {
  text-shadow: 0 0 26px rgba(212, 160, 97, .28);
}

/* ---------- selección de texto temática ---------- */
::selection { background: var(--fx-magenta); color: #fff5e0; }

/* ---------- desactivación total con el toggle existente / reduced motion ---------- */
html.drakon-effects-off .btn--blade,
html.drakon-effects-off .btn--primary::before,
html.drakon-effects-off .mk-btn:not(.mk-btn--ghost)::before,
html.gfx-reduced .btn--blade,
html.gfx-reduced .btn--primary::before,
html.gfx-reduced .live-dot { animation: none !important; }

html.drakon-effects-off .class-card, html.drakon-effects-off .promo-box,
html.drakon-effects-off .stat-card, html.drakon-effects-off .download-card,
html.gfx-reduced .class-card, html.gfx-reduced .promo-box,
html.gfx-reduced .stat-card, html.gfx-reduced .download-card {
  transform: none !important;
}
html.drakon-effects-off #gfx-cursor-glow,
html.gfx-reduced #gfx-cursor-glow { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  #gfx-progress, .btn--blade, .live-dot { animation: none !important; }
  .class-card, .promo-box, .stat-card, .download-card { transform: none !important; }
  #gfx-cursor-glow { display: none !important; }
  .gfx-pop { animation: none !important; opacity: 1 !important; transform: none !important; }
}

@media (pointer: coarse) {
  #gfx-cursor-glow { display: none !important; }
  .class-card, .promo-box, .stat-card, .download-card { transform: none !important; }
}

@media (max-width: 720px) {
  #gfx-progress { height: 2px; }
}