/*
 * m3-comp-processing.css
 *
 * Componente .processing — indicador ambiental de IA trabajando.
 * Aplicable a cualquier contenedor; modifica solo sus pseudo-elementos.
 *
 * Ver docs/02-procesando.md para uso completo.
 * Requiere processing-randomizer.js para variar instancias.
 */

/* === Variables registradas — interpoladas por animación =============== */
@property --pc1 { syntax: '<color>';  inherits: true; initial-value: #83afdf; }
@property --pc2 { syntax: '<color>';  inherits: true; initial-value: #83afdf; }
@property --pc3 { syntax: '<color>';  inherits: true; initial-value: #83afdf; }
@property --pc4 { syntax: '<color>';  inherits: true; initial-value: #83afdf; }
@property --proc-scale       { syntax: '<number>'; inherits: true; initial-value: 1;   }
@property --proc-tx          { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --proc-ty          { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --proc-glitch-op   { syntax: '<number>'; inherits: true; initial-value: 1;   }
@property --proc-glitch-blur { syntax: '<length>'; inherits: true; initial-value: 0px; }

/* === Clase base ======================================================== */
.processing {
  /* Defaults — el randomizer JS los puede sobreescribir por instancia */
  --proc-blur: 36px;
  --proc-opacity: 0.62;
  --proc-grain: 0.36;
  --proc-cycle-dur: 3s;       /* default rápido (≈ 3.5× sobre 10s base) */
  --proc-shimmer-dur: 1.8s;   /* shimmer vivo */
  --proc-glitch-dur: 9999s;   /* glitch desactivado por default */
  --proc-cycle-offset: 0s;
  --proc-shimmer-offset: 0s;
  --proc-glitch-offset: 0s;

  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* === Capa 1 — gradientes cyclando colores ============================== */
.processing::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 95% 85% at -10% -10%,  var(--pc1) 0%, transparent 95%),
    radial-gradient(ellipse 80% 90% at 110% -10%,  var(--pc2) 0%, transparent 95%),
    radial-gradient(ellipse 100% 90% at 110% 110%, var(--pc3) 0%, transparent 95%),
    radial-gradient(ellipse 85% 95% at -10% 110%,  var(--pc4) 0%, transparent 95%);
  filter: blur(calc(var(--proc-blur) + var(--proc-glitch-blur)));
  mix-blend-mode: screen;
  opacity: calc(var(--proc-opacity) * var(--proc-glitch-op));
  transform: scale(var(--proc-scale)) translate(var(--proc-tx), var(--proc-ty));
  will-change: transform, opacity, filter;
  animation-name: processing-cycle-a, processing-shimmer, processing-glitch-a;
  animation-duration: var(--proc-cycle-dur), var(--proc-shimmer-dur), var(--proc-glitch-dur);
  animation-timing-function: linear, ease-in-out, linear;
  animation-iteration-count: infinite;
  animation-delay: var(--proc-cycle-offset), var(--proc-shimmer-offset), var(--proc-glitch-offset);
}

/* Combinaciones de variantes (16 = 4 colores × 4 glitches) ============= */
.processing[data-variant="b"]::before { animation-name: processing-cycle-b, processing-shimmer, processing-glitch-a; }
.processing[data-variant="c"]::before { animation-name: processing-cycle-c, processing-shimmer, processing-glitch-a; }
.processing[data-variant="d"]::before { animation-name: processing-cycle-d, processing-shimmer, processing-glitch-a; }
.processing[data-variant="a"][data-glitch="b"]::before { animation-name: processing-cycle-a, processing-shimmer, processing-glitch-b; }
.processing[data-variant="a"][data-glitch="c"]::before { animation-name: processing-cycle-a, processing-shimmer, processing-glitch-c; }
.processing[data-variant="a"][data-glitch="d"]::before { animation-name: processing-cycle-a, processing-shimmer, processing-glitch-d; }
.processing[data-variant="b"][data-glitch="b"]::before { animation-name: processing-cycle-b, processing-shimmer, processing-glitch-b; }
.processing[data-variant="b"][data-glitch="c"]::before { animation-name: processing-cycle-b, processing-shimmer, processing-glitch-c; }
.processing[data-variant="b"][data-glitch="d"]::before { animation-name: processing-cycle-b, processing-shimmer, processing-glitch-d; }
.processing[data-variant="c"][data-glitch="b"]::before { animation-name: processing-cycle-c, processing-shimmer, processing-glitch-b; }
.processing[data-variant="c"][data-glitch="c"]::before { animation-name: processing-cycle-c, processing-shimmer, processing-glitch-c; }
.processing[data-variant="c"][data-glitch="d"]::before { animation-name: processing-cycle-c, processing-shimmer, processing-glitch-d; }
.processing[data-variant="d"][data-glitch="b"]::before { animation-name: processing-cycle-d, processing-shimmer, processing-glitch-b; }
.processing[data-variant="d"][data-glitch="c"]::before { animation-name: processing-cycle-d, processing-shimmer, processing-glitch-c; }
.processing[data-variant="d"][data-glitch="d"]::before { animation-name: processing-cycle-d, processing-shimmer, processing-glitch-d; }

/* Light theme — blend multiply en lugar de screen ====================== */
[data-theme="light"] .processing::before {
  mix-blend-mode: multiply;
  opacity: calc(var(--proc-opacity) * var(--proc-glitch-op) * 0.85);
}

/* === Capa 2 — grano analógico ========================================== */
.processing::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  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.95' numOctaves='2' stitchTiles='stitch' seed='8541'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay;
  opacity: var(--proc-grain);
  animation: noise-drift 45s linear infinite;
}

/* === Contenido encima de las capas ===================================== */
.processing > * { position: relative; z-index: 2; }

/* === Ciclos cromáticos — 4 secuencias ================================== */
@keyframes processing-cycle-a {
  0%   { --pc1: var(--md-core-color-primary);   --pc2: var(--md-core-color-tertiary); --pc3: var(--md-core-color-success); --pc4: var(--md-core-color-info);     }
  25%  { --pc1: var(--md-core-color-tertiary);  --pc2: var(--md-core-color-info);     --pc3: var(--md-core-color-secondary);--pc4: var(--md-core-color-primary);  }
  50%  { --pc1: var(--md-core-color-info);      --pc2: var(--md-core-color-secondary);--pc3: var(--md-core-color-primary); --pc4: var(--md-core-color-tertiary); }
  75%  { --pc1: var(--md-core-color-success);   --pc2: var(--md-core-color-primary);  --pc3: var(--md-core-color-info);    --pc4: var(--md-core-color-secondary);}
  100% { --pc1: var(--md-core-color-primary);   --pc2: var(--md-core-color-tertiary); --pc3: var(--md-core-color-success); --pc4: var(--md-core-color-info);     }
}
@keyframes processing-cycle-b {
  0%   { --pc1: var(--md-core-color-info);      --pc2: var(--md-core-color-secondary);--pc3: var(--md-core-color-tertiary);--pc4: var(--md-core-color-success);  }
  25%  { --pc1: var(--md-core-color-secondary); --pc2: var(--md-core-color-primary);  --pc3: var(--md-core-color-success); --pc4: var(--md-core-color-info);     }
  50%  { --pc1: var(--md-core-color-tertiary);  --pc2: var(--md-core-color-success);  --pc3: var(--md-core-color-info);    --pc4: var(--md-core-color-primary);  }
  75%  { --pc1: var(--md-core-color-primary);   --pc2: var(--md-core-color-tertiary); --pc3: var(--md-core-color-secondary);--pc4: var(--md-core-color-success); }
  100% { --pc1: var(--md-core-color-info);      --pc2: var(--md-core-color-secondary);--pc3: var(--md-core-color-tertiary);--pc4: var(--md-core-color-success);  }
}
@keyframes processing-cycle-c {
  0%   { --pc1: var(--md-core-color-success);   --pc2: var(--md-core-color-info);     --pc3: var(--md-core-color-primary); --pc4: var(--md-core-color-tertiary); }
  25%  { --pc1: var(--md-core-color-primary);   --pc2: var(--md-core-color-success);  --pc3: var(--md-core-color-tertiary);--pc4: var(--md-core-color-secondary);}
  50%  { --pc1: var(--md-core-color-tertiary);  --pc2: var(--md-core-color-primary);  --pc3: var(--md-core-color-info);    --pc4: var(--md-core-color-success);  }
  75%  { --pc1: var(--md-core-color-info);      --pc2: var(--md-core-color-tertiary); --pc3: var(--md-core-color-secondary);--pc4: var(--md-core-color-primary); }
  100% { --pc1: var(--md-core-color-success);   --pc2: var(--md-core-color-info);     --pc3: var(--md-core-color-primary); --pc4: var(--md-core-color-tertiary); }
}
@keyframes processing-cycle-d {
  0%   { --pc1: var(--md-core-color-secondary); --pc2: var(--md-core-color-success);  --pc3: var(--md-core-color-info);    --pc4: var(--md-core-color-tertiary); }
  25%  { --pc1: var(--md-core-color-info);      --pc2: var(--md-core-color-tertiary); --pc3: var(--md-core-color-success); --pc4: var(--md-core-color-primary);  }
  50%  { --pc1: var(--md-core-color-primary);   --pc2: var(--md-core-color-secondary);--pc3: var(--md-core-color-tertiary);--pc4: var(--md-core-color-info);     }
  75%  { --pc1: var(--md-core-color-tertiary);  --pc2: var(--md-core-color-info);     --pc3: var(--md-core-color-primary); --pc4: var(--md-core-color-secondary);}
  100% { --pc1: var(--md-core-color-secondary); --pc2: var(--md-core-color-success);  --pc3: var(--md-core-color-info);    --pc4: var(--md-core-color-tertiary); }
}

/* === Shimmer — micro respiración de escala ============================ */
@keyframes processing-shimmer {
  0%, 100% { --proc-scale: 1; }
  50%      { --proc-scale: 1.018; }
}

/* === Glitches — 4 patrones de pulsaciones nerviosas ================== */
@keyframes processing-glitch-a {
  0%, 100% { --proc-tx: 0px; --proc-ty: 0px; --proc-glitch-op: 1; --proc-glitch-blur: 0px; }
  13.7%    { --proc-tx: 4px; --proc-ty:-3px; --proc-glitch-op:1.3; --proc-glitch-blur:-8px; }
  14%      { --proc-tx:-2px; --proc-ty: 1px; --proc-glitch-op:0.8; --proc-glitch-blur: 3px; }
  14.3%    { --proc-tx: 0px; --proc-ty: 0px; --proc-glitch-op:1;   --proc-glitch-blur: 0px; }
  16.5%    { --proc-tx:-3px; --proc-ty: 2px; --proc-glitch-op:1.2; --proc-glitch-blur:-5px; }
  16.8%    { --proc-tx: 0px; --proc-ty: 0px; --proc-glitch-op:1;   --proc-glitch-blur: 0px; }
  47.7%    { --proc-tx: 5px; --proc-ty:-4px; --proc-glitch-op:1.4; --proc-glitch-blur:-9px; }
  48%      { --proc-tx:-3px; --proc-ty: 2px; --proc-glitch-op:0.65;--proc-glitch-blur: 5px; }
  48.4%    { --proc-tx: 1px; --proc-ty:-1px; --proc-glitch-op:1.1; }
  48.8%    { --proc-tx: 0px; --proc-ty: 0px; --proc-glitch-op:1;   --proc-glitch-blur: 0px; }
  77.7%    { --proc-tx:-4px; --proc-ty: 3px; --proc-glitch-op:1.28;--proc-glitch-blur:-6px; }
  78%      { --proc-tx: 2px; --proc-ty:-1px; --proc-glitch-op:0.85; }
  78.3%    { --proc-tx: 0px; --proc-ty: 0px; --proc-glitch-op:1;   --proc-glitch-blur: 0px; }
}
@keyframes processing-glitch-b {
  0%, 100% { --proc-tx: 0px; --proc-ty: 0px; --proc-glitch-op: 1; --proc-glitch-blur: 0px; }
  8%   { --proc-tx: 2px; --proc-ty:-1px; --proc-glitch-op:1.18; --proc-glitch-blur:-4px; }
  8.3% { --proc-tx: 0px; --proc-ty: 0px; --proc-glitch-op:1;    --proc-glitch-blur: 0px; }
  19%  { --proc-tx:-2px; --proc-ty: 2px; --proc-glitch-op:1.2;  --proc-glitch-blur:-5px; }
  19.3%{ --proc-tx: 0px; --proc-ty: 0px; --proc-glitch-op:1;    --proc-glitch-blur: 0px; }
  27%  { --proc-tx: 3px; --proc-ty: 1px; --proc-glitch-op:0.82; --proc-glitch-blur: 3px; }
  27.3%{ --proc-tx: 0px; --proc-ty: 0px; --proc-glitch-op:1;    --proc-glitch-blur: 0px; }
  38%  { --proc-tx:-3px; --proc-ty:-2px; --proc-glitch-op:1.25; --proc-glitch-blur:-6px; }
  38.3%{ --proc-tx: 0px; --proc-ty: 0px; --proc-glitch-op:1;    --proc-glitch-blur: 0px; }
  49%  { --proc-tx: 2px; --proc-ty: 3px; --proc-glitch-op:1.15; --proc-glitch-blur:-3px; }
  49.3%{ --proc-tx: 0px; --proc-ty: 0px; --proc-glitch-op:1;    --proc-glitch-blur: 0px; }
  61%  { --proc-tx:-1px; --proc-ty:-2px; --proc-glitch-op:0.85; --proc-glitch-blur: 2px; }
  61.3%{ --proc-tx: 0px; --proc-ty: 0px; --proc-glitch-op:1;    --proc-glitch-blur: 0px; }
  74%  { --proc-tx: 3px; --proc-ty: 1px; --proc-glitch-op:1.22; --proc-glitch-blur:-5px; }
  74.3%{ --proc-tx: 0px; --proc-ty: 0px; --proc-glitch-op:1;    --proc-glitch-blur: 0px; }
  87%  { --proc-tx:-2px; --proc-ty:-3px; --proc-glitch-op:1.18; --proc-glitch-blur:-4px; }
  87.3%{ --proc-tx: 0px; --proc-ty: 0px; --proc-glitch-op:1;    --proc-glitch-blur: 0px; }
}
@keyframes processing-glitch-c {
  0%, 100% { --proc-tx: 0px; --proc-ty: 0px; --proc-glitch-op: 1; --proc-glitch-blur: 0px; }
  31.6% { --proc-tx: 6px; --proc-ty:-4px; --proc-glitch-op:1.5;  --proc-glitch-blur:-10px; }
  32%   { --proc-tx:-4px; --proc-ty: 3px; --proc-glitch-op:0.55; --proc-glitch-blur: 6px;  }
  32.4% { --proc-tx: 2px; --proc-ty:-1px; --proc-glitch-op:1.2; }
  32.8% { --proc-tx: 0px; --proc-ty: 0px; --proc-glitch-op:1;    --proc-glitch-blur: 0px; }
  75.6% { --proc-tx:-6px; --proc-ty: 4px; --proc-glitch-op:1.45; --proc-glitch-blur:-9px; }
  76%   { --proc-tx: 4px; --proc-ty:-2px; --proc-glitch-op:0.6;  --proc-glitch-blur: 5px; }
  76.4% { --proc-tx:-1px; --proc-ty: 1px; --proc-glitch-op:1.15; }
  76.8% { --proc-tx: 0px; --proc-ty: 0px; --proc-glitch-op:1;    --proc-glitch-blur: 0px; }
}
@keyframes processing-glitch-d {
  0%, 100% { --proc-tx: 0px; --proc-ty: 0px; --proc-glitch-op: 1; --proc-glitch-blur: 0px; }
  7%  { --proc-tx: 1px; --proc-ty: 1px; --proc-glitch-op:1.1; }
  7.3%{ --proc-tx: 0px; --proc-ty: 0px; --proc-glitch-op:1; }
  15% { --proc-tx:-1px; --proc-ty:-1px; --proc-glitch-op:1.12;}
  15.3%{ --proc-tx:0px; --proc-ty: 0px; --proc-glitch-op:1; }
  23% { --proc-tx: 2px; --proc-ty: 0px; --proc-glitch-op:1.08;}
  23.3%{ --proc-tx:0px; --proc-ty: 0px; --proc-glitch-op:1; }
  32% { --proc-tx:-1px; --proc-ty: 2px; --proc-glitch-op:1.15;}
  32.3%{ --proc-tx:0px; --proc-ty: 0px; --proc-glitch-op:1; }
  41% { --proc-tx: 1px; --proc-ty:-1px; --proc-glitch-op:0.88;}
  41.3%{ --proc-tx:0px; --proc-ty: 0px; --proc-glitch-op:1; }
  52% { --proc-tx: 2px; --proc-ty: 1px; --proc-glitch-op:1.18;}
  52.3%{ --proc-tx:0px; --proc-ty: 0px; --proc-glitch-op:1; }
  61% { --proc-tx:-1px; --proc-ty: 1px; --proc-glitch-op:1.1; }
  61.3%{ --proc-tx:0px; --proc-ty: 0px; --proc-glitch-op:1; }
  72% { --proc-tx: 1px; --proc-ty:-2px; --proc-glitch-op:1.13;}
  72.3%{ --proc-tx:0px; --proc-ty: 0px; --proc-glitch-op:1; }
  83% { --proc-tx:-2px; --proc-ty: 1px; --proc-glitch-op:1.16;}
  83.3%{ --proc-tx:0px; --proc-ty: 0px; --proc-glitch-op:1; }
  93% { --proc-tx: 1px; --proc-ty: 1px; --proc-glitch-op:0.92;}
  93.3%{ --proc-tx:0px; --proc-ty: 0px; --proc-glitch-op:1; }
}

@keyframes noise-drift {
  from { background-position: 0 0; }
  to   { background-position: 220px 220px; }
}

/* === Presets de tamaño ================================================ */
.processing.is-sm { --proc-blur: 16px; --proc-opacity: 0.58; --proc-grain: 0.32; }
.processing.is-md { --proc-blur: 32px; --proc-opacity: 0.62; --proc-grain: 0.36; }
.processing.is-lg { --proc-blur: 60px; --proc-opacity: 0.66; --proc-grain: 0.40; }
.processing.is-xl { --proc-blur: 90px; --proc-opacity: 0.68; --proc-grain: 0.42; }

/* === Reduced motion ================================================== */
@media (prefers-reduced-motion: reduce) {
  .processing::before, .processing::after { animation: none !important; }
}