/* ============================================================
   IDMR FX LAYER — viewport cursor · status bar · grain · sound
   Additive only. Safe to remove: delete this file + idmr-fx.js
   ============================================================ */

/* ---------- Film grain (cohesion with cinematic renders) ---------- */
.fx-on body::after{
  content:"";position:fixed;inset:-50%;z-index:9990;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>");
  opacity:.035;mix-blend-mode:overlay;
  animation:fxGrain 7s steps(8) infinite;
}
@keyframes fxGrain{
  0%{transform:translate(0,0)}12.5%{transform:translate(-2%,1%)}25%{transform:translate(1%,-2%)}
  37.5%{transform:translate(-1%,2%)}50%{transform:translate(2%,1%)}62.5%{transform:translate(-2%,-1%)}
  75%{transform:translate(1%,2%)}87.5%{transform:translate(2%,-2%)}100%{transform:translate(0,0)}
}

/* ---------- Viewport crosshair cursor (fine pointers only) ---------- */
.fx-cursor-on, .fx-cursor-on body, .fx-cursor-on a, .fx-cursor-on button,
.fx-cursor-on [role="button"], .fx-cursor-on input, .fx-cursor-on select,
.fx-cursor-on textarea, .fx-cursor-on label{ cursor:none !important; }

#fxCursor{
  position:fixed;left:0;top:0;z-index:9999;pointer-events:none;
  width:0;height:0;will-change:transform;
}
#fxCursor .fx-x, #fxCursor .fx-y{
  position:absolute;background:rgba(244,241,234,.22);
  transition:background .3s;
}
#fxCursor .fx-x{left:-100vw;right:-100vw;top:0;height:1px;width:200vw}
#fxCursor .fx-y{top:-100vh;bottom:-100vh;left:0;width:1px;height:200vh}
#fxCursor .fx-dot{
  position:absolute;left:-3px;top:-3px;width:6px;height:6px;
  border:1px solid var(--accent,#d70814);background:transparent;
  transition:transform .25s cubic-bezier(.2,.8,.2,1), background .25s, border-color .25s;
}
#fxCursor .fx-tag{
  position:absolute;left:14px;top:10px;white-space:nowrap;
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.16em;
  color:rgba(244,241,234,.45);text-transform:uppercase;
  transition:color .25s;
}
#fxCursor.is-link .fx-dot{transform:rotate(45deg) scale(2.2);border-color:var(--accent,#d70814)}
#fxCursor.is-link .fx-x, #fxCursor.is-link .fx-y{background:rgba(215,8,20,.30)}
#fxCursor.is-link .fx-tag{color:var(--accent,#d70814)}
#fxCursor.is-down .fx-dot{transform:rotate(45deg) scale(1.2);background:var(--accent,#d70814)}

/* ---------- Status bar (scroll % · sound toggle) ---------- */
#fxBar{
  position:fixed;left:0;right:0;top:0;height:2px;z-index:9998;pointer-events:none;
  background:transparent;
}
#fxBar i{
  display:block;height:100%;width:0;background:var(--accent,#d70814);
  transition:width .12s linear;
}
#fxHud{
  position:fixed;left:18px;bottom:16px;z-index:9997;
  display:flex;align-items:center;gap:14px;
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.18em;
  color:#615e57;text-transform:uppercase;
  mix-blend-mode:difference;
}
#fxHud .fx-scr{min-width:86px}
#fxSnd{
  pointer-events:auto;display:inline-flex;align-items:center;gap:8px;
  background:transparent;border:1px solid #26262b;color:#9a968d;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  padding:7px 12px;transition:border-color .25s,color .25s;
}
#fxSnd:hover{border-color:var(--accent,#d70814);color:#f4f1ea}
#fxSnd .fx-eq{display:inline-flex;align-items:flex-end;gap:2px;height:10px}
#fxSnd .fx-eq i{width:2px;height:3px;background:currentColor;transition:height .2s}
#fxSnd.on{color:var(--accent,#d70814);border-color:var(--accent,#d70814)}
#fxSnd.on .fx-eq i{animation:fxEq 1s ease-in-out infinite}
#fxSnd.on .fx-eq i:nth-child(2){animation-delay:.15s}
#fxSnd.on .fx-eq i:nth-child(3){animation-delay:.3s}
@keyframes fxEq{0%,100%{height:3px}50%{height:10px}}

@media (max-width:820px){
  #fxHud .fx-scr{display:none}
  #fxHud{left:14px;bottom:14px}
}

/* ---------- Magnetic targets ---------- */
.fx-mag{display:inline-block;will-change:transform;transition:transform .35s cubic-bezier(.2,.8,.2,1)}

/* ---------- Reduced motion: kill the lot ---------- */
@media (prefers-reduced-motion: reduce){
  .fx-on body::after{display:none}
  #fxCursor{display:none}
  .fx-cursor-on, .fx-cursor-on body, .fx-cursor-on a, .fx-cursor-on button{cursor:auto !important}
  .fx-mag{transition:none}
}