/* ============================================================================
   RELIC INTERFACE SYSTEM v2 — ris-fx.css
   Optional FX layer. Load AFTER ris.css. Everything here is decorative and
   opt-in; NONE of it is applied by default component CSS. All motion dies
   under prefers-reduced-motion (inherited from ris.css global rule — the
   static fallbacks below keep the *look* without the motion).

   Scope (post de-slop): the borrowed cyberpunk-HUD chrome (CRT scanlines,
   analog noise, RGB glitch, signal-tear) has been removed — it carried no
   payload and was a genre tell. What remains is a minimal, intentional set:
     · .ris-holo   — single brand signature, scoped to logo/marks only
     · .ris-boot   — subtle staggered reveal (reduced-motion kills it)
     · glow utils  — opt-in only; never auto-applied by components
     · .ris-caret / .ris-data-updated — functional terminal/telemetry cues
   ========================================================================== */

/* ----------------------------------------------------------------------------
   BOOT REVEAL — staggered power-on for page sections.
   Add .ris-boot to a container; direct children fade-slide in sequence.
   Subtle by design; fully neutralised under reduced-motion.
   -------------------------------------------------------------------------- */
.ris-boot > * { animation: ris-boot-in 0.5s var(--ris-ease-snap) both; }
.ris-boot > *:nth-child(1) { animation-delay: 0.05s; }
.ris-boot > *:nth-child(2) { animation-delay: 0.14s; }
.ris-boot > *:nth-child(3) { animation-delay: 0.23s; }
.ris-boot > *:nth-child(4) { animation-delay: 0.32s; }
.ris-boot > *:nth-child(5) { animation-delay: 0.41s; }
.ris-boot > *:nth-child(6) { animation-delay: 0.50s; }
.ris-boot > *:nth-child(n+7) { animation-delay: 0.58s; }
@keyframes ris-boot-in {
  from { opacity: 0; transform: translateY(8px); clip-path: inset(0 0 100% 0); }
  60%  { clip-path: inset(0 0 0 0); }
  to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------------------
   GLOW UTILITIES — opt-in ONLY. Components never apply these; reach for them
   deliberately on a genuinely live/critical element (see --ris-live token).
   -------------------------------------------------------------------------- */
.ris-glow-text     { text-shadow: 0 0 6px currentColor, 0 0 18px var(--ris-accent-glow); }
.ris-glow-text--2  { text-shadow: 0 0 6px currentColor, 0 0 18px var(--ris-accent-2-glow); }
.ris-glow-border   { box-shadow: var(--ris-glow-accent); }
.ris-pulse-glow    { animation: ris-pulse-glow 2.2s var(--ris-ease) infinite; }
@keyframes ris-pulse-glow {
  0%, 100% { box-shadow: 0 0 0 1px var(--ris-accent-line), 0 0 10px var(--ris-accent-glow); }
  50%      { box-shadow: 0 0 0 1px var(--ris-accent-line), 0 0 26px var(--ris-accent-glow); }
}

/* ----------------------------------------------------------------------------
   TYPING / TERMINAL CURSOR
   <span class="ris-caret"></span> appended after streaming text.
   -------------------------------------------------------------------------- */
.ris-caret {
  display: inline-block; width: 8px; height: 1.05em;
  margin-left: 2px; vertical-align: text-bottom;
  background: var(--ris-accent);
  animation: ris-blink 1.1s steps(1) infinite;
}

/* Data refresh blink — flash a row/cell when its value updates.
   Toggle the class via JS (remove on animationend). */
.ris-data-updated { animation: ris-data-updated 0.6s steps(2); }
@keyframes ris-data-updated {
  0%, 50% { background: var(--ris-accent-glow); box-shadow: inset 2px 0 0 var(--ris-accent); }
  100% { background: transparent; }
}

/* ----------------------------------------------------------------------------
   HOLOGRAM SHIMMER — the single brand signature, for marks/logos ONLY.
   Deliberate, scoped, and the only gradient-text in the system.
   -------------------------------------------------------------------------- */
.ris-holo { /* unslop-ignore: deliberate single brand-mark shimmer, logo-scoped */
  background: linear-gradient(115deg,
    var(--ris-fg2) 30%, var(--ris-cyan) 46%, var(--ris-fg1) 50%,
    var(--ris-magenta) 54%, var(--ris-fg2) 70%);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; /* unslop-ignore */
  -webkit-text-fill-color: transparent; color: transparent;
  animation: ris-holo 5.5s linear infinite;
}
@keyframes ris-holo { to { background-position: -240% 0; } }

/* ----------------------------------------------------------------------------
   ACTIVE / LIVE STATES — motion cues for genuinely ongoing background operations.
   Motion is ALWAYS an enhancement: accompanies label/icon, never replaces them.
   All states feature static fallbacks under prefers-reduced-motion (at bottom).
   -------------------------------------------------------------------------- */

/* RECORDING — REC badge with pulsing red square dot (on-brand). */
.ris-rec {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ris-font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ris-red);
}
.ris-rec::before {
  content: ""; width: 9px; height: 9px; flex: 0 0 9px;
  background: var(--ris-red-fill);
  animation: ris-rec 1.4s var(--ris-ease) infinite;
}
@keyframes ris-rec {
  0%, 100% { opacity: 1;   box-shadow: 0 0 10px var(--ris-red-glow); }
  50%      { opacity: 0.5; box-shadow: 0 0 0 transparent; }
}

/* LIVE ACQUISITION — breathing border (glow in/out). Apply to a panel. */
.ris-acquiring { animation: ris-acquiring 2.2s var(--ris-ease) infinite; }
@keyframes ris-acquiring {
  0%, 100% { box-shadow: 0 0 0 1px var(--ris-red-line), 0 0 8px var(--ris-red-glow); }
  50%      { box-shadow: 0 0 0 1px var(--ris-red-line), 0 0 24px var(--ris-red-glow); }
}

/* PLAYING — 4-bar equalizer (audio/EEG streaming). 4 <i> children. */
.ris-playing { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.ris-playing > i {
  width: 3px; height: 100%; flex: 0 0 3px;
  background: var(--ris-accent-2, var(--ris-cyan)); transform-origin: bottom;
  animation: ris-eq 0.9s var(--ris-ease) infinite;
}
.ris-playing > i:nth-child(2) { animation-delay: 0.15s; }
.ris-playing > i:nth-child(3) { animation-delay: 0.30s; }
.ris-playing > i:nth-child(4) { animation-delay: 0.45s; }
@keyframes ris-eq { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }

/* SCANNING — sweep line traversing container (BLE scan/search). */
.ris-scan { position: relative; overflow: hidden; }
.ris-scan::after {
  content: ""; position: absolute; left: 0; right: 0; top: -28%; height: 28%;
  background: linear-gradient(var(--ris-cyan-glow), transparent);
  border-top: 1px solid var(--ris-cyan); pointer-events: none; z-index: 1;
  animation: ris-scan 2.4s var(--ris-ease) infinite;
}
@keyframes ris-scan { to { top: 100%; } }

/* RADAR SWEEP HUD — continuous tactical scanning at 2.8s rotary beam */
.ris-radar {
  position: relative;
  overflow: hidden;
  background: var(--ris-surface-1);
  border: 1px solid var(--ris-line-strong);
}
.ris-radar::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: 
    radial-gradient(circle at center, transparent 30%, var(--ris-line-faint) 31%, transparent 32%),
    radial-gradient(circle at center, transparent 60%, var(--ris-line-faint) 61%, transparent 62%),
    linear-gradient(to right, transparent 49.5%, var(--ris-line-faint) 49.5%, var(--ris-line-faint) 50.5%, transparent 50.5%),
    linear-gradient(to bottom, transparent 49.5%, var(--ris-line-faint) 49.5%, var(--ris-line-faint) 50.5%, transparent 50.5%);
  pointer-events: none;
  opacity: 0.6;
}
.ris-radar::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 250%;
  height: 250%;
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from 0deg at 50% 50%,
    var(--ris-cyan) 0deg,
    var(--ris-cyan-glow) 25deg,
    transparent 55deg,
    transparent 360deg
  );
  pointer-events: none;
  z-index: 2;
  border-radius: 50%;
  animation: ris-radar-rotary-sweep 2.8s linear infinite;
  mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 45%, transparent 65%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(0,0,0,1) 0%, rgba(0,0,0,0.8) 45%, transparent 65%);
}
@keyframes ris-radar-rotary-sweep {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* TOAST HUD STACKING (Tactical micro-motion style) */
.ris-toast-stack {
  position: fixed;
  right: var(--ris-s4);
  bottom: var(--ris-s4);
  z-index: 300;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}
.ris-toast {
  pointer-events: auto;
  transition: transform var(--ris-dur-base) var(--ris-ease-out),
              opacity var(--ris-dur-base) var(--ris-ease-out);
  animation: ris-toast-enter var(--ris-dur-enter) var(--ris-ease-out) both;
}
.ris-toast[data-dismissing="true"] {
  animation: ris-toast-exit var(--ris-dur) var(--ris-ease-snap) both;
}
.ris-toast-stack > .ris-toast:nth-last-child(2) {
  transform: scale(0.97) translateY(4px);
  opacity: 0.9;
}
.ris-toast-stack > .ris-toast:nth-last-child(n+3) {
  transform: scale(0.94) translateY(8px);
  opacity: 0.75;
}
@keyframes ris-toast-enter {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes ris-toast-exit {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to   { opacity: 0; transform: translateY(10px) scale(0.96); }
}

/* ----------------------------------------------------------------------------
   CHARTS TELEMETRY & TACTICAL HUD (ris-charts.js FX)
   Ambient micro-sweeps, peak warnings, and interactive scrubber overlay.
   All data rendered is 100% real.
   -------------------------------------------------------------------------- */

/* SVG Container enhancements */
.ris-chart-interactive {
  cursor: crosshair;
  touch-action: none;
  outline: none;
}
.ris-chart-interactive:focus-visible {
  outline: 1px solid var(--ris-accent-line);
  outline-offset: 1px;
}

/* Ambient idle micro-sweep across grid */
.ris-chart-ambient-sweep {
  pointer-events: none;
  will-change: transform, opacity;
  animation: ris-chart-sweep 5.5s linear infinite;
}
@keyframes ris-chart-sweep {
  0%   { transform: translateX(-100%); opacity: 0; }
  12%  { opacity: 0.14; }
  88%  { opacity: 0.14; }
  100% { transform: translateX(100%); opacity: 0; }
}
[data-theme="light"] .ris-chart-ambient-sweep {
  opacity: 0.08;
}
/* Suspend ambient sweep when inspecting/scrubbing */
.ris-chart-interactive:hover .ris-chart-ambient-sweep,
.ris-chart-interactive.is-scrubbing .ris-chart-ambient-sweep {
  opacity: 0 !important;
  animation-play-state: paused;
}

/* Peak warning micro-pulse (points above threshold) */
.ris-peak-pulse {
  transform-origin: center;
  transform-box: fill-box;
  animation: ris-peak-pulse 1.8s ease-in-out infinite;
}
@keyframes ris-peak-pulse {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 1px var(--ris-red)); }
  50%      { transform: scale(1.35); filter: drop-shadow(0 0 5px var(--ris-red)); }
}

/* Active Gauge segment breathing */
.ris-gauge-breathing {
  animation: ris-gauge-breathing 2.2s ease-in-out infinite;
}
@keyframes ris-gauge-breathing {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 1px currentColor); }
  50%      { opacity: 0.6; filter: drop-shadow(0 0 4px currentColor); }
}

/* Bar columns focus overdrive */
rect.ris-bar-col {
  transition: opacity 0.15s ease, filter 0.15s ease;
  cursor: crosshair;
}
rect.ris-bar-col:hover,
rect.ris-bar-col.is-active {
  opacity: 1 !important;
  filter: drop-shadow(0 0 5px currentColor);
  stroke: var(--ris-fg1);
  stroke-width: 0.75;
}
svg.has-active-bar rect.ris-bar-col:not(:hover):not(.is-active) {
  opacity: 0.25 !important;
}

/* Scrubber Overlay Elements (Rendered inside SVG) */
.ris-scrubber-group {
  pointer-events: none;
}
.ris-scrubber-line {
  stroke: var(--ris-cyan, #00e5ff);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  opacity: 0.85;
}
.ris-scrubber-reticle {
  fill: none;
  stroke: var(--ris-cyan, #00e5ff);
  stroke-width: 1.5;
}
.ris-scrubber-badge-bg {
  fill: var(--ris-surface-0, #0c0d10);
  stroke: var(--ris-accent-2, var(--ris-cyan, #00e5ff));
  stroke-width: 1;
  rx: 2px;
}
.ris-scrubber-text-main {
  font-family: var(--ris-font-mono, monospace);
  font-size: 8.5px;
  font-weight: 600;
  fill: var(--ris-fg1, #ffffff);
  letter-spacing: 0.04em;
}
.ris-scrubber-text-sub {
  font-family: var(--ris-font-mono, monospace);
  font-size: 7.5px;
  fill: var(--ris-cyan, #00e5ff);
  letter-spacing: 0.03em;
}
.ris-scrubber-text-alert {
  font-family: var(--ris-font-mono, monospace);
  font-size: 7.5px;
  font-weight: 700;
  fill: var(--ris-red, #ff2a55);
  letter-spacing: 0.05em;
}

[data-theme="light"] .ris-scrubber-badge-bg {
  fill: var(--ris-surface-0, #ffffff);
  stroke: var(--ris-accent, #0066aa);
}
[data-theme="light"] .ris-scrubber-text-main {
  fill: var(--ris-fg1, #111111);
}
[data-theme="light"] .ris-scrubber-text-sub {
  fill: var(--ris-accent, #0066aa);
}

/* ----------------------------------------------------------------------------
   REDUCED MOTION — static fallbacks that keep the aesthetic.
   (ris.css already kills all animation; here we undo layout-breaking states.)
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ris-boot > * { opacity: 1; transform: none; clip-path: none; filter: none; }
  .ris-caret { animation: none; }
  .ris-data-updated { animation: none; }
  .ris-pulse-glow { animation: none; }
  .ris-holo { animation: none; background-position: 50% 0; }
  /* stati live: fermi ma riconoscibili */
  .ris-rec::before { animation: none; box-shadow: 0 0 8px var(--ris-red-glow); }
  .ris-acquiring   { animation: none; box-shadow: 0 0 0 1px var(--ris-red-line), 0 0 12px var(--ris-red-glow); }
  .ris-playing > i { animation: none; }
  .ris-playing > i:nth-child(odd)  { transform: scaleY(0.5); }
  .ris-playing > i:nth-child(even) { transform: scaleY(0.85); }
  .ris-scan::after { animation: none; display: none; }
  .ris-radar::after { animation: none; display: none; }
  .ris-toast { animation: none !important; transform: none !important; }
  /* chart ambient motion neutralized */
  .ris-chart-ambient-sweep { animation: none !important; display: none !important; }
  .ris-peak-pulse { animation: none !important; transform: none !important; }
  .ris-gauge-breathing { animation: none !important; opacity: 1 !important; }
  rect.ris-bar-col { transition: none !important; }
}