@charset "UTF-8";

@property --hue {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
@property --rotate {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
@property --bg-y {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
@property --bg-x {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
@property --glow-translate-y {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
@property --bg-size {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
@property --glow-opacity {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
@property --glow-blur {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
@property --glow-scale {
    syntax: "<number>";
    inherits: true;
    initial-value: 2;
}
@property --glow-radius {
    syntax: "<number>";
    inherits: true;
    initial-value: 2;
}
@property --white-shadow {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}

:root {
    --debug: 0;
    --supported: 0;
    --not-supported: 0;
    --card-color: hsl(260deg 100% 3%);
    --card-radius: 2.2vw;
    --card-width: 45vw;
    --border-width: 3px;
    --bg-size: 1;
    --hue: 0;
    --hue-speed: 1;
    --rotate: 0;
    --animation-speed: 2.8s;
    --interaction-speed: 0.55s;
    --glow-scale: 1.5;
    --scale-factor: 1;
    --glow-blur: 6;
    --glow-opacity: 1;
    --glow-radius: 100;
    --glow-rotate-unit: 0deg;
}

.flow-halo {
    width: 70%;
    z-index: 3;
    height: auto;
    color: white;
    display: flex;
    cursor: pointer;
    max-width: 550px;
    min-height: 325px;
    position: relative;
    align-items: center;
    aspect-ratio: 1.5/1;
    justify-content: center;
    flex-direction: row;
    margin-left: 10px;
    margin-right: 10px;
    border-radius: var(--card-radius);
}

.flow-halo:hover > .flow-halo-body {
    display: flex;
    box-shadow: 0 0 calc(var(--white-shadow) * 1vw) calc(var(--white-shadow) * 0.15vw) rgba(255, 255, 255, 0.2);
    animation: shadow-pulse calc(var(--animation-speed) * 2) linear infinite;
}



.flow-halo:hover .halo-glow {
    --glow-blur: 1.5;
    --glow-opacity: 0.6;
    --glow-scale: 2.2;
    --glow-radius: 0;
    --rotate: 900;
    --glow-rotate-unit: 0;
    --scale-factor: 1.25;
    animation-play-state: paused;
}

.flow-halo:hover .halo-glow:after {
    --glow-translate-y: 0;
    animation-play-state: paused;
    transition: --glow-translate-y 0s ease, --glow-blur 0.05s ease, --glow-opacity 0.05s ease, --glow-scale 0.05s ease, --glow-radius 0.05s ease;
}

.flow-halo > .flow-halo-body {
    width: 100%;
    height: 100%;
    display: flex;
    position: absolute;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background: var(--card-color);
    padding-left: calc(var(--card-width) / 8);
    padding-right: calc(var(--card-width) / 8);
    border-radius: calc(calc(var(--card-radius) * 0.9));
}

.flow-halo > .flow-halo-body:before {
    content: "";
    z-index: -1;
    display: block;
    position: absolute;
    box-shadow: 0 0 20px black;
    mix-blend-mode: color-burn;
    width: calc(100% + var(--border-width));
    height: calc(100% + var(--border-width));
    border-radius: calc(calc(var(--card-radius) * 0.9));
    transition: --bg-size var(--interaction-speed) ease;
    animation: hue-animation var(--animation-speed) linear infinite, rotate-bg var(--animation-speed) linear infinite;
    background: #292929 radial-gradient(30% 30% at calc(var(--bg-x) * 1%) calc(var(--bg-y) * 1%), hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 90%) calc(0% * var(--bg-size)), hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 80%) calc(20% * var(--bg-size)), hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 60%) calc(40% * var(--bg-size)), transparent 100%);
}

.flow-halo .halo-glow {
    display: block;
    position: absolute;
    --glow-translate-y: 0;
    transform-origin: center;
    width: calc(var(--card-width) / 4.5);
    height: calc(var(--card-width) / 4.5);
    border-radius: calc(var(--glow-radius) * 10vw);
    animation: rotate var(--animation-speed) linear infinite;
    transform: rotateZ(calc(var(--rotate) * var(--glow-rotate-unit)));
}

.flow-halo .halo-glow:after {
    height: 5vh;
    z-index: -2;
    content: "";
    display: block;
    position: relative;
    opacity: var(--glow-opacity);
    filter: blur(calc(var(--glow-blur) * 10px));
    border-radius: calc(var(--glow-radius) * 10vw);
    animation: hue-animation var(--animation-speed) linear infinite;
    background: hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 60%);
    transform: scaleY(calc(var(--glow-scale) * var(--scale-factor) / 1.1)) scaleX(calc(var(--glow-scale) * var(--scale-factor) * 1.2)) translateY(calc(var(--glow-translate-y) * 1%));
}

@keyframes shadow-pulse {
    0%, 24%, 46%, 73%, 96% {
        --white-shadow: 0.5;
    }
    12%, 28%, 41%, 63%, 75%, 82%, 98% {
        --white-shadow: 2.5;
    }
    6%, 32%, 57% {
        --white-shadow: 1.3;
    }
    18%, 52%, 88% {
        --white-shadow: 3.5;
    }
}

@keyframes rotate-bg {
    0% {
        --bg-x: 0;
        --bg-y: 0;
    }
    25% {
        --bg-x: 100;
        --bg-y: 0;
    }
    50% {
        --bg-x: 100;
        --bg-y: 100;
    }
    75% {
        --bg-x: 0;
        --bg-y: 100;
    }
    100% {
        --bg-x: 0;
        --bg-y: 0;
    }
}

@keyframes rotate {
    from {
        --rotate: -70;
        --glow-translate-y: -65;
    }
    25% {
        --glow-translate-y: -65;
    }
    50% {
        --glow-translate-y: -65;
    }
    60%, 75% {
        --glow-translate-y: -65;
    }
    85% {
        --glow-translate-y: -65;
    }
    to {
        --rotate: calc(360 - 70);
        --glow-translate-y: -65;
    }
}

@keyframes hue-animation {
    0% {
        --hue: 0;
    }
    100% {
        --hue: 360;
    }
}


@media (max-width: 512px) {
    .flow-halo{
        width: 85%;
        max-width: 90vw;
    }
}

@media (max-width: 960px) {
    .flow-halo .halo-glow:after {
        width: 0;
        height: 0;
    }
}