.home-services {
    --circle-size: 500px;
    @media (max-width: 1023px) {
        --circle-size: 200px;
    }
    --circle-color: oklch(var(--accent-oklch) / 1);

    .cursor-circle {
        position: absolute;
        width: var(--circle-size);
        height: var(--circle-size);
        background: var(--circle-color);
        border-radius: 50%;
        filter: blur(125px);
        top: 0;
        left: 0;
        opacity: 0;
        transform: scale(0);
        will-change: transform, opacity;
        z-index: 20;
    }

    .cursor-circle-1 {
        z-index: 1;
    }
    .cursor-circle-2 {
        z-index: 2;
        background: oklch(var(--accent-oklch) / 0.8);
    }
    .cursor-circle-3 {
        z-index: 3;
        background: oklch(var(--accent-oklch) / 0.6);
    }
    .cursor-circle-4 {
        z-index: 4;
        background: oklch(var(--accent-oklch) / 0.4);
    }
    .cursor-circle-5 {
        z-index: 5;
        background: oklch(var(--accent-oklch) / 0.2);
    }

    .service-item {
        @apply py-fl-xl xl:py-0 relative justify-between xl:w-fit xl:self-center flex flex-col xl:block not-last:border-b-dark/20 not-last:border-b xl:not-last:border-b-0 ;
        transition: transform 0.3s ease, border-color 0.3s ease;

        &.is-active {
            .service-title {
                @apply font-sans font-bold;
            }
            .service-description {
                @apply opacity-100;
                height: auto;
            }
        }

        &:hover {
            @apply border-accent/20;
            @media (min-width: 1280px) {
                transform: translateY(-5px);
                .service-title {
                    @apply font-sans font-bold;
                }
                .service-description {
                    @apply opacity-100 rotate-0;
                }
            }
        }
        .service-title {
            @apply font-serif text-fl-hero leading-[100%] self-center md:self-start xl:self-center lg:pb-fl-xl relative;

            @media (max-width: 1279px) {
                &:after {
                    content: "+";
                    @apply absolute -right-8 top-1/2 -translate-y-1/2 text-fl-xl font-sans transition-transform duration-300 pointer-events-none;
                }
            }
        }
        &.is-active .service-title:after {
            @media (max-width: 1279px) {
                transform: translateY(-50%) rotate(45deg);
            }
        }
        .service-description {
            @apply xl:absolute max-w-[450px] text-center md:text-left opacity-0 xl:opacity-0 xl:rotate-6 pointer-events-none inline-flex self-center md:self-end xl:self-center;

            &.is-visible {
                @apply pointer-events-auto;
            }

            @media (max-width: 1279px) {
                display: grid;
                grid-template-rows: 0fr;
                transition: grid-template-rows 0.4s ease-in-out, opacity 0.4s ease-in-out;
                opacity: 0;
                overflow: hidden;

                & > p {
                    min-height: 0;
                }
            }
            @media (min-width: 1280px) {
                transition: all 0.3s ease;
            }
        }
        &.is-active .service-description {
            @media (max-width: 1279px) {
                grid-template-rows: 1fr;
                opacity: 1;
                @apply py-fl-md;
            }
        }
        @media (min-width: 1280px) {
            &:nth-child(1) {
                margin-right:10vw;
                .service-description {
                    @apply translate-x-full -right-12 top-0;
                }
            }
            &:nth-child(2) {
                margin-left:20vw;
                .service-description {
                    @apply -translate-x-full -left-12 top-0;
                }
            }
            &:nth-child(3) {
                margin-right:20vw;
                .service-description {
                    @apply translate-x-full -right-12 top-0;
                }
            }
            &:nth-child(4) {
                margin-right:10vw;
                .service-description {
                    @apply translate-x-full -right-12 top-0;
                }
            }
        }

        .blurry-bg {
            position: relative;
            display: inline-flex;
            font-weight: 600;
            @apply px-3 py-2 -rotate-3 uppercase;
            &:before {
                content: "";
                position: absolute;
                width: 100%;
                height: 100%;
                left: 0;
                top: 0;
                background: var(--color-accent);
                filter: blur(10px);
                opacity: 1;
                z-index: -1;
            }
        }
    }
}