:root{
    --wm-showcase-accent:#b765ff;
    --wm-showcase-accent-soft:rgba(183,101,255,.20);
    --wm-showcase-border:rgba(255,255,255,.10);
}

body[data-wizard-experience="Member"]{
    --wm-showcase-accent:#9d6cff;
    --wm-showcase-accent-soft:rgba(157,108,255,.20);
}

body[data-wizard-experience="Admin"]{
    --wm-showcase-accent:#75b9ff;
    --wm-showcase-accent-soft:rgba(117,185,255,.18);
}

.wm-showcase-surface{
    position:relative;
}

.wm-showcase-reveal{
    opacity:0;
    transform:translateY(22px) scale(.992);
}

.wm-showcase-reveal.wm-showcase-visible{
    opacity:1;
    transform:none;
    transition:
        opacity 620ms ease var(--wm-showcase-delay,0ms),
        transform 620ms cubic-bezier(.2,.75,.2,1) var(--wm-showcase-delay,0ms);
}

.wm-showcase-card{
    --wm-card-rotate-x:0deg;
    --wm-card-rotate-y:0deg;
    --wm-glow-x:50%;
    --wm-glow-y:50%;
    position:relative;
    overflow:hidden;
    transform:
        perspective(900px)
        rotateX(var(--wm-card-rotate-x))
        rotateY(var(--wm-card-rotate-y))
        translateZ(0);
    border-color:var(--wm-showcase-border);
    box-shadow:
        0 18px 46px rgba(0,0,0,.34),
        0 1px 0 rgba(255,255,255,.04) inset;
    transition:
        border-color 180ms ease,
        box-shadow 180ms ease;
}

.wm-showcase-card:hover,
.wm-showcase-card:focus-visible{
    border-color:var(--wm-showcase-accent-soft);
    box-shadow:
        0 24px 60px rgba(0,0,0,.42),
        0 0 0 1px var(--wm-showcase-accent-soft) inset,
        0 0 34px var(--wm-showcase-accent-soft);
}

.wm-showcase-card:focus-visible{
    outline:2px solid var(--wm-showcase-accent);
    outline-offset:4px;
}

.wm-showcase-glass,
.wm-showcase-sheen,
.wm-showcase-glow{
    position:absolute;
    inset:0;
    pointer-events:none;
}

.wm-showcase-glass{
    z-index:1;
    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.045),
            rgba(255,255,255,.008) 44%,
            rgba(0,0,0,.08)
        );
}

.wm-showcase-sheen{
    z-index:2;
    opacity:.34;
    background:
        linear-gradient(
            120deg,
            transparent 24%,
            rgba(255,255,255,.055) 46%,
            transparent 68%
        );
    transform:translateX(-72%);
    transition:transform 620ms ease;
}

.wm-showcase-card:hover > .wm-showcase-sheen,
.wm-showcase-card:focus-visible > .wm-showcase-sheen{
    transform:translateX(72%);
}

.wm-showcase-glow{
    z-index:3;
    opacity:0;
    background:
        radial-gradient(
            circle at var(--wm-glow-x) var(--wm-glow-y),
            var(--wm-showcase-accent-soft),
            transparent 34%
        );
    transition:opacity 180ms ease;
}

.wm-showcase-card:hover > .wm-showcase-glow,
.wm-showcase-card:focus-visible > .wm-showcase-glow{
    opacity:1;
}

.wm-showcase-card > :not(.wm-showcase-glass):not(.wm-showcase-sheen):not(.wm-showcase-glow){
    position:relative;
    z-index:4;
}

.realm-grid .wm-showcase-card{
    background-color:transparent;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}

.realm-grid .wm-showcase-card::before{
    z-index:0;
}

.realm-grid .wm-showcase-card > div{
    z-index:4;
}

.realm-grid .wm-showcase-card b,
.wm-showcase-card .wm-link-icon{
    color:var(--wm-showcase-accent);
}

@media(max-width:900px){
    .wm-showcase-card{
        transform:none!important;
    }
}

@media(prefers-reduced-motion:reduce){
    .wm-showcase-reveal,
    .wm-showcase-reveal.wm-showcase-visible{
        opacity:1!important;
        transform:none!important;
        transition:none!important;
    }

    .wm-showcase-card,
    .wm-showcase-glass,
    .wm-showcase-sheen,
    .wm-showcase-glow{
        transform:none!important;
        transition:none!important;
        animation:none!important;
    }
}