/*
 * influseed decorative background
 * Switch body class between brand-fx-subtle and brand-fx-bold in DevTools.
 */
body.brand-fx-subtle,
body.brand-fx-bold {
  position: relative;
  isolation: isolate;
}

.brand-fx {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.brand-fx__item {
  --fx-color: var(--lime);
  --fx-opacity: 0.1;
  position: absolute;
  display: block;
  width: var(--fx-size);
  aspect-ratio: 1;
  background-color: var(--fx-color);
  opacity: var(--fx-opacity);
  -webkit-mask: var(--fx-asset) center / contain no-repeat;
  mask: var(--fx-asset) center / contain no-repeat;
  will-change: transform, opacity;
}

.brand-fx__item:nth-child(even) {
  --fx-color: var(--magenta);
}

.hero .flower-bg.brand-fx-flower {
  display: block;
  background-color: currentColor;
  fill: none;
  -webkit-mask: var(--fx-asset) center / contain no-repeat;
  mask: var(--fx-asset) center / contain no-repeat;
  animation: brand-fx-drift-b 24s ease-in-out -8s infinite,
    brand-fx-color-current 20s steps(1, end) -4s infinite;
  will-change: transform, opacity;
}

.hero .flower-bg.brand-fx-flower.f1 {
  --fx-asset: url("../../brand-assets/evoluce/Asset 67.svg");
}

.hero .flower-bg.brand-fx-flower.f2 {
  --fx-asset: url("../../brand-assets/evoluce/Asset 64.svg");
  animation-duration: 32s, 17s;
  animation-delay: -17s, -11s;
}

.brand-fx__item--1 {
  --fx-asset: url("../../brand-assets/icons/influseed_icon_spark.svg");
  --fx-size: clamp(64px, 8vw, 118px);
  top: 3%;
  right: 3%;
  animation: brand-fx-drift-a 18s ease-in-out -5s infinite,
    brand-fx-color 19s steps(1, end) -2s infinite;
}

.brand-fx__item--2 {
  --fx-asset: url("../../brand-assets/evoluce/Asset 67.svg");
  --fx-size: clamp(72px, 9vw, 132px);
  top: 18%;
  left: 1%;
  aspect-ratio: 576 / 960;
  animation: brand-fx-drift-b 32s ease-in-out -13s infinite,
    brand-fx-color 23s steps(1, end) -9s infinite;
}

.brand-fx__item--3 {
  --fx-asset: url("../../brand-assets/icons/influseed_icon_grow.svg");
  --fx-size: clamp(58px, 7vw, 104px);
  top: 39%;
  right: 2%;
  animation: brand-fx-drift-c 24s ease-in-out -7s infinite,
    brand-fx-color 17s steps(1, end) -4s infinite;
}

.brand-fx__item--4 {
  --fx-asset: url("../../brand-assets/icons/influseed_icon_heart.svg");
  --fx-size: clamp(52px, 6vw, 92px);
  top: 58%;
  left: 4%;
  animation: brand-fx-drift-a 40s ease-in-out -19s infinite,
    brand-fx-color 21s steps(1, end) -12s infinite;
}

.brand-fx__item--5 {
  --fx-asset: url("../../brand-assets/evoluce/Asset 69.svg");
  --fx-size: clamp(82px, 10vw, 148px);
  top: 76%;
  right: 1%;
  aspect-ratio: 984 / 1056;
  animation: brand-fx-drift-b 28s ease-in-out -3s infinite,
    brand-fx-color 25s steps(1, end) -16s infinite;
}

.brand-fx__item--6 {
  --fx-asset: url("../../brand-assets/icons/influseed_icon_root.svg");
  --fx-size: clamp(60px, 7vw, 110px);
  top: 91%;
  left: 2%;
  animation: brand-fx-drift-c 36s ease-in-out -23s infinite,
    brand-fx-color 20s steps(1, end) -6s infinite;
}

.brand-fx-subtle .brand-fx__item {
  --fx-opacity: 0.1;
}

.brand-fx-subtle .brand-fx__item--2,
.brand-fx-subtle .brand-fx__item--5 {
  --fx-opacity: 0.14;
}

.brand-fx-bold .brand-fx__item {
  --fx-opacity: 0.16;
}

.brand-fx-bold .brand-fx__item--2,
.brand-fx-bold .brand-fx__item--5 {
  --fx-opacity: 0.2;
}

.brand-fx-bold .brand-fx__item--3,
.brand-fx-bold .brand-fx__item--5,
.brand-fx-glitch {
  image-rendering: pixelated;
  animation-name: brand-fx-drift-c, brand-fx-color, brand-fx-glitch;
  animation-duration: 24s, 17s, 8s;
  animation-timing-function: ease-in-out, steps(1, end), steps(1, end);
  animation-delay: -7s, -4s, -3s;
  animation-iteration-count: infinite;
}

.brand-fx-bold .brand-fx__item--5 {
  animation-duration: 28s, 25s, 11s;
  animation-delay: -3s, -16s, -8s;
}

@keyframes brand-fx-drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-4deg); }
  50% { transform: translate3d(-24px, 18px, 0) rotate(7deg); }
}

@keyframes brand-fx-drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(3deg); }
  50% { transform: translate3d(20px, -26px, 0) rotate(-8deg); }
}

@keyframes brand-fx-drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  33% { transform: translate3d(-16px, -14px, 0) rotate(5deg); }
  66% { transform: translate3d(12px, 20px, 0) rotate(-6deg); }
}

@keyframes brand-fx-color {
  0%, 49.99% { background-color: var(--lime); }
  50%, 100% { background-color: var(--magenta); }
}

@keyframes brand-fx-color-current {
  0%, 49.99% { color: var(--lime); }
  50%, 100% { color: var(--magenta); }
}

@keyframes brand-fx-glitch {
  0%, 91%, 94%, 100% {
    clip-path: inset(0);
    scale: 1;
  }
  92% {
    clip-path: inset(18% 0 42% 0);
    scale: 1.035 0.985;
  }
  93% {
    clip-path: inset(54% 0 9% 0);
    scale: 0.98 1.025;
  }
}

@media (max-width: 700px) {
  .brand-fx__item {
    --fx-opacity: 0.08;
  }

  .brand-fx__item--4,
  .brand-fx__item--6 {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .brand-fx__item,
  .hero .flower-bg.brand-fx-flower,
  .brand-fx-glitch {
    animation: none !important;
    will-change: auto;
  }
}