/**
 * CodePen-achtergrond als losse klasse (.alma-codepen): dezelfde bewegende
 * kleurvlekken en merkvormen als de paarse CTA (cta.css, zie daar de
 * uitleg), voor andere vlakken. Gebruikt de @property's en @keyframes uit
 * cta.css (laadt altijd mee).
 *
 * Eerst voor de profielen-overzichtspagina (Figma: Pages → Profielen); de
 * boog linksboven en de golf rechtsonder zijn daar kleiner dan in de CTA,
 * omdat het vlak veel hoger is. Per vlak aan te passen met:
 * --alma-codepen-lb-grootte, --alma-codepen-ro-grootte en
 * --alma-codepen-ro-plek.
 */

.alma-codepen {
    --alma-cta-k0: var(--alma-donker-blauw);
    --alma-cta-k1: var(--alma-roze);
    --alma-cta-k2: var(--alma-rood);
    --alma-cta-k3: var(--alma-licht-blauw);
    --alma-cta-k4: var(--alma-donker-blauw);
    --alma-cta-lb-k1: var(--alma-donker-blauw);
    --alma-cta-lb-k4: var(--alma-roze);
    --alma-cta-ro-k3: var(--alma-roze);
    --alma-cta-snelheid: 4;

    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-radius: var(--carmel-radius-lg) !important;

    &,
    &::before,
    &::after {
        background-color: var(--alma-cta-k0) !important;
        background-image:
            radial-gradient(78% 96% at calc(13% + var(--alma-cta-vx) - var(--alma-cta-bx)) calc(71% + var(--alma-cta-vy) - var(--alma-cta-by)), var(--alma-cta-k4) 40%, transparent 100%),
            radial-gradient(78% 96% at calc(66% + var(--alma-cta-vx) + var(--alma-cta-bx)) calc(84% + var(--alma-cta-vy) + var(--alma-cta-by)), var(--alma-cta-k3) 40%, transparent 100%),
            radial-gradient(78% 96% at calc(92.5% + var(--alma-cta-vx) + var(--alma-cta-bx)) calc(-24% + var(--alma-cta-vy) + var(--alma-cta-by)), var(--alma-cta-k2) 40%, transparent 100%),
            radial-gradient(78% 96% at calc(-4% + var(--alma-cta-vx)) calc(-24% + var(--alma-cta-vy)), var(--alma-cta-k1) 40%, transparent 100%) !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
    }

    animation:
        alma-cta-veld-basis calc(31s / var(--alma-cta-snelheid)) cubic-bezier(0.42, 0, 0.58, 1) infinite,
        alma-cta-baan-a calc(23s / var(--alma-cta-snelheid)) ease-in-out infinite alternate;

    &::before,
    &::after {
        content: '';
        display: block !important;
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
    }

    /* linksboven: boog */
    &::before {
        --alma-cta-k1: var(--alma-cta-lb-k1);
        --alma-cta-k4: var(--alma-cta-lb-k4);
        -webkit-mask-image: var(--alma-cta-vorm-lb);
        mask-image: var(--alma-cta-vorm-lb);
        -webkit-mask-size: var(--alma-codepen-lb-grootte, auto 50%);
        mask-size: var(--alma-codepen-lb-grootte, auto 50%);
        -webkit-mask-position: 0 0;
        mask-position: 0 0;
        animation:
            alma-cta-veld-lb calc(37s / var(--alma-cta-snelheid)) cubic-bezier(0.42, 0, 0.58, 1) infinite,
            alma-cta-baan-b calc(29s / var(--alma-cta-snelheid)) ease-in-out infinite alternate;
    }

    /* rechtsonder: golf */
    &::after {
        --alma-cta-k3: var(--alma-cta-ro-k3);
        -webkit-mask-image: var(--alma-cta-vorm-ro);
        mask-image: var(--alma-cta-vorm-ro);
        -webkit-mask-size: var(--alma-codepen-ro-grootte, 44% 50.5%);
        mask-size: var(--alma-codepen-ro-grootte, 44% 50.5%);
        -webkit-mask-position: var(--alma-codepen-ro-plek, 101.4% 135.4%);
        mask-position: var(--alma-codepen-ro-plek, 101.4% 135.4%);
        animation:
            alma-cta-veld-ro calc(27s / var(--alma-cta-snelheid)) cubic-bezier(0.42, 0, 0.58, 1) infinite,
            alma-cta-baan-c calc(19s / var(--alma-cta-snelheid)) ease-in-out infinite alternate;
    }

    /* inhoud boven de vormen */
    > * {
        position: relative;
        z-index: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .alma-codepen {
        &,
        &::before,
        &::after {
            animation: none !important;
        }
    }
}