/**
 * public_html/assets/css/components/brand-gradient.css
 *
 * O fundo animado da marca, o da MarIA: seis cores radiais sobre um azul, que o
 * `Shared/Components/BrandGradient/BrandGradient.js` põe a andar. Serve o
 * portal da MarIA (maria.autocavado.pt) e a faixa de entrada da proposta
 * digital (offers.autocavado.pt). Vive aqui, e não numa folha de cada portal,
 * para os dois fundos serem o mesmo: eram duas cópias à mão, e a da proposta
 * já se tinha afastado da original no comportamento.
 *
 * Quem o usa dá a classe `.brand-gradient` a um elemento posicionado dentro de
 * um contentor com `container-type: size`: o quadro é quadrado e cobre esse
 * contentor (1cqmax), como um `background-size: cover`.
 *
 * As casas e as cores ficam na raiz, porque a MarIA deriva delas outras cores
 * (a superfície do assistente de voz sai do azul).
 */
:root { /* ds-ok: o fundo é a marca, seis blobs ajustados por mínimos quadrados ao original */
  /* x/y/r em % do quadro quadrado; cor no centro, transparente na orla. As
     cores ficam limitadas para o gradiente não escurecer quando os blobs andam. */
  --gradient-base: #0086f1;

  --blob-orange-x: -0.6;  --blob-orange-y: 12;    --blob-orange-r: 97.8; --blob-orange-color: #ff9817;
  --blob-amber-x: -19.2;  --blob-amber-y: 76.1;   --blob-amber-r: 96.1;  --blob-amber-color: #ffaa00;
  --blob-green-x: 40.5;   --blob-green-y: 88.4;   --blob-green-r: 59;    --blob-green-color: #50f250;
  --blob-blue-x: 87;      --blob-blue-y: 8.8;     --blob-blue-r: 34.1;   --blob-blue-color: #204da1;
  --blob-sky-x: 94.3;     --blob-sky-y: 111.5;    --blob-sky-r: 75.2;    --blob-sky-color: #0096f7;
  --blob-cyan-x: 72.9;    --blob-cyan-y: 49.9;    --blob-cyan-r: 59;     --blob-cyan-color: #00ffff;
}

.brand-gradient {
  position: absolute;
  inset: 0;

  /* Posição de cada blob: a casa mais o deslocamento que o JS escreve (0 sem JS) */
  --orange-x: calc(var(--blob-orange-x) + var(--blob-orange-dx, 0));
  --orange-y: calc(var(--blob-orange-y) + var(--blob-orange-dy, 0));
  --orange-r: calc(var(--blob-orange-r) + var(--blob-orange-dr, 0));
  --amber-x:  calc(var(--blob-amber-x)  + var(--blob-amber-dx, 0));
  --amber-y:  calc(var(--blob-amber-y)  + var(--blob-amber-dy, 0));
  --amber-r:  calc(var(--blob-amber-r)  + var(--blob-amber-dr, 0));
  --green-x:  calc(var(--blob-green-x)  + var(--blob-green-dx, 0));
  --green-y:  calc(var(--blob-green-y)  + var(--blob-green-dy, 0));
  --green-r:  calc(var(--blob-green-r)  + var(--blob-green-dr, 0));
  --blue-x:   calc(var(--blob-blue-x)   + var(--blob-blue-dx, 0));
  --blue-y:   calc(var(--blob-blue-y)   + var(--blob-blue-dy, 0));
  --blue-r:   calc(var(--blob-blue-r)   + var(--blob-blue-dr, 0));
  --sky-x:    calc(var(--blob-sky-x)    + var(--blob-sky-dx, 0));
  --sky-y:    calc(var(--blob-sky-y)    + var(--blob-sky-dy, 0));
  --sky-r:    calc(var(--blob-sky-r)    + var(--blob-sky-dr, 0));
  --cyan-x:   calc(var(--blob-cyan-x)   + var(--blob-cyan-dx, 0));
  --cyan-y:   calc(var(--blob-cyan-y)   + var(--blob-cyan-dy, 0));
  --cyan-r:   calc(var(--blob-cyan-r)   + var(--blob-cyan-dr, 0));

  /* 1 unidade do quadro = 1% do lado maior do contentor (cover) */
  --unit: 1cqmax;

  background:
    radial-gradient(circle calc(var(--cyan-r) * var(--unit)) /* ds-ok: o fundo E a marca, seis blobs medidos ao original */
      at calc(50% + (var(--cyan-x) - 50) * var(--unit)) calc(50% + (var(--cyan-y) - 50) * var(--unit)), /* nat-ok: aritmética, não pausa */
      var(--blob-cyan-color), transparent),
    radial-gradient(circle calc(var(--sky-r) * var(--unit)) /* ds-ok: o fundo E a marca, seis blobs medidos ao original */
      at calc(50% + (var(--sky-x) - 50) * var(--unit)) calc(50% + (var(--sky-y) - 50) * var(--unit)), /* nat-ok: aritmética, não pausa */
      var(--blob-sky-color), transparent),
    radial-gradient(circle calc(var(--blue-r) * var(--unit)) /* ds-ok: o fundo E a marca, seis blobs medidos ao original */
      at calc(50% + (var(--blue-x) - 50) * var(--unit)) calc(50% + (var(--blue-y) - 50) * var(--unit)), /* nat-ok: aritmética, não pausa */
      var(--blob-blue-color), transparent),
    radial-gradient(circle calc(var(--green-r) * var(--unit)) /* ds-ok: o fundo E a marca, seis blobs medidos ao original */
      at calc(50% + (var(--green-x) - 50) * var(--unit)) calc(50% + (var(--green-y) - 50) * var(--unit)), /* nat-ok: aritmética, não pausa */
      var(--blob-green-color), transparent),
    radial-gradient(circle calc(var(--amber-r) * var(--unit)) /* ds-ok: o fundo E a marca, seis blobs medidos ao original */
      at calc(50% + (var(--amber-x) - 50) * var(--unit)) calc(50% + (var(--amber-y) - 50) * var(--unit)), /* nat-ok: aritmética, não pausa */
      var(--blob-amber-color), transparent),
    radial-gradient(circle calc(var(--orange-r) * var(--unit)) /* ds-ok: o fundo E a marca, seis blobs medidos ao original */
      at calc(50% + (var(--orange-x) - 50) * var(--unit)) calc(50% + (var(--orange-y) - 50) * var(--unit)), /* nat-ok: aritmética, não pausa */
      var(--blob-orange-color), transparent),
    var(--gradient-base);
}