/* ========================================================================== 
   ARC GAMES — Hero Infinite Spiral
   Home-only product visual fed by WooCommerce.
   ========================================================================== */

.arc-hero-spiral {
    --arc-spiral-speed: 0.35;
    --arc-spiral-radius: 205px;
    --arc-spiral-card-width: 140px;
    --arc-spiral-card-height: 124px;
    --arc-spiral-vertical-spacing: 66px;
    --arc-spiral-perspective: 1050px;
    --arc-spiral-card-cut: 12px;
    --arc-spiral-card-border: 1px;
    --arc-spiral-center-scale: 1.2;
    --arc-spiral-edge-blur: 6px;
    --arc-spiral-cards-per-turn: 6;
    --arc-spiral-rotation: 48deg;
    --arc-spiral-edge-fade: 0.8;
    --arc-spiral-depth-blur: 0px;

    position: relative;
    isolation: isolate;

    width: 100%;
    height: 100%;
    min-height: 320px;
    overflow: hidden;

    perspective: var(--arc-spiral-perspective);
}

.arc-hero-spiral__stage {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
}

.arc-hero-spiral__item {
    position: absolute;
    top: 50%;
    left: 50%;

    display: block;
    width: var(--arc-spiral-card-width);
    height: var(--arc-spiral-card-height);
    overflow: visible;
    isolation: isolate;

    border: 0;
    border-radius: 0;
    background: transparent;

    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform, opacity;

    color: inherit;
    text-decoration: none;
}

/*
 * The border is its own clipped layer so the cyan glow can extend beyond the
 * angular card silhouette. Depth blur is passed in as a CSS variable so the
 * glow stays independent from the animated card container.
 */
.arc-hero-spiral__item::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;

    background: var(--arc-primary);
    clip-path: polygon(
        var(--arc-spiral-card-cut) 0,
        100% 0,
        100% calc(100% - var(--arc-spiral-card-cut)),
        calc(100% - var(--arc-spiral-card-cut)) 100%,
        0 100%,
        0 var(--arc-spiral-card-cut)
    );

    filter:
        blur(var(--arc-spiral-depth-blur))
        drop-shadow(0 0 3px var(--arc-primary))
        drop-shadow(0 0 8px var(--arc-primary))
        drop-shadow(0 0 16px var(--arc-primary));
    -webkit-filter:
        blur(var(--arc-spiral-depth-blur))
        drop-shadow(0 0 3px var(--arc-primary))
        drop-shadow(0 0 8px var(--arc-primary))
        drop-shadow(0 0 16px var(--arc-primary));
    will-change: filter;
}

.arc-hero-spiral__item::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset: var(--arc-spiral-card-border);
    pointer-events: none;

    background: var(--arc-bg-dark);
    clip-path: polygon(
        calc(var(--arc-spiral-card-cut) - var(--arc-spiral-card-border)) 0,
        100% 0,
        100% calc(100% - (var(--arc-spiral-card-cut) - var(--arc-spiral-card-border))),
        calc(100% - (var(--arc-spiral-card-cut) - var(--arc-spiral-card-border))) 100%,
        0 100%,
        0 calc(var(--arc-spiral-card-cut) - var(--arc-spiral-card-border))
    );

    filter: blur(var(--arc-spiral-depth-blur));
    will-change: filter;
}

.arc-hero-spiral__item:hover {
    color: inherit;
}

.arc-hero-spiral__item:focus-visible {
    outline: 2px solid var(--arc-primary);
    outline-offset: 4px;
}

.arc-hero-spiral__image {
    position: absolute;
    z-index: 2;
    top: var(--arc-spiral-card-border);
    left: var(--arc-spiral-card-border);

    display: block;
    width: calc(100% - (var(--arc-spiral-card-border) * 2));
    height: calc(100% - (var(--arc-spiral-card-border) * 2));
    max-width: none;
    max-height: none;

    object-fit: cover;
    object-position: center center;
    user-select: none;

    clip-path: polygon(
        calc(var(--arc-spiral-card-cut) - var(--arc-spiral-card-border)) 0,
        100% 0,
        100% calc(100% - (var(--arc-spiral-card-cut) - var(--arc-spiral-card-border))),
        calc(100% - (var(--arc-spiral-card-cut) - var(--arc-spiral-card-border))) 100%,
        0 100%,
        0 calc(var(--arc-spiral-card-cut) - var(--arc-spiral-card-border))
    );

    filter: blur(var(--arc-spiral-depth-blur));
    will-change: filter;
}

@media (prefers-reduced-motion: reduce) {
    .arc-hero-spiral__item {
        will-change: auto;
    }
}