/* Native brand ramps, shapes and timings are preserved in test/fixtures/blob-brand.css. */

:root {
  --fl-1: #f97a55;
  --fl-2: #fc8f6b;
  --fl-3: #fda57f;
  --fl-4: #fdb48f;
  --fl-5: #fbbfa2;
  --fl-6: #f5bfb4;
  --fl-7: #ebb4cb;
  --fl-8: #dda7cc;
  --fl-9: #d3a0ce;
  --fl-halo: radial-gradient(circle, #fdb48f 0%, #f5bfb4 45%, rgba(245, 191, 180, 0) 75%);
  --fl-ramp: linear-gradient(
    128deg,
    var(--fl-1) 0%,
    var(--fl-2) 16%,
    var(--fl-3) 32%,
    var(--fl-4) 46%,
    var(--fl-5) 58%,
    var(--fl-6) 70%,
    var(--fl-7) 82%,
    var(--fl-8) 92%,
    var(--fl-9) 100%
  );
}


:root[data-appearance="dark"] {
    --fl-1: #896ad0;
    --fl-2: #887ad8;
    --fl-3: #858bdc;
    --fl-4: #7e99d8;
    --fl-5: #939dd9;
    --fl-6: #a995d6;
    --fl-7: #bc85cd;
    --fl-8: #c873ac;
    --fl-9: #c96e86;
    --fl-halo: radial-gradient(circle, #3f4f9e 0%, #2a3470 45%, rgba(42, 52, 112, 0) 75%);
}


.fl-mark {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
}

.fl-glow {
  position: absolute;
  inset: -32%;
  border-radius: 50%;
  background: var(--fl-halo);
  filter: blur(var(--fl-blur, 6px));
  animation: fl-blob-breathe 3.9s ease-in-out infinite alternate;
}

.fl-blob {
  position: absolute;
  inset: 0;
  background: var(--fl-ramp);
  background-size: 240% 240%;
  border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%;
  animation:
    fl-blob-breathe 3.9s ease-in-out infinite alternate,
    fl-blob-morph 6.5s ease-in-out infinite alternate,
    fl-blob-flow 9s ease-in-out infinite alternate,
    fl-blob-hue 14s ease-in-out infinite alternate;
}

@keyframes fl-blob-breathe {
  from { transform: scale(0.93); }
  to   { transform: scale(1.07); }
}

@keyframes fl-blob-morph {
  0%   { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  33%  { border-radius: 63% 37% 41% 59% / 56% 63% 37% 44%; }
  66%  { border-radius: 37% 63% 56% 44% / 63% 41% 59% 37%; }
  100% { border-radius: 58% 42% 44% 56% / 37% 59% 41% 63%; }
}

@keyframes fl-blob-flow {
  from { background-position: 20% 28%; }
  to   { background-position: 80% 72%; }
}

@keyframes fl-blob-hue {
  from { filter: hue-rotate(-9deg); }
  to   { filter: hue-rotate(9deg); }
}

@media (prefers-reduced-motion: reduce) {
  .fl-glow,
  .fl-blob {
    animation: none !important;
  }
  .fl-glow { opacity: 0.45; }
  /* Without a parked position the ramp rests at 0% 0%, its darkest end, and the night blob reads as a hole in its halo. */
  .fl-blob {
    border-radius: 46% 54% 58% 42% / 44% 48% 52% 56%;
    background-position: 50% 50%;
  }
}