/* =========================================================================
   Component: Hero (homepage top section)
   Covers: headline block, CTA row, "About" panel, latest-version badge,
   the two feature-highlight cards, and the animated background wrapper.
   ========================================================================= */

.evox__blob-container {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;

  height: 100dvh;
  width: 100vw;
}

.evox-hero-bg__blob {
    position: absolute;
    width: var(--size);
    height: var(--size);

    left: calc(50% - var(--size) / 2);
    top: calc(30% - var(--size) / 2);

    opacity: .8;
    mix-blend-mode: var(--blending-value);
    overflow-x: hidden!important
}

/* First */
.evox-hero-bg__blob--1 {
    background:
        radial-gradient(circle at center,
            rgba(var(--evox-primary-rgb), .8) 0%,
            rgba(var(--evox-primary-rgb), 0) 50%);
    transform-origin: calc(50% - 400px);
    animation: first 22s linear infinite;
}

/* Second */
.evox-hero-bg__blob--2 {
    background:
        radial-gradient(circle at center,
            rgba(var(--evox-teal-rgb), .8) 0%,
            rgba(var(--evox-teal-rgb), 0) 50%);
    transform-origin: calc(50% + 400px);
    animation: second 26s linear infinite;
}

/* Third */
.evox-hero-bg__blob--3 {
    background:
        radial-gradient(circle at center,
            rgba(var(--evox-green-rgb), .8) 0%,
            rgba(var(--evox-green-rgb), 0) 50%);
    transform-origin: calc(50% - 200px);
    animation: third 20s ease infinite;
}

/* Fourth */
.evox-hero-bg__blob--4 {
    left: calc(45% - var(--size) / 2);
    top: calc(0% - var(--size) / 2);

    background:
        radial-gradient(circle at center,
            rgba(var(--evox-warning-rgb), .8) 0%,
            rgba(var(--evox-warning-rgb), 0) 50%);

    transform-origin: calc(50% - 800px) calc(50% + 800px);

    animation: fourth 30s linear infinite;
}

/* Animations */
@keyframes first {
    from {
        transform: translate(0, 0) scale(1);
    }
    to {
        transform: translate(-80px, 50px) scale(1.15);
    }
}

@keyframes second {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes third {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

@keyframes fourth {
    0% {
        transform: translate(-30px, 20px);
    }
    50% {
        transform: translate(60px, -40px);
    }
    100% {
        transform: translate(-30px, 20px);
    }
}