/* =====================================================================
   css/holo-film.css · DIRECTOR (película / proyector / HUD) · prefijo hf-
   ---------------------------------------------------------------------
   Lo controla js/holo-film.js. Clases de estado en <html>:
     html.holo      siempre que el JS del director arrancó
     html.holo-mo   además, si NO hay prefers-reduced-motion (efectos activos)
     html.hf-paused pestaña oculta: se congelan las animaciones hf-
   En cada sección-escena: data-holo="wait" (aún no proyectada) → "on".

   MATERIAL REUTILIZABLE (lo pueden usar los demás agentes)
   El director observa estos elementos (también los que se inyecten más tarde,
   vía MutationObserver, o a mano con window.holoFilm.observe(el)) y les pone:
     .hf-go  una vez, al entrar en pantalla → dispara la animación de entrada
     .hf-in  mientras están en pantalla      → los bucles solo corren con .hf-in
   Sin JS o con reduced-motion se ven en su fotograma final (nada oculto).
   Variables comunes: --hf-d (retardo, p. ej. 120ms), --hf-dur (duración).

   .hf-scan         Haz de luz azul que recorre el elemento UNA vez, de arriba abajo.
                    <div class="mi-panel hf-scan">…</div>
                    Usa ::before (si tu elemento ya lo usa, envuélvelo). Pon tu propio
                    position si lo necesitas (por defecto relative con especificidad 0).
                    --hf-trail: alto de la estela (def. 22%).

   .hf-materialize  Wireframe → sólido: el elemento aparece como alambre azul con
                    rejilla de puntos, parpadea sutil (.85–1) y se solidifica.
                    <figure class="hf-materialize" style="--hf-d:200ms">…</figure>
                    Usa ::after y anima opacity/filter: NO lo pongas en un .rev
                    (chocaría con su transición); ponlo en un hijo o un envoltorio.

   .hf-callout      Anotación HUD en mono con punto ancla y línea guía.
                    <span class="hf-callout" style="--hf-len:56px">LATENCIA <b>42 ms</b></span>
                    El punto ancla queda a la izquierda; .is-left lo pone a la derecha.
                    Posiciónalo tú (absolute/top/left). Decorativo: aria-hidden="true".

   .hf-emitter      Disco emisor holográfico (elipse con anillos que laten y cono de luz).
                    <div class="hf-emitter" aria-hidden="true" style="--hf-size:260px"></div>
                    .is-flat quita el cono. Colócalo bajo el objeto que "proyecta".

   Otras piezas propias (no reutilizar): .hf-hud (proyector), .hf-line (bobina móvil),
   .hf-slate (claqueta de escena), .hf-fx (pase de proyección), .hf-light, .hf-grain.
   z-index: HUD 900 · decoración ≤5 · grano 140 (bajo el chat, 150).
   ===================================================================== */

:root{
  --hf-blue:var(--holo,#2AA5F5); --hf-hi:var(--holo-hi,#7FD0FF);
  --hf-dim:var(--holo-dim,rgba(42,165,245,.35)); --hf-faint:var(--holo-faint,rgba(42,165,245,.12));
  --hf-red:var(--holo-red,#FF3B3B); --hf-text:var(--holo-text,#EAF0FA); --hf-muted:var(--holo-muted,#8C9AB5);
  --hf-mono:var(--f-mono,'JetBrains Mono',ui-monospace,monospace);
  --hf-ease:cubic-bezier(.22,1,.36,1); --hf-sweep:cubic-bezier(.55,.06,.3,1);
}

/* ---------- keyframes ---------- */
@keyframes hfFade{from{opacity:0}}
@keyframes hfOut{to{opacity:0}}
@keyframes hfLineX{from{transform:scaleX(0)}}
@keyframes hfLineY{from{transform:scaleY(0)}}
@keyframes hfDraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes hfBlink{0%,100%{opacity:1}50%{opacity:.28}}
@keyframes hfFlick{0%{opacity:0}18%{opacity:.9}26%{opacity:.4}40%{opacity:1}62%{opacity:.86}100%{opacity:1}}
@keyframes hfSwap{0%{opacity:0;transform:translate3d(0,-6px,0)}55%{opacity:.85}70%{opacity:.6}100%{opacity:1;transform:none}}
@keyframes hfBeam{0%{opacity:0;transform:translate3d(0,-100%,0)}8%{opacity:1}88%{opacity:1}100%{opacity:0;transform:translate3d(0,calc(var(--hf-h,600px) - 100%),0)}}
@keyframes hfReveal{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes hfScan{0%{transform:translate3d(0,-100%,0);clip-path:inset(100% 0 0 0);opacity:1}
  86%{transform:translate3d(0,0,0);clip-path:inset(0 0 0 0);opacity:1}
  100%{transform:translate3d(0,0,0);clip-path:inset(0 0 0 0);opacity:0}}
@keyframes hfMat{0%{opacity:0;filter:brightness(1.7) saturate(.3)}30%{opacity:.6}38%{opacity:.36}55%{opacity:.92}68%{opacity:.85}100%{opacity:1;filter:none}}
@keyframes hfWire{0%{opacity:0;clip-path:inset(0 0 100% 0)}30%{opacity:1;clip-path:inset(0 0 0 0)}70%{opacity:1}100%{opacity:0;clip-path:inset(0 0 0 0)}}
@keyframes hfAber{
  0%{opacity:.85;filter:drop-shadow(-3px 0 0 rgba(255,59,59,.6)) drop-shadow(3px 0 0 rgba(42,165,245,.75))}
  14%{opacity:1}
  24%{opacity:.86;filter:drop-shadow(-2px 0 0 rgba(255,59,59,.5)) drop-shadow(2px 0 0 rgba(42,165,245,.6))}
  36%{opacity:1}
  62%{filter:drop-shadow(-1px 0 0 rgba(255,59,59,.22)) drop-shadow(1px 0 0 rgba(42,165,245,.3))}
  100%{opacity:1;filter:drop-shadow(0 0 0 rgba(255,59,59,0)) drop-shadow(0 0 0 rgba(42,165,245,0))}}
@keyframes hfPop{0%{transform:scale(0)}70%{transform:scale(1.25)}100%{transform:scale(1)}}
@keyframes hfRing{0%{transform:scale(.72);opacity:.75}100%{transform:scale(1.32);opacity:0}}
@keyframes hfCone{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes hfClap{0%{transform:rotate(-24deg)}55%{transform:rotate(-24deg)}72%{transform:rotate(2deg)}100%{transform:rotate(0)}}
@keyframes hfGlint{from{transform:translate3d(-100%,0,0)}to{transform:translate3d(100%,0,0)}}
@keyframes hfGrain{0%{transform:translate3d(0,0,0)}20%{transform:translate3d(-38px,22px,0)}40%{transform:translate3d(26px,-40px,0)}60%{transform:translate3d(-14px,-18px,0)}80%{transform:translate3d(40px,30px,0)}}

/* =====================================================================
   1. MATERIAL REUTILIZABLE
   ===================================================================== */

/* ---- .hf-scan ---- */
:where(.hf-scan){position:relative}
.hf-scan::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,rgba(42,165,245,0) calc(100% - var(--hf-trail,22%)),rgba(42,165,245,.13) calc(100% - 3px),rgba(127,208,255,.95) calc(100% - 1.5px),rgba(127,208,255,0) 100%)}
html.holo-mo .hf-scan.hf-go::before{animation:hfScan var(--hf-dur,1100ms) var(--hf-sweep) var(--hf-d,0ms) both}

/* ---- .hf-materialize ---- */
:where(.hf-materialize){position:relative}
.hf-materialize::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0;border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(127,208,255,.7),0 0 18px -4px rgba(42,165,245,.6);
  background:radial-gradient(rgba(127,208,255,.32) 1px,transparent 1.6px) 0 0/12px 12px}
html.holo-mo .hf-materialize:not(.hf-go){opacity:0}
html.holo-mo .hf-materialize.hf-go{animation:hfMat var(--hf-dur,1000ms) var(--hf-ease) var(--hf-d,0ms) both}
html.holo-mo .hf-materialize.hf-go::after{animation:hfWire calc(var(--hf-dur,1000ms) * 1.3) var(--hf-ease) var(--hf-d,0ms) both}

/* ---- .hf-callout ---- */
.hf-callout{display:inline-flex;align-items:center;gap:8px;font:500 11px/1.2 var(--hf-mono);letter-spacing:.08em;text-transform:uppercase;
  color:var(--hf-text);white-space:nowrap;pointer-events:none;text-shadow:0 0 10px rgba(42,165,245,.45)}
.hf-callout b{font-weight:700;color:var(--hf-hi)}
.hf-callout::before{content:"";order:-2;flex:none;width:7px;height:7px;border-radius:50%;background:var(--hf-hi);
  box-shadow:0 0 0 3px rgba(42,165,245,.18),0 0 10px rgba(127,208,255,.9)}
.hf-callout::after{content:"";order:-1;flex:none;width:var(--hf-len,48px);height:1px;background:var(--hf-blue);
  box-shadow:0 0 6px rgba(42,165,245,.8);transform-origin:0 50%}
.hf-callout.is-left{flex-direction:row-reverse}
.hf-callout.is-left::after{transform-origin:100% 50%}
html.holo-mo .hf-callout:not(.hf-go){opacity:0}
html.holo-mo .hf-callout.hf-go{animation:hfFlick 700ms linear calc(var(--hf-d,0ms) + 380ms) both}
html.holo-mo .hf-callout.hf-go::before{animation:hfPop 420ms var(--hf-ease) var(--hf-d,0ms) both}
html.holo-mo .hf-callout.hf-go::after{animation:hfLineX 520ms var(--hf-ease) calc(var(--hf-d,0ms) + 120ms) both}

/* ---- .hf-emitter ---- */
.hf-emitter{position:relative;width:var(--hf-size,240px);aspect-ratio:4/1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(127,208,255,.55) 0 10%,rgba(42,165,245,0) 11% 33%,rgba(42,165,245,.5) 34% 36%,rgba(42,165,245,0) 37% 58%,rgba(42,165,245,.28) 59% 61%,rgba(42,165,245,.10) 62% 92%,rgba(42,165,245,0) 100%);
  box-shadow:inset 0 0 0 1px rgba(127,208,255,.5),0 0 24px -6px rgba(42,165,245,.7)}
.hf-emitter::before{content:"";position:absolute;left:14%;right:14%;bottom:50%;height:calc(var(--hf-size,240px) * .9);
  clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);
  background:linear-gradient(0deg,rgba(42,165,245,.20),rgba(42,165,245,0));transform-origin:50% 100%}
.hf-emitter.is-flat::before{content:none}
.hf-emitter::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(127,208,255,.7);opacity:0}
html.holo-mo .hf-emitter.hf-in::after{animation:hfRing 2.8s cubic-bezier(.2,.6,.3,1) infinite}
html.holo-mo .hf-emitter.hf-in::before{animation:hfCone 4.2s ease-in-out infinite}
html.holo-mo .hf-emitter:not(.hf-go){opacity:0}
html.holo-mo .hf-emitter.hf-go{animation:hfFade 900ms var(--hf-ease) var(--hf-d,0ms) both}
html.holo-mo .hf-emitter.hf-go::before{animation:hfLineY 900ms var(--hf-ease) calc(var(--hf-d,0ms) + 200ms) both}
html.holo-mo .hf-emitter.hf-go.hf-in::before{animation:hfLineY 900ms var(--hf-ease) calc(var(--hf-d,0ms) + 200ms) both,hfCone 4.2s ease-in-out 1.2s infinite}

/* =====================================================================
   2. PROYECTOR (HUD) · tira vertical en el borde izquierdo (≥1340 px)
   ===================================================================== */
.hf-hud{position:fixed;left:20px;top:50%;z-index:900;display:none;flex-direction:column;align-items:center;gap:10px;width:30px;padding:10px 0;
  transform:translate3d(-8px,-50%,0);opacity:0;pointer-events:none;
  border-radius:15px;background:rgba(4,8,17,.62);box-shadow:inset 0 0 0 1px rgba(42,165,245,.16),0 10px 30px -12px rgba(0,0,0,.8);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  font:500 10px/1 var(--hf-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hf-muted);
  transition:opacity .5s var(--hf-ease),transform .5s var(--hf-ease)}
.hf-hud.hf-on,.hf-hud:focus-within{opacity:1;transform:translate3d(0,-50%,0);pointer-events:auto}
.hf-hud-head,.hf-hud-scene{display:flex;flex-direction:column;align-items:center;gap:8px}
.hf-rec{display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--hf-red);font-weight:700;font-size:9px}
.hf-rec i{width:6px;height:6px;border-radius:50%;background:var(--hf-red);box-shadow:0 0 8px rgba(255,59,59,.85)}
.hf-rec b{writing-mode:vertical-rl;font-weight:700}
.hf-tc,.hf-scene-txt{writing-mode:vertical-rl;white-space:nowrap;font-variant-numeric:tabular-nums}
.hf-tc{color:var(--hf-text);letter-spacing:.06em;min-height:7.9em}
.hf-tc span{color:var(--hf-muted)}
.hf-hud-scene{height:172px;justify-content:flex-start;overflow:hidden}
.hf-scene-txt{color:var(--hf-text);display:block}
.hf-scene-txt em{font-style:normal;color:var(--hf-hi)}
.hf-scene-txt.hf-swap{animation:hfSwap 520ms var(--hf-ease)}
.hf-sep{width:12px;height:1px;background:rgba(42,165,245,.3)}

/* bobina: una marca por escena, pista con relleno de progreso */
.hf-reel-wrap{position:relative;display:flex;justify-content:center}
.hf-reel-track,.hf-reel-fill{position:absolute;left:50%;top:14px;bottom:14px;width:1px;margin-left:-.5px;pointer-events:none}
.hf-reel-track{background:rgba(140,154,181,.22)}
.hf-reel-fill{background:var(--hf-blue);box-shadow:0 0 6px rgba(42,165,245,.8);transform-origin:50% 0;transform:scaleY(0)}
.hf-reel{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;position:relative}
.hf-reel li{display:block}
.hf-tick{position:relative;display:grid;place-items:center;width:30px;height:28px;padding:0;border:0;background:none;cursor:pointer;color:inherit;border-radius:6px}
.hf-tick::before{content:"";width:8px;height:1.5px;border-radius:1px;background:rgba(140,154,181,.55);transition:width .35s var(--hf-ease),background-color .35s var(--hf-ease),box-shadow .35s var(--hf-ease)}
.hf-tick.is-past::before{background:rgba(42,165,245,.7)}
.hf-tick[aria-current]::before{width:16px;height:2px;background:var(--hf-hi);box-shadow:0 0 8px rgba(127,208,255,.9)}
.hf-tick:hover::before{width:14px;background:var(--hf-text)}
.hf-tick:focus-visible{outline:2px solid var(--hf-blue);outline-offset:-2px}
.hf-tip{position:absolute;left:calc(100% + 10px);top:50%;transform:translate3d(-4px,-50%,0);opacity:0;pointer-events:none;white-space:nowrap;
  padding:6px 9px;border-radius:6px;background:rgba(4,8,17,.92);box-shadow:inset 0 0 0 1px rgba(42,165,245,.3);color:var(--hf-text);
  font:500 10.5px/1 var(--hf-mono);letter-spacing:.08em;text-transform:uppercase;transition:opacity .2s,transform .2s var(--hf-ease)}
.hf-tip b{color:var(--hf-hi);font-weight:700;margin-right:6px}
.hf-tick:hover .hf-tip,.hf-tick:focus-visible .hf-tip{opacity:1;transform:translate3d(0,-50%,0)}

@media(min-width:1366px){.hf-hud{display:flex}} /* QA: antes 1340; entre 1340 y 1365 px la bobina rozaba el texto (x=50) */
@media(max-height:700px){.hf-hud-scene,.hf-hud .hf-sep.s2{display:none}.hf-tick{height:24px}}
@media(max-height:560px){.hf-hud-head,.hf-hud .hf-sep{display:none}}
html.holo-mo .hf-hud .hf-rec i{animation:hfBlink 1.6s ease-in-out infinite}

/* bobina mínima (<1340 px): marcas de escena sobre la barra de progreso superior */
.hf-line{position:fixed;left:0;right:0;top:0;height:6px;z-index:201;pointer-events:none;display:none}
.hf-line i{position:absolute;top:0;width:1px;height:5px;background:rgba(234,240,250,.35);transition:background-color .3s,height .3s}
.hf-line i.is-past{background:var(--hf-hi);height:6px;box-shadow:0 0 6px rgba(127,208,255,.9)}
@media(max-width:1365px){.hf-line{display:block}}
body:has(#chatPanel.open) .hf-line{display:none}
@media(max-width:600px){body:has(#chatPanel.open) .hf-hud{display:none}}

/* =====================================================================
   3. CLAQUETA (intertítulo de escena) · franja en el padding superior
   ===================================================================== */
.hf-slate{position:absolute;left:0;right:0;top:44px;z-index:3;pointer-events:none}
.hf-slate-in{max-width:var(--maxw,1288px);margin:0 auto;padding:0 var(--gutter,24px);display:flex;align-items:center;gap:12px;height:20px;
  font:500 11px/1 var(--hf-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--hf-muted);white-space:nowrap}
.hf-slate-t{flex:none}
.hf-slate-t b{color:var(--hf-hi);font-weight:700;text-shadow:0 0 12px rgba(42,165,245,.6)}
.hf-slate-t strong{color:var(--hf-text);font-weight:500}
.hf-slate-t i{font-style:normal;color:rgba(42,165,245,.6);margin:0 .35em}
.hf-slate-t em{font-style:normal;color:var(--hf-text);font-variant-numeric:tabular-nums}
.hf-clap{flex:none;width:18px;height:15px;overflow:visible;color:rgba(127,208,255,.8)}
.hf-clap .hf-clap-top{transform-origin:1px 5px}
.hf-slate-line{position:relative;flex:1 1 auto;min-width:24px;height:1px;background:rgba(42,165,245,.32);overflow:hidden;transform-origin:0 50%}
.hf-slate-line::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(127,208,255,0) 70%,rgba(127,208,255,1));transform:translate3d(-100%,0,0)}
.hf-slate-tag{flex:none;color:rgba(140,154,181,.75)}
.hf-slate-tag::before{content:"";display:inline-block;width:5px;height:5px;margin-right:8px;vertical-align:1px;border-radius:50%;background:var(--hf-red);box-shadow:0 0 6px rgba(255,59,59,.8)}
/* .is-end: la escena empieza con una banda sin padding → la claqueta va al final de la sección anterior */
.hf-slate.is-end{top:auto;bottom:44px}
@media(max-width:600px){
  .hf-slate{top:26px}
  .hf-slate.is-end{top:auto;bottom:26px}
  .hf-slate-in{gap:8px;font-size:10px}
  .hf-slate-tag,.hf-slate-t .hf-take{display:none}
}
/* MÓVIL-1 · ritmo de la claqueta en tableta/teléfono: su texto termina 32 px por encima del kicker de la sección
   (antes 35–37 px, fuera de escala) y queda más cerca del título que del borde superior (proximidad) */
@media(max-width:960px){
  .hf-slate:not(.is-end){top:calc(var(--sec-y,96px) - 49px)}
}
@media(min-width:361px) and (max-width:600px){
  .hf-slate-in{font-size:11px}
}
html.holo-mo .hf-slate:not(.hf-go) :is(.hf-slate-t,.hf-clap,.hf-slate-tag){opacity:0}
html.holo-mo .hf-slate:not(.hf-go) .hf-slate-line{transform:scaleX(0)}
html.holo-mo .hf-slate.hf-go .hf-clap{animation:hfFade 300ms var(--hf-ease) both}
html.holo-mo .hf-slate.hf-go .hf-clap-top{animation:hfClap 700ms var(--hf-ease) both}
html.holo-mo .hf-slate.hf-go .hf-slate-t{animation:hfFlick 760ms linear 240ms both}
html.holo-mo .hf-slate.hf-go .hf-slate-line{animation:hfLineX 1100ms var(--hf-ease) 380ms both}
html.holo-mo .hf-slate.hf-go .hf-slate-line::after{animation:hfGlint 1400ms var(--hf-sweep) 700ms both}
html.holo-mo .hf-slate.hf-go .hf-slate-tag{animation:hfFade 500ms var(--hf-ease) 1100ms both}

/* =====================================================================
   4. PASE DE PROYECCIÓN (primera entrada de cada sección; lo crea el JS)
   ===================================================================== */
.hf-fx{position:absolute;left:0;right:0;z-index:5;pointer-events:none;overflow:hidden;contain:layout paint}
.hf-fx-beam{position:absolute;left:0;right:0;top:0;height:160px;opacity:0;
  background:linear-gradient(180deg,rgba(42,165,245,0),rgba(42,165,245,.07) 70%,rgba(42,165,245,.16) calc(100% - 3px),rgba(127,208,255,.95) calc(100% - 1.5px),rgba(127,208,255,0));
  animation:hfBeam var(--hf-dur,1200ms) var(--hf-sweep) both}
.hf-fx-beam::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:rgba(127,208,255,.55);filter:blur(3px)}
.hf-fx-grid{position:absolute;inset:0;
  background:radial-gradient(rgba(127,208,255,.34) 1px,transparent 1.6px) 0 0/24px 24px;
  animation:hfReveal var(--hf-dur,1200ms) var(--hf-sweep) both,hfOut 700ms var(--hf-ease) var(--hf-dur,1200ms) forwards}
.hf-fx-wire{position:absolute;left:0;top:0;overflow:visible;animation:hfOut 600ms var(--hf-ease) calc(var(--hf-dur,1200ms) + 380ms) forwards}
.hf-fx-wire rect{fill:rgba(42,165,245,.035);stroke:rgba(127,208,255,.75);stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;
  animation:hfDraw 620ms var(--hf-ease) var(--d,0ms) forwards}
.hf-fx-wire g{animation:hfFlick 640ms linear var(--d,0ms) both}
.hf-fx-wire path{fill:none;stroke:var(--hf-hi);stroke-width:1.5}
.hf-fx-wire text{font:500 9.5px var(--hf-mono);letter-spacing:.08em;fill:var(--hf-hi)}
/* titular que se materializa: aberración cromática roja/azul y parpadeo sutil (2 caídas, ≤3/s) */
html.holo-mo .hf-h2go{animation:hfAber 950ms linear both}

/* =====================================================================
   5. LUZ DEL CURSOR Y GRANO DE PROYECTOR (solo escritorio, puntero fino)
   ===================================================================== */
.hf-light{position:fixed;left:0;top:0;width:440px;height:440px;z-index:4;pointer-events:none;opacity:0;overflow:hidden;border-radius:50%;
  mix-blend-mode:screen;transition:opacity .4s var(--hf-ease);will-change:transform;
  -webkit-mask:radial-gradient(closest-side,#000,rgba(0,0,0,.55) 45%,transparent);mask:radial-gradient(closest-side,#000,rgba(0,0,0,.55) 45%,transparent)}
.hf-light.on{opacity:1}
.hf-light::before{content:"";position:absolute;inset:0;background:radial-gradient(closest-side,rgba(42,165,245,.10),rgba(42,165,245,0))}
.hf-light i{position:absolute;left:0;top:0;width:488px;height:488px;will-change:transform;
  background:radial-gradient(rgba(127,208,255,.42) 1px,transparent 1.6px) 0 0/24px 24px}
/* QA: la capa fija ya no sobresale del viewport (inset:-60px podía sumar desbordamiento horizontal si un ancestro
   crea bloque contenedor); el ruido sobredimensionado vive en ::before, recortado */
.hf-grain{position:fixed;inset:0;overflow:hidden;z-index:140;pointer-events:none;opacity:.035}
.hf-grain::before{content:"";position:absolute;inset:-60px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .75 0 0 0 0 .85 0 0 0 0 1 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/180px 180px;
  animation:hfGrain 1s steps(1) infinite}
@media(max-width:900px),(hover:none){.hf-light,.hf-grain{display:none}}

/* ---------- pausa con la pestaña oculta ---------- */
html.hf-paused :is(.hf-hud,.hf-hud *,.hf-emitter,.hf-grain,.hf-slate *,.hf-fx *),
html.hf-paused :is(.hf-emitter,.hf-scan,.hf-materialize,.hf-grain)::before,html.hf-paused :is(.hf-emitter,.hf-materialize)::after{animation-play-state:paused!important}

/* ---------- reduced-motion: fotograma final, sin parpadeos ni escaneos ---------- */
@media(prefers-reduced-motion:reduce){
  .hf-hud,.hf-tick::before,.hf-tip{transition:none}
  .hf-fx,.hf-light,.hf-grain{display:none}
  .hf-h2go{animation:none}
}