/* Artwork layout & non-medieval dark studio surfaces. Interface colors inherit Formatra's cobalt theme. */
.sf-spotlight-media,
.sf-product-media,
.sf-detail-banner {
    background: #0b1214;
}

.sf-spotlight-media img,
.sf-product-media img,
.sf-detail-banner img {
    object-fit: contain;
}

.sf-spotlight-card:hover .sf-spotlight-media img,
.sf-product-card:hover .sf-product-media img {
    transform: none;
}

.sf-hero-voxel {
    max-width: 390px;
    max-height: 390px;
    filter: drop-shadow(0 18px 28px rgb(0 0 0 / .3));
    animation: none;
}

/* Clean modern studio hero backdrops (replaces medieval castle/bridge/forge screenshots) */
.sf-hero-backdrop.sf-hero-bg-studio {
    background:
        radial-gradient(circle at 76% 44%, rgb(20 184 166 / .28) 0%, transparent 52%),
        radial-gradient(circle at 20% 22%, rgb(37 99 235 / .22) 0%, transparent 48%),
        linear-gradient(135deg, #080d12 0%, #0b151a 52%, #090b10 100%);
}

.sf-hero-backdrop.sf-hero-bg-antibot {
    background:
        radial-gradient(circle at 75% 46%, rgb(16 185 129 / .28) 0%, transparent 52%),
        radial-gradient(circle at 18% 28%, rgb(14 165 233 / .2) 0%, transparent 46%),
        linear-gradient(135deg, #070e12 0%, #0b191c 54%, #080b10 100%);
}

.sf-hero-backdrop.sf-hero-bg-spigot {
    background:
        radial-gradient(circle at 76% 45%, rgb(16 185 129 / .32) 0%, transparent 54%),
        radial-gradient(circle at 22% 24%, rgb(20 184 166 / .18) 0%, transparent 46%),
        linear-gradient(135deg, #071012 0%, #0c1d1b 54%, #080b0f 100%);
}

.sf-hero-backdrop.is-active {
    opacity: 1;
}

/* Clean non-medieval mega-dropdown utility cards */
.sf-zoom-tech::before {
    background: transparent !important;
}

.sf-zoom-tech-emerald {
    background:
        radial-gradient(circle at 82% 50%, rgb(16 185 129 / .28), transparent 64%),
        linear-gradient(135deg, #0a1416 0%, #0f2421 100%);
}

.sf-zoom-tech-cobalt {
    background:
        radial-gradient(circle at 82% 50%, rgb(37 99 235 / .3), transparent 64%),
        linear-gradient(135deg, #0a101a 0%, #101d33 100%);
}

.sf-zoom-tech-slate {
    background:
        radial-gradient(circle at 82% 50%, rgb(20 184 166 / .22), transparent 64%),
        linear-gradient(135deg, #0c1117 0%, #141e27 100%);
}

/* Clean Minimal Server Showcase Marquee */
.sf-server-showcase {
    position: relative;
    overflow: hidden;
    padding-block: 28px 34px;
    background-color: #0a0b0e;
    background-image:
        linear-gradient(to right, rgb(255 255 255 / .028) 1px, transparent 1px),
        linear-gradient(to bottom, rgb(255 255 255 / .028) 1px, transparent 1px);
    background-size: 32px 32px;
    border-top: 1px solid rgb(255 255 255 / .05);
    border-bottom: 1px solid rgb(255 255 255 / .05);
}

.sf-server-caption {
    margin: 0 0 20px;
    padding-inline: 20px;
    text-align: center;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: #8c93a0;
}

.sf-server-strip-static {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 56px;
    padding-inline: 24px;
}

.sf-server-logo-img.sf-server-logo-single {
    height: 88px;
}

@media (min-width: 768px) {
    .sf-server-logo-img.sf-server-logo-single {
        height: 98px;
    }
}

.sf-server-strip-mask {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.sf-server-strip-mask::before,
.sf-server-strip-mask::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(48px, 9vw, 150px);
    z-index: 2;
    pointer-events: none;
}

.sf-server-strip-mask::before {
    left: 0;
    background: linear-gradient(90deg, #0a0b0e 0%, transparent 100%);
}

.sf-server-strip-mask::after {
    right: 0;
    background: linear-gradient(270deg, #0a0b0e 0%, transparent 100%);
}

@keyframes sf-server-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }
    to {
        transform: translate3d(-50%, 0, 0);
    }
}

.sf-server-strip-track {
    display: flex;
    width: max-content;
    animation: sf-server-scroll 36s linear infinite;
}

.sf-server-strip-mask:hover .sf-server-strip-track,
.sf-server-strip-mask:focus-within .sf-server-strip-track {
    animation-play-state: paused;
}

.sf-server-strip-group {
    display: flex;
    align-items: center;
    gap: 54px;
    padding-right: 54px;
}

@media (min-width: 768px) {
    .sf-server-strip-group {
        gap: 72px;
        padding-right: 72px;
    }
}

.sf-server-logo-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sf-server-logo-img {
    height: 74px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 8px 16px rgb(0 0 0 / .5));
    transition: transform .22s ease;
}

.sf-server-logo-item:hover .sf-server-logo-img {
    transform: scale(1.04);
}

@media (min-width: 768px) {
    .sf-server-logo-img {
        height: 86px;
        max-width: 210px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sf-server-strip-track {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    .sf-server-strip-group[aria-hidden="true"] {
        display: none;
    }
}