/* Neptuno v2 — frost2-lab.css
   Presentacion para el motor de congelacion v2 (frost2-lab.js) y su fondo vivo (life-lab.js).
   Hereda paleta/mono de frost-lab.css (--void --deep --cyan --ice --steel --green --mono etc.);
   este archivo NO redefine esos tokens, solo anade lo que el motor nuevo necesita. */

/* ---------- fondo vivo (life-lab) dentro de .sky ----------
   Vive DENTRO de .sky, como ultimo hijo: si NeptunoLife monta, su canvas pinta
   sobre el fondo CSS; si no existe todavia, queda transparente y el fondo CSS
   (space-lab.css) se ve sin ningun hueco. */
.f2-life{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}

/* ---------- canvas de escarcha ----------
   Encima de .stage (z-index:1), debajo de .chrome (z-index:20). Oculto hasta que
   frost2-lab.js confirme F>0 (politica de repintado, brief SS9). */
.f2-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:10;
  pointer-events:none;visibility:hidden}

/* ---------- fallback sin WebGL2 ----------
   Nunca un hueco: si stats().gl === 'none', el glue script marca data-f2-fallback en .vp
   y este wash estatico (sin animar) sustituye al canvas. Mismo tinte que L1 del motor v1. */
.f2-fallback{position:absolute;inset:0;z-index:10;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse 106% 98% at 50% 46%,
    rgba(8,38,68,0) 0%, rgba(8,38,68,0) 30%, rgba(8,38,68,.30) 68%, rgba(8,38,68,.55) 100%)}
[data-f2-fallback] .f2-fallback{opacity:var(--f2, 0)}
[data-f2-fallback] .f2-canvas{display:none}

/* ---------- planeta escarchado al final (brief SS6.1) ----------
   El planeta es el UNICO elemento del heroe que no puede helarse solo: vive dentro de la
   ventana legible, que es justo la zona que el canvas de escarcha deja limpia a proposito.
   Asi que lleva su propia costra, keyada al mismo --f2 que el glue ya publica por .vp y con
   el mismo umbral 0.55 que usa life-lab para su modo escarcha — una sola verdad, dos capas.
   opacity negativa se satura a 0 sola: por debajo de F=0.55 esta capa no existe. */
.vp .planet::after{content:"";position:absolute;inset:-4%;border-radius:50%;
  pointer-events:none;z-index:9;mix-blend-mode:screen;filter:blur(.5px);
  opacity:calc((var(--f2, 0) - .55) * 2.222);
  background:
    radial-gradient(circle at 30% 26%,
      rgba(255,255,255,0) 0%, rgba(255,255,255,0) 36%,
      rgba(214,244,255,.26) 64%, rgba(240,253,255,.72) 87%, rgba(255,255,255,.92) 100%),
    conic-gradient(from 20deg at 50% 50%,
      rgba(226,248,255,.50) 0deg, rgba(226,248,255,0) 26deg,
      rgba(226,248,255,.44) 60deg, rgba(226,248,255,0) 92deg,
      rgba(226,248,255,.50) 128deg, rgba(226,248,255,0) 160deg,
      rgba(226,248,255,.38) 200deg, rgba(226,248,255,0) 236deg,
      rgba(226,248,255,.48) 272deg, rgba(226,248,255,0) 304deg,
      rgba(226,248,255,.40) 340deg, rgba(226,248,255,.50) 360deg)}

/* ---------- panel de control (escaparate) ----------
   Barra inferior con el deslizador de F y la lectura en vivo. Es chrome de banco de
   pruebas, no del sitio final: por eso vive fuera de .chrome (no pretende ser nav). */
.f2-panel{position:absolute;left:24px;right:24px;bottom:22px;z-index:21;
  display:flex;align-items:center;gap:18px;padding:14px 20px;border-radius:10px;
  background:rgba(4,10,20,.74);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border:1px solid rgba(0,243,255,.22);box-shadow:0 12px 34px rgba(0,4,12,.5)}
.f2-panel .f2-lab{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--cyan);flex:0 0 auto}
.f2-panel input[type="range"]{flex:1 1 auto;-webkit-appearance:none;appearance:none;
  height:3px;border-radius:3px;background:linear-gradient(to right,#1e3a8a,#00f3ff);outline:none;cursor:pointer}
.f2-panel input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:17px;height:17px;border-radius:50%;background:#fff;border:2px solid var(--cyan);
  box-shadow:0 0 10px rgba(0,243,255,.7);cursor:grab}
.f2-panel input[type="range"]::-moz-range-thumb{width:13px;height:13px;border-radius:50%;
  background:#fff;border:2px solid var(--cyan);box-shadow:0 0 10px rgba(0,243,255,.7);cursor:grab}
.f2-readout{display:flex;gap:20px;flex:0 0 auto}
.f2-readout div{display:flex;flex-direction:column;align-items:flex-end;gap:1px;min-width:56px}
.f2-readout .k{font-family:var(--mono);font-size:9px;letter-spacing:.14em;color:#64748b;text-transform:uppercase}
.f2-readout .v{font-family:'Rajdhani',sans-serif;font-weight:700;font-size:17px;color:var(--ice);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.f2-readout .v.warm{color:#fbbf24}

/* ---------- termometro reactivo ----------
   Pulso al cruzar un umbral de capa (brief SS9: "el termometro reacciona").
   Vapor bajo 0 F: dos hilos verticales que derivan, solo decorativos (aria-hidden ya
   lo cubre el propio .therm en frost-lab.css). */
@keyframes f2pulse{0%{filter:drop-shadow(0 0 0 rgba(0,243,255,0))}
  35%{filter:drop-shadow(0 0 9px rgba(0,243,255,.95))}100%{filter:drop-shadow(0 0 0 rgba(0,243,255,0))}}
.therm.f2-pulse .val,.therm.f2-pulse .pval{animation:f2pulse .5s ease-out}
.therm .vapor{position:absolute;left:50%;bottom:0;width:1px;height:0;pointer-events:none;
  background:linear-gradient(to top,rgba(200,238,255,0),rgba(200,238,255,.5),rgba(200,238,255,0));
  opacity:0;transition:height .6s ease,opacity .6s ease}
.therm[data-below32] .vapor{opacity:.6}
.therm .vapor.v2{left:auto;right:50%}
@keyframes f2wisp{0%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-6px)}100%{transform:translateX(-50%) translateY(0)}}
.therm .vapor{animation:f2wisp 3.6s ease-in-out infinite}

/* ---------- movimiento reducido ----------
   Estado estatico digno, no estado apagado: el hielo, el tinte y la ventana legible son
   identicos; lo unico que se apaga es lo que se mueve (centelleo, deriva del vaho, vapor
   del termometro, pulso de umbral). Nada de lo que se LEE depende del movimiento. */
@media (prefers-reduced-motion: reduce){
  .therm .vapor{animation:none;transition:none}
  .therm.f2-pulse .val,.therm.f2-pulse .pval{animation:none}
  .vp .planet::after{filter:none}
}

/* ---------- anotacion tecnica reusable (anatomia) ---------- */
.f2-tag{position:absolute;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  color:#4b6478;white-space:nowrap}
.f2-tag b{color:#a5f3fc;font-weight:600}