@import "https://unpkg.com/osc-css@0.7.0";

@function --sheet(--offset <length>: 0px, --angle <angle>: 0deg, --blur: 1) {
    result: calc(sin(var(--angle)) * var(--offset)) var(--offset) calc(var(--z-pos) * 0.8) lch(from var(--color) 10% 25% h / 25%);
}

.animated-on-hover {
    -webkit-animation: var(--osc);
    animation: var(--osc);
    transition: translate 200ms ease-in-out, --amp-volume 600ms ease-in-out;

    --angle: calc(var(--osc-sin) * 10deg);
    --amp-volume: 0;
    --z-pos: 0px;
    --color: lch(90% 20% 10deg);

    &:hover {
        --amp-volume: .1;
        --z-pos: calc(3px + 2px * var(--osc-COS));
        position: relative;

        &::after {
            content: "";
            position: absolute;
            inset: -1rem;
            pointer-events: none;
        }
    }

    translate: 0 calc(-1 * var(--z-pos));
    rotate: var(--angle);
}