/* ==================== EFECTOS: líneas neón y animaciones (spec 23) ==================== */

/* Borde curvo de las zonas oscuras: un pulso de luz recorre la línea de luz de lado a lado */
.fx-curve{position:absolute;left:0;bottom:0;z-index:2;pointer-events:none;overflow:visible;filter:drop-shadow(0 0 3px var(--neon-2)) drop-shadow(0 0 8px var(--neon))}
.fx-curve path{fill:none;stroke:#e6fbff;stroke-width:3;stroke-linecap:round;stroke-dasharray:.16 2;stroke-dashoffset:.16;animation:fx-curva 5s cubic-bezier(.45,0,.35,1) 1.2s infinite}
@keyframes fx-curva{0%{stroke-dashoffset:.16}55%,100%{stroke-dashoffset:-1}}

/* Borde neón en las piezas héroe: un segmento de luz recorre el borde */
@property --neon-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.fx-host{position:relative}
.fx-edge{position:absolute;inset:0;z-index:3;border-radius:inherit;padding:1.5px;pointer-events:none;
  background:conic-gradient(from var(--neon-a),transparent 0 64%,rgba(61,139,255,.25) 72%,var(--neon) 84%,var(--neon-2) 90%,transparent 96%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:fx-spin 6s linear infinite}
@keyframes fx-spin{to{--neon-a:360deg}}

/* Tarjeta de miembro: pulso de luz sobre la curva de la foto de fondo (encima del degradado, debajo del texto) */
.fx-arc,.member>.fx-arc{position:absolute;z-index:1;pointer-events:none;overflow:visible;filter:drop-shadow(0 0 3px var(--neon-2)) drop-shadow(0 0 9px var(--neon))}
.fx-arc path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.fx-arc-run{stroke:#e6fbff;stroke-width:8;stroke-dasharray:.2 2;stroke-dashoffset:.2;animation:fx-arc 5.5s cubic-bezier(.45,0,.35,1) 1s infinite}
@keyframes fx-arc{0%{stroke-dashoffset:.2}55%,100%{stroke-dashoffset:-1}}

/* Títulos: subrayado neón que se dibuja al entrar en pantalla */
.fx-ul{position:relative}
.fx-ul::after{content:"";position:absolute;left:0;bottom:-5px;width:40px;height:2px;border-radius:1px;background:linear-gradient(90deg,var(--neon),var(--neon-2));transform:scaleX(0);transform-origin:left;transition:transform .7s cubic-bezier(.22,1,.36,1) .15s}
.fx-ul.in::after{transform:scaleX(1)}
/* El brillo del subrayado va solo sobre oscuro; en claro es una línea limpia (spec 24) */
.zone-dark .fx-ul::after{box-shadow:var(--neon-glow)}
.section-head h2.fx-ul::after{bottom:-4px}

/* Bloques que aparecen al desplazar. Parten al 40 %: nunca queda un hueco en blanco si se desplaza rápido (spec 25) */
.fx-rv{opacity:.4;transform:translateY(10px);transition:opacity .5s ease var(--fx-d,0s),transform .6s cubic-bezier(.22,1,.36,1) var(--fx-d,0s)}
.fx-rv.in{opacity:1;transform:none}

/* Tabbar: línea neón superior con un brillo que la recorre, e indicador que se desliza al tab activo */
.tabbar::before{content:"";position:absolute;left:18px;right:18px;top:-1px;height:1px;border-radius:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(61,139,255,.55) 20%,rgba(61,139,255,.55) 80%,transparent),linear-gradient(90deg,transparent,var(--neon-2),transparent) no-repeat;
  background-size:100% 100%,30% 100%;background-position:0 0,-40% 0;box-shadow:0 0 8px rgba(61,139,255,.6);animation:fx-tabline 8s ease-in-out infinite}
@keyframes fx-tabline{0%,60%{background-position:0 0,-40% 0}100%{background-position:0 0,140% 0}}
.tab-ind{position:absolute;top:7px;left:calc(100% / 5 * (var(--i, 0) + .5) - 23px);width:46px;height:30px;border-radius:15px;pointer-events:none;
  background:rgba(61,139,255,.3);box-shadow:inset 0 0 0 1px rgba(126,222,241,.25);transition:left .35s cubic-bezier(.22,1,.36,1),opacity .2s}
.tab-ind.off{opacity:0}

/* Barrido de luz bajo el header al cambiar de ruta */
#fx-sweep{position:absolute;z-index:41;left:0;right:0;top:var(--header-h);height:2px;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,var(--neon) 30%,var(--neon-2) 50%,var(--neon) 70%,transparent);box-shadow:0 0 10px var(--neon);transform:scaleX(0);transform-origin:left}
#fx-sweep.go{animation:fx-sweep .6s cubic-bezier(.4,0,.2,1)}
#app.immersive #fx-sweep,#app.auth #fx-sweep{display:none}
@keyframes fx-sweep{0%{opacity:1;transform:scaleX(0)}70%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}

/* Puntos: "+N" que flota desde la pill del header y destello de la pill */
.fx-plus{position:absolute;z-index:90;transform:translate(-50%,0);pointer-events:none;font-family:var(--tech);font-weight:700;font-size:1.25rem;letter-spacing:.02em;color:var(--neon-2);text-shadow:0 0 8px var(--neon),0 0 18px rgba(61,139,255,.7);animation:fx-plus 1.1s cubic-bezier(.22,1,.36,1) forwards}
@keyframes fx-plus{0%{opacity:0;transform:translate(-50%,6px) scale(.8)}20%{opacity:1;transform:translate(-50%,0) scale(1.08)}100%{opacity:0;transform:translate(-50%,28px) scale(1)}}
.top .pts-btn.fx-flash{animation:fx-flash .7s ease}
@keyframes fx-flash{0%{box-shadow:0 0 0 rgba(61,139,255,0)}35%{box-shadow:0 0 0 2px var(--neon),0 0 22px var(--neon)}100%{box-shadow:0 0 14px rgba(61,139,255,.22)}}

/* Splash: anillo neón que se dibuja alrededor del escudo */
#splash .fx-ring{position:absolute;width:124px;height:124px;left:50%;top:50%;margin:-62px 0 0 -62px;overflow:visible;filter:drop-shadow(0 0 4px var(--neon)) drop-shadow(0 0 12px rgba(61,139,255,.6));animation:fx-rot 3s linear infinite}
#splash .fx-ring circle{fill:none;stroke:var(--neon-2);stroke-width:2;stroke-linecap:round;stroke-dasharray:.7 .3;stroke-dashoffset:1;animation:fx-ring 1s cubic-bezier(.4,0,.2,1) forwards}
@keyframes fx-ring{to{stroke-dashoffset:0}}
@keyframes fx-rot{to{transform:rotate(360deg)}}

/* Botones: se hunden al presionar; los principales sobre oscuro brillan en neón */
.btn:active{transform:scale(.97)}
:is(.zone-dark,.sheet.dark,.login,.jf.dark) :is(.btn-accent,.btn-sky,.btn-glass):is(:hover,:focus-visible){box-shadow:0 0 0 1px var(--neon),var(--neon-glow)}
/* Campos: el foco lleva brillo neón además del anillo */
.input:focus{outline:2px solid var(--electric);box-shadow:0 0 14px rgba(61,139,255,.45)}

/* Pestaña oculta: todo se pausa para ahorrar batería */
#app.fx-paused *,#app.fx-paused *::before,#app.fx-paused *::after{animation-play-state:paused!important}

/* Movimiento reducido: las líneas se quedan fijas y el contenido aparece directo */
@media (prefers-reduced-motion:reduce){
  #fx-sweep,.fx-arc,.fx-curve{display:none}
  .fx-edge{background:linear-gradient(135deg,rgba(61,139,255,.6),rgba(126,222,241,.35) 40%,transparent 60%,rgba(61,139,255,.5))}
  .fx-ul::after{transform:scaleX(1)}
  .fx-rv{opacity:1;transform:none}
  .fx-plus{animation:none;opacity:1}
  #splash .fx-ring circle{stroke-dashoffset:0}
}