/* =========================================================================
   ARCADE MOTORS MX — fx.css  ·  Efectos visuales (additive sobre styles.css)
   Se carga DESPUÉS de styles.css, así sus overrides ganan. Aislado a propósito:
   NO toca header.php ni styles.css (para no chocar con la sesión del buscador).
   Set aprobado: encendido CRT, boot, piso, aberración, íconos, odómetro,
   badges/hover, loader, sonido. (Descartados: empty state, bezel, scanline.)
   ========================================================================= */

/* EFECTO 1 — encendido de CRT (power-on) */
@keyframes crt-power-on{
  0%   {opacity:0;  transform:scale(1.35,.0018); filter:brightness(7)}
  32%  {opacity:1;  transform:scale(1.35,.004);  filter:brightness(6)}
  48%  {            transform:scale(1.04,.03);   filter:brightness(4.5)}
  68%  {            transform:scale(1,1.06);      filter:brightness(2)}
  84%  {            transform:scale(1,.985);      filter:brightness(1.3)}
  100% {            transform:scale(1,1);         filter:brightness(1)}
}
@keyframes crt-flash{0%{opacity:0}10%{opacity:.55}100%{opacity:0}}
.power-flash{position:fixed;inset:0;z-index:90;pointer-events:none;background:#fff;opacity:0}
.power .page{animation:crt-power-on .72s cubic-bezier(.2,.85,.2,1) both;transform-origin:center 42%}
.power .power-flash{animation:crt-flash .5s ease-out both}

/* EFECTO 2 — cursor de bloque del boot (el tecleo lo hace fx.js) */
.boot-cursor{display:inline-block;color:var(--green);text-shadow:var(--glow-sm);animation:bl 1s steps(2) infinite;margin-left:1px}

/* EFECTO 3 — piso synthwave en movimiento (sutil, pegado al fondo) */
@keyframes floor-scroll{from{background-position:0 0,0 0}to{background-position:0 34px,0 0}}
.bg .grid{
  height:8vh; opacity:.5;
  background-image:
    linear-gradient(rgba(255,182,39,.20) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,182,39,.11) 1px,transparent 1px);
  -webkit-mask:linear-gradient(0deg,#000 6%,rgba(0,0,0,.5) 50%,transparent 96%);
  mask:linear-gradient(0deg,#000 6%,rgba(0,0,0,.5) 50%,transparent 96%);
  animation:floor-scroll 2s linear infinite;
}
.bg .horizon{bottom:8vh; opacity:.45; box-shadow:0 0 20px rgba(255,158,44,.35)}

/* EFECTO 4 — aberración cromática (VHS): fantasma cyan/magenta + glitch */
.bigwm{
  font-size:clamp(22px,5vw,49px);   /* un pelín más chico para que no se desborde a la derecha y quede balanceado */
  text-shadow:
    -3px 0 rgba(25,230,255,.75),
     3px 0 rgba(255,45,149,.75),
     0 0 6px rgba(255,182,39,.85),0 0 22px rgba(255,158,44,.55),0 0 44px rgba(255,122,0,.35);
  animation:vhs-jolt 6s linear infinite;
}
@keyframes vhs-jolt{
  0%,90%,100%{transform:translateX(0) skewX(0)}
  91%  {transform:translateX(-3px) skewX(-.7deg)}
  92.5%{transform:translateX(4px)}
  94%  {transform:translateX(-2px)}
  95%  {transform:translateX(0)}
}
.brand .wm .a{text-shadow:-1.2px 0 rgba(25,230,255,.6),1.2px 0 rgba(255,45,149,.55),0 0 5px rgba(255,182,39,.7)}
/* móvil: el título del hero baja de línea y no se desborda (fx.js cambia los   por espacios) */
@media(max-width:600px){
  .bigwm{font-size:clamp(18px,7vw,32px);line-height:1.3;white-space:normal;word-break:keep-all}
}

/* EFECTO 5 — íconos pixel-art por categoría (el SVG lo inyecta fx.js) */
.cat-card .ico svg{width:42px;height:42px}

/* MARCAS POPULARES — nombre en VERDE FÓSFORO pixel (mayúsculas + glow), sin logo */
.brand-chip{color:#7CFC6B;text-transform:uppercase;letter-spacing:1px;text-shadow:0 0 6px rgba(124,252,107,.55),0 0 15px rgba(124,252,107,.28)}
.brand-chip:hover{color:#b6ffc4;border-color:rgba(124,252,107,.5);box-shadow:0 0 14px rgba(124,252,107,.25)}

/* EFECTO 9 — badges color + hover de tarjeta + título destacado verde fósforo
   (requiere car_card() de functions.php para badges/placeholder/featured;
   pendiente porque hoy el sitio tiene 0 anuncios — CSS listo para cuando haya) */
.car-card .thumb{display:grid;place-items:center;background:var(--bg)}
.car-card .thumb .ph{width:62%;color:var(--green-dim);opacity:.5;filter:drop-shadow(0 0 8px rgba(255,182,39,.3));transition:.25s}
.car-card:hover .thumb .ph{opacity:.85;transform:scale(1.04)}
.card-sweep{position:absolute;left:0;right:0;height:45%;top:-45%;pointer-events:none;opacity:0;mix-blend-mode:screen;background:linear-gradient(180deg,transparent,rgba(25,230,255,.16) 40%,rgba(255,182,39,.18) 60%,transparent)}
.car-card:hover .card-sweep{animation:cardsweep .75s ease-in-out}
@keyframes cardsweep{0%{top:-45%;opacity:0}15%{opacity:1}100%{top:115%;opacity:0}}
.badge.new{box-shadow:0 0 10px rgba(25,230,255,.3)}
.badge.featured{box-shadow:0 0 10px rgba(255,45,149,.3)}
.car-card.featured .title{color:#7CFC6B;text-shadow:0 0 8px rgba(124,252,107,.6)}

/* EFECTO 11 — loader cassette + botón de sonido (ambos los inyecta fx.js) */
.loader{margin-top:14px;display:none}
.loader.on{display:block}
.loader .llabel{font-family:var(--term);font-size:18px;color:#cdeac0}
.loader .llabel .ok{color:#7CFC6B}
.loader .lbar{margin-top:7px;height:14px;border:1px solid var(--border-strong);border-radius:4px;background:#0c0a12;overflow:hidden}
.loader .lfill{height:100%;width:0;background:repeating-linear-gradient(90deg,var(--green) 0 7px,#0c0a12 7px 9px);box-shadow:var(--glow-sm)}
.mute-btn{position:fixed;right:14px;bottom:14px;z-index:80;cursor:pointer;font-family:var(--pixel);font-size:9px;letter-spacing:1px;color:#7CFC6B;background:rgba(5,3,7,.85);border:1px solid rgba(124,252,107,.4);border-radius:6px;padding:9px 11px;text-shadow:0 0 6px rgba(124,252,107,.4);transition:.16s}
.mute-btn:hover{border-color:#7CFC6B;box-shadow:0 0 12px rgba(124,252,107,.3)}
.mute-btn.muted{color:#b79a6a;border-color:var(--border);text-shadow:none}

@media(prefers-reduced-motion:reduce){
  .power .page,.power .power-flash{animation:none}
  .bg .grid{animation:none}
  .bigwm{animation:none}
  .car-card:hover .card-sweep{animation:none}
}

/* SPLASH de bienvenida — pantalla negra + botón de encendido verde fósforo (lo inyecta fx.js).
   Resuelve el bloqueo de autoplay: el clic en "encender" ES el gesto que desbloquea el audio. */
.amx-splash{position:fixed;inset:0;z-index:9999;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;cursor:pointer;transition:opacity .6s ease}
.amx-splash.off{opacity:0;pointer-events:none}
.amx-power{width:148px;height:148px;background:none;border:0;padding:0;cursor:pointer;display:grid;place-items:center;transition:transform .15s;
  filter:drop-shadow(0 0 8px rgba(124,252,107,.9)) drop-shadow(0 0 22px rgba(124,252,107,.6)) drop-shadow(0 0 44px rgba(124,252,107,.4));
  animation:pwr-pulse 1.8s ease-in-out infinite}
.amx-power:hover{transform:scale(1.06)} .amx-power:active{transform:scale(.95)}
.amx-power svg{width:100%;height:100%;display:block}
@keyframes pwr-pulse{
  0%,100%{filter:drop-shadow(0 0 6px rgba(124,252,107,.85)) drop-shadow(0 0 16px rgba(124,252,107,.6)) drop-shadow(0 0 32px rgba(124,252,107,.4))}
  50%    {filter:drop-shadow(0 0 10px rgba(124,252,107,1)) drop-shadow(0 0 26px rgba(124,252,107,.8)) drop-shadow(0 0 54px rgba(124,252,107,.55))}
}
.amx-splash .amx-hint{font-family:var(--pixel);font-size:10px;letter-spacing:3px;color:#7CFC6B;text-shadow:0 0 8px rgba(124,252,107,.6);animation:bl 1.4s steps(2) infinite}
@media(prefers-reduced-motion:reduce){.amx-power{animation:none}.amx-splash .amx-hint{animation:none}}