/* cursor spotlight fx */

.cursor-spotlight-fx {
    position: relative !important;
    overflow: hidden !important;
    background-color: #070b18 !important;
}

.cursor-spotlight-fx.fusion-fullwidth {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: auto !important;
}

.cursor-spotlight-fx::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 28px 28px;
}

.cursor-spotlight-fx::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity .3s;
    background: radial-gradient(560px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(80, 130, 255, 0.32), rgba(80, 130, 255, 0.06) 45%, transparent 70%), linear-gradient(rgba(150, 185, 255, 0.85) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 185, 255, 0.85) 1px, transparent 1px);
    background-size: auto, 28px 28px, 28px 28px;
    -webkit-mask-image: radial-gradient(520px circle at var(--spot-x, 50%) var(--spot-y, 50%), #000, transparent 70%);
    mask-image: radial-gradient(520px circle at var(--spot-x, 50%) var(--spot-y, 50%), #000 -50%, transparent 50%);
}

.cursor-spotlight-fx:hover::after {
    opacity: 1;
}

.cursor-spotlight-fx>.fusion-builder-row,
.cursor-spotlight-fx>.fusion-layout-column,
.cursor-spotlight-fx .fusion-builder-row {
    position: relative;
    z-index: 3;
}

/* cursor grid reveal fx */

.cursor-grid-reveal-fx {
    position: relative !important;
    overflow: hidden !important;
    background-color: #F6F7F8 !important;
}

.cursor-grid-reveal-fx.fusion-fullwidth {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    left: auto !important;
}

.cursor-grid-reveal-fx::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image: linear-gradient(rgba(0, 0, 0, 0.015) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.015) 1px, transparent 1px);
    background-size: 28px 28px;
}

.cursor-grid-reveal-fx::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transition: opacity .3s;
    background-image: linear-gradient(rgba(120, 120, 120, 0.4) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 120, 120, 0.4) 1px, transparent 1px);
    background-size: 28px 28px;
    -webkit-mask-image: radial-gradient(520px circle at var(--spot-x, 50%) var(--spot-y, 50%), #000, transparent 70%);
    mask-image: radial-gradient(520px circle at var(--spot-x, 50%) var(--spot-y, 50%), #000, transparent 70%);
}

.cursor-grid-reveal-fx:hover::after {
    opacity: 1;
}

.cursor-grid-reveal-fx>.fusion-builder-row,
.cursor-grid-reveal-fx>.fusion-layout-column,
.cursor-grid-reveal-fx .fusion-builder-row {
    position: relative;
    z-index: 3;
}

.cursor-grid-reveal-fx--white {
    background-color: #ffffff !important;
}