/* =====================================================================
   SANATÓRIO DO CAOS — chaos-fx (Etapa 15): motor de efeitos de interação
   Complementa brand/chaos.css. As animações rodam em brand/chaos-fx.js
   (Web Animations API); aqui ficam só a camada de efeitos e o botão
   "modo calmo". Nenhum ID ou classe usada pelos apps foi alterado.
   ===================================================================== */
.sdc-fx-layer {
  position: fixed; inset: 0; pointer-events: none; z-index: 10000; overflow: hidden;
  contain: strict;
}
.sdc-fx-layer > * { position: absolute; pointer-events: none; will-change: transform, opacity; }
.sdc-fx-flash { inset: 0; background: var(--gelo, #e9eef0); opacity: 0; }
.sdc-fx-pulse { inset: 0; opacity: 0; box-shadow: inset 0 0 140px 30px rgba(255, 90, 110, .55); }
.sdc-fx-ring {
  width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
  border: 2px solid var(--eletrico-claro, #ad7bff); box-shadow: 0 0 18px rgba(139, 61, 255, .7), inset 0 0 12px rgba(139, 61, 255, .5);
}
.sdc-fx-spark { width: 5px; height: 5px; margin: -2px 0 0 -2px; border-radius: 1px; }
.sdc-fx-spark.g { background: var(--dourado-claro, #d4b06a); box-shadow: 0 0 6px rgba(212, 176, 106, .9); }
.sdc-fx-spark.p { background: var(--eletrico-claro, #ad7bff); box-shadow: 0 0 6px rgba(139, 61, 255, .9); }
/* modo calmo (estático: só troca de cor, sem movimento) */
.sdc-fx-calm-err { outline: 2px solid var(--sangue, #ff5a6e) !important; outline-offset: 2px; }
.sdc-fx-calm-ok { outline: 2px solid var(--eletrico-claro, #ad7bff) !important; outline-offset: 2px; }
/* botão "Efeitos" no rodapé (site e portal) */
.sdc-fx-toggle {
  display: inline-flex; align-items: center; gap: 6px; margin: 10px auto 0; padding: 4px 10px;
  font: 11px/1.4 var(--font-mono, ui-monospace, Consolas, monospace); letter-spacing: .14em; text-transform: uppercase;
  color: var(--gelo-2, #b9c3c6); background: transparent; border: 1px solid var(--oxidado-escuro, #2c443f); border-radius: 2px;
  cursor: pointer; box-shadow: none; animation: none;
}
.sdc-fx-toggle:hover { color: var(--gelo, #e9eef0); border-color: var(--eletrico, #8b3dff); }
.sdc-fx-toggle:focus-visible { outline: 2px solid var(--eletrico-claro, #ad7bff); outline-offset: 2px; }
.sdc-fx-toggle[aria-pressed="true"] { color: var(--dourado-claro, #d4b06a); border-color: var(--dourado, #b08a3e); }
.sdc-fx-toggle:disabled { opacity: .6; cursor: default; }
.sdc-fx-toggle-wrap { display: block; text-align: center; }
@media (prefers-reduced-motion: reduce) {
  .sdc-fx-layer { display: none; }
}

/* ===== Etapa 15.1: efeitos por ação ===== */
.sdc-fx-ring.vermelho { border-color: var(--sangue, #ff5a6e); box-shadow: 0 0 18px rgba(255, 90, 110, .7), inset 0 0 12px rgba(255, 90, 110, .5); }
.sdc-fx-pulse.roxo { box-shadow: inset 0 0 160px 30px rgba(139, 61, 255, .55); }
.sdc-fx-pulse.sombra { box-shadow: inset 0 0 220px 80px rgba(0, 0, 0, .85); }
.sdc-fx-static {
  inset: -10px 0; opacity: 0; mix-blend-mode: screen;
  background:
    repeating-linear-gradient(0deg, rgba(233, 238, 240, .16) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(139, 61, 255, .12) 0 2px, transparent 2px 7px, rgba(255, 90, 110, .1) 7px 8px, transparent 8px 13px);
}
.sdc-fx-crt { left: 0; right: 0; top: 0; bottom: 0; background: rgba(233, 238, 240, .22); box-shadow: 0 0 40px rgba(139, 61, 255, .6); transform-origin: 50% 50%; }
.sdc-fx-crt-off { left: 0; right: 0; top: 0; bottom: 0; background: rgba(233, 238, 240, .5); transform-origin: 50% 50%; }
.sdc-fx-scan { left: 0; right: 0; top: 0; height: 3px; background: var(--eletrico-claro, #ad7bff); box-shadow: 0 0 14px 4px rgba(139, 61, 255, .7), 0 0 2px rgba(233, 238, 240, .9); }
.sdc-fx-beam { top: 0; bottom: 0; width: 6px; margin-left: -3px; background: linear-gradient(180deg, transparent, rgba(173, 123, 255, .9), transparent); box-shadow: 0 0 30px 10px rgba(139, 61, 255, .5); }
.sdc-fx-tear { left: 0; right: 0; height: 12px; background: linear-gradient(90deg, transparent, rgba(139, 61, 255, .7) 20%, rgba(233, 238, 240, .5) 50%, rgba(255, 90, 110, .7) 80%, transparent); mix-blend-mode: screen; }
.sdc-fx-crack { overflow: visible; }
.sdc-fx-crack polyline { fill: none; stroke: var(--sangue, #ff5a6e); stroke-width: 2; stroke-linejoin: bevel; filter: drop-shadow(0 0 3px rgba(255, 90, 110, .9)); }
.sdc-fx-shard { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--sangue, #ff5a6e); clip-path: polygon(0 0, 100% 30%, 60% 100%); }
.sdc-fx-shard.g { background: var(--gelo, #e9eef0); }
.sdc-fx-copied { outline: 2px solid #3fd28b !important; outline-offset: 2px; box-shadow: 0 0 12px rgba(63, 210, 139, .55) !important; }