/* Circular Gallery Component */

.circular-gallery {
    --size: 120px;
    --offset: 30px;
    --duration: 30s;
    --total: 7;
    /* Default fallback */

    position: relative;
    aspect-ratio: 1 / 1;
    pointer-events: none;
    display: inline-grid;
    border-radius: 9999px;
    width: calc(var(--size) * 3);
    border: 6px solid #20c863;
    /* Primary Color */
    transition: box-shadow 0.3s ease-in-out;
    animation: spin-out var(--duration) linear infinite;

    /* Centering */
    margin: 0 auto;
}

.circular-gallery .item {
    z-index: 1;
    display: flex;
    grid-area: 1 / 1;
    width: var(--size);
    aspect-ratio: 1 / 1;
    pointer-events: auto;
    border-radius: 9999px;
    animation: spin-in var(--duration) linear infinite reverse;

    /* logic: offset = circle(r) at angle */
    /* angle = 360deg * index / total */
    /* r = size / (2 * sin(180deg / total)) + offset */
    /* 
     CSS sin() takes radians or deg. 0.5turn = 180deg.
     We need to construct the transform manually or use offset-path if supported widely, 
     but the requested code used 'offset' property which is part of Motion Path module.
     
     Standard CSS 'offset' shorthand: offset-path, offset-distance, etc.
     The user's code:
     offset: circle(calc(var(--size) / (2 * sin(0.5turn / sibling-count())) + var(--offset))) calc(100% * sibling-index() / sibling-count()) 0deg;
     
     Adapted for CSS variables:
  */
    offset-path: circle(calc(var(--size) / (2 * sin(180deg / var(--total))) + var(--offset)));
    offset-distance: calc(100% * var(--i) / var(--total));
    offset-rotate: 0deg;

    /* Fallback for browsers without 'offset' support (basic positioning) - Optional but good practice. 
     For now, we stick to the requested logic relying on 'offset'. 
  */
}

.circular-gallery .item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: auto;
    border-radius: 9999px;
    border: 3px solid #20c863;
    /* Primary Color */

    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    transition-property: box-shadow, scale, border;
}

.circular-gallery .item:hover {
    z-index: 2;
}

.circular-gallery .item:hover img {
    scale: 1.5;
    border-color: #d4ff00;
    /* Secondary Color */
    box-shadow: 0 0 1rem #d4ff00;
}

/* Pause animation on hover */
.circular-gallery:has(.item:hover) {
    animation-play-state: paused;
    box-shadow: 0 0 60px 12px #20c863 inset,
        0 0 21px 15px #010c15;
    /* Body colorish */
}

.circular-gallery:has(.item:hover) .item {
    animation-play-state: paused;
}

/* Scale down others when one is hovered */
.circular-gallery:has(.item:hover) .item:not(:hover) img {
    scale: 0.6;
}


/* Center Circles */
.circular-gallery::before {
    content: "";
    z-index: -1;
    border: inherit;
    position: absolute;
    width: var(--size);
    aspect-ratio: 1 / 1;
    border-radius: 0.25rem;

    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(-50%, -50%);

    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    transition-property: transform, border-radius, border, box-shadow;
}

.circular-gallery::after {
    content: "";
    z-index: -1;
    inset: -6px;
    width: inherit;
    height: inherit;
    border: inherit;
    position: absolute;
    border-radius: inherit;
    animation: spin-in var(--duration) linear infinite reverse;

    transition-duration: 0.3s;
    transition-timing-function: ease-in-out;
    transition-property: scale, border-radius, border, box-shadow;
}

.circular-gallery:has(.item:hover)::before {
    --scale: 4;
    /* calc(-50% / var(--scale)) is -12.5% if scale is 4 */
    transform: scale(var(--scale)) translate(calc(-50% / var(--scale)), calc(-50% / var(--scale)));

    border-width: 2px;
    border-radius: inherit;
    border-color: #d4ff00;
    box-shadow: 0 0 15px #d4ff00,
        0 0 15px #20c863 inset;
}

.circular-gallery:has(.item:hover)::after {
    scale: 0.3;
    border-width: 18px;
    border-radius: 3rem;
    border-color: #d4ff00;
    box-shadow: 0 0 var(--size) #d4ff00 inset;
}

@keyframes spin-out {
    from {
        rotate: 0;
    }

    to {
        rotate: 360deg;
    }
}

@keyframes spin-in {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Responsive Scaling */
@media (max-width: 768px) {
    .circular-gallery {
        transform: scale(0.6);
    }
}