/* Scorpion Gallery — Circles template
   Concentric rings of circular images with optional orbit animation.
   Inspired by: css-tip.com/circular-gallery */

.ssg-tmpl-circles {
    --scg-size:        100px;
    --scg-hover-color: #f68e13;
    --scg-hover-rgb:   246, 142, 19;
}

/* ── Outer wrapper ────────────────────────────────────── */

.ssg-tmpl-circles .scg-wrap {
    display:         flex;
    justify-content: center;
    align-items:     flex-start;
    padding:         2rem;
    overflow:        hidden;
}

/* ── Fixed-size canvas ────────────────────────────────── */

.ssg-tmpl-circles .scg-canvas {
    position:   relative;
    flex-shrink: 0;
}

/* ── Ring container ───────────────────────────────────── */
/* Zero-size div placed at the canvas centre.
   Rotating it orbits all child images around that point. */

.ssg-tmpl-circles .scg-ring {
    position:        absolute;
    top:             50%;
    left:            50%;
    width:           0;
    height:          0;
    transform-origin: 0 0;
}

/* ── Circular image tile ──────────────────────────────── */

.ssg-tmpl-circles .scg-img {
    width:         var(--scg-size);
    height:        var(--scg-size);
    border-radius: 50%;
    overflow:      hidden;
    position:      absolute;
    cursor:        pointer;
    box-shadow:    0 2px 12px rgba(0, 0, 0, 0.28);
    transition:    box-shadow 0.35s ease;
}

.ssg-tmpl-circles .scg-img:hover {
    box-shadow: 0 0 0 3px var(--scg-hover-color),
                0 4px 20px rgba(var(--scg-hover-rgb), 0.45);
    z-index: 20;
}

/* Centre image */
.ssg-tmpl-circles .scg-img--center {
    top:       50%;
    left:      50%;
    transform: translate(-50%, -50%);
    z-index:   5;
}

/* Ring images — placed on a circle via CSS sin/cos */
.ssg-tmpl-circles .scg-ring .scg-img {
    --angle: calc(var(--i) * 360deg / var(--count));
    top:  calc(sin(var(--angle)) * var(--radius) - var(--scg-size) / 2);
    left: calc(cos(var(--angle)) * var(--radius) - var(--scg-size) / 2);
}

/* ── Inner link / span wrapper ───────────────────────── */

.ssg-tmpl-circles .scg-img a,
.ssg-tmpl-circles .scg-img span.ssg-no-link {
    display:         block;
    width:           100%;
    height:          100%;
    position:        relative;
    overflow:        hidden;
    border-radius:   50%;
    text-decoration: none;
}

/* ── Image ───────────────────────────────────────────── */

.ssg-tmpl-circles .scg-img img {
    position:    absolute;
    top:         0;
    left:        0;
    width:       100%;
    height:      100%;
    object-fit:  cover;
    border-radius: 50%;
    filter:      brightness(0.87) saturate(0.9);
    transition:  transform 0.4s ease, filter 0.4s ease;
}

.ssg-tmpl-circles .scg-img:hover img {
    transform: scale(1.12);
    filter:    brightness(1) saturate(1.1);
}

/* ── Hover overlay ───────────────────────────────────── */

.ssg-tmpl-circles .scg-overlay {
    position:        absolute;
    inset:           0;
    border-radius:   50%;
    background:      radial-gradient(ellipse at center, transparent 28%, rgba(0, 0, 0, 0.68) 100%);
    z-index:         1;
    opacity:         0;
    transition:      opacity 0.35s ease;
    display:         flex;
    align-items:     center;
    justify-content: center;
    pointer-events:  none;
}

.ssg-tmpl-circles .scg-img:hover .scg-overlay {
    opacity: 1;
}

.ssg-tmpl-circles .scg-overlay span {
    color:          #fff;
    font-size:      0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-shadow:    0 1px 4px rgba(0, 0, 0, 0.85);
    text-align:     center;
    padding:        0 12%;
}

/* ── Orbit animation ──────────────────────────────────── */
/* Ring 1 & 3: clockwise.  Ring 2 & 4: counter-clockwise.
   Images counter-rotate by the same amount to stay upright.
   --dur is inherited from the .scg-ring inline style.        */

@keyframes scg-cw  { to { transform: rotate( 1turn); } }
@keyframes scg-ccw { to { transform: rotate(-1turn); } }

.scg-animated .scg-ring-1,
.scg-animated .scg-ring-3 {
    animation: scg-cw var(--dur, 30s) linear infinite;
}

.scg-animated .scg-ring-2,
.scg-animated .scg-ring-4 {
    animation: scg-ccw var(--dur, 55s) linear infinite;
}

/* Counter-rotate images so they stay upright while orbiting */
.scg-animated .scg-ring-1 .scg-img,
.scg-animated .scg-ring-3 .scg-img {
    animation: scg-ccw var(--dur, 30s) linear infinite;
}

.scg-animated .scg-ring-2 .scg-img,
.scg-animated .scg-ring-4 .scg-img {
    animation: scg-cw var(--dur, 55s) linear infinite;
}