@property --rotation{
    syntax: "<angle>";
    inherits: true;
    initial-value: 0deg;
}

.aafe-circular-gallery-wrapper {
    position: relative;
    width: 100%;
    min-height: 80vh; /* Needed because the container is position fixed/absolute inside */
    display: grid;
    place-items: center;
    overflow: hidden;
    background-color: var(--aafe-bg-color, transparent);
    box-sizing: border-box;
}

.aafe-circular-gallery-wrapper * {
    box-sizing: border-box;
}

.aafe-circular-gallery__container {
    --card-trans-duration: 1000ms;
    --card-trans-easing: linear(0, 0.01 0.8%, 0.038 1.6%, 0.154 3.4%, 0.781 9.7%, 1.01 12.5%, 1.089 13.8%, 1.153 15.2%, 1.195 16.6%, 1.219 18%, 1.224 19.7%, 1.208 21.6%, 1.172 23.6%, 1.057 28.6%, 1.007 31.2%, 0.969 34.1%, 0.951 37.1%, 0.953 40.9%, 0.998 50.4%, 1.011 56%, 0.998 74.7%, 1);

    --card-width: var(--aafe-cg-card-width, clamp(40px,7vw, 120px));
    --card-border-radius: var(--aafe-cg-card-radius, 1vw);

    --radius: var(--aafe-cg-radius, 40vmin); 
    --cards: var(--aafe-cg-count, 20);
    --arc-size: calc((var(--cards) - 1) / var(--cards)); /* Auto calculate perfect circle */
    --arc-center: var(--aafe-cg-arc-center, 0.275);        
    --arc-start: calc(var(--arc-center) - var(--arc-size) / 2);

    --arc-shift-delta: var(--aafe-cg-arc-shift, 0.0075);

    anchor-name: --center;
    position: absolute; 
    inset: 0;
    margin: auto;
    width: var(--radius);
    height: var(--radius);
    aspect-ratio: 1;
    transform: rotate(var(--rotation));
    transition: transform 700ms linear;
    display: grid;
    place-content: center;
}

.aafe-circular-gallery__title {
    margin: 0;
    text-align: center;
    font-family: 'Inter Tight', sans-serif;
    color: var(--aafe-cg-title-color, #1A1A1A);
    z-index: 10;
}

.aafe-circular-gallery__item {
    position: absolute;
    inset: 0;
    pointer-events: none; /* Let clicks pass through the item wrapper to the link */
    --card-i: var(--i);
    --arc-step: calc(1 / var(--cards)); /* Mathematically exact spacing for N cards */
    --arc-shift: calc(var(--arc-shift-delta) * var(--d, 1));
    --card-offset-distance: calc(
        (var(--arc-start)
         + (var(--card-i) - 1) * var(--arc-step)
         + var(--arc-shift)
        ) * 100%);
}

.aafe-circular-gallery__item:has(.aafe-circular-gallery__link:hover),
.aafe-circular-gallery__item:target {
    --title-opacity: 1;
}

.aafe-circular-gallery__item:target {
    --zindex: 2;
    --center-opacity: 1;
    --center-scale: 1;
    --image-outline-color: var(--aafe-cg-outline-color, rgba(255,255,255,0.25));
}
.aafe-circular-gallery__item.is-active {
    --zindex: 2;
    --center-opacity: 1;
    --center-scale: 1;
    --image-outline-color: var(--aafe-cg-outline-color, rgba(255,255,255,0.25));
}

.aafe-circular-gallery__item::before {
    content: '';
    position: absolute;
    transform: rotate(calc(var(--rotation) * -1));
    transition-timing-function: ease-in-out;
}

/* large image in center of wrapper */
.aafe-circular-gallery__item::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--aafe-cg-center-radius, 50%);
    background: var(--bg-img);
    box-sizing: border-box;

    outline: var(--aafe-cg-center-outline-width, 10px) solid var(--aafe-cg-center-outline-color, rgba(0,0,0,0.25));
    outline-offset: var(--aafe-cg-center-outline-offset, -10px);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    opacity: var(--center-opacity, 0);
    scale: var(--center-scale, 0);
    pointer-events: none;
    transition-property: scale, opacity;
    transition-duration: 300ms, 150ms;
}

/* image title - over thumb */
.aafe-circular-gallery__title-wrap {
    position: absolute;
    z-index: 10;
    pointer-events: none;
    opacity: var(--title-opacity, 0);
    transition-property: opacity, transform;
    transition-duration: 150ms;
    border: 1px solid var(--aafe-cg-popup-border, rgba(255, 255, 255, 0.75));
    background: var(--aafe-cg-popup-bg, rgba(0, 0, 0, 0.25));
    backdrop-filter: blur(var(--aafe-cg-popup-blur, 3px));
    padding: 0.25em 1em;
    border-radius: 5px;
    font-family: 'Inter', sans-serif;
    color: var(--aafe-cg-popup-color, #ffffff);
    /* font-size is now controlled by elementor typography, default fallback: */
    font-size: var(--aafe-cg-popup-fs, clamp(0.6rem, 1vw + 0.045rem, 0.85rem));
    
    /* Position exactly on the thumb */
    offset-path: circle(var(--radius) at 50% 50%);
    offset-distance: var(--card-offset-distance);
    offset-rotate: 0deg; /* keep text upright */
    offset-anchor: 50% -20%; /* Push below the thumb */
}

@starting-style {
    .aafe-circular-gallery__title-wrap {
        opacity: 0;
    }
}

/* links with images are placed in a circle */
.aafe-circular-gallery__link {
    pointer-events: auto; /* Restore pointer events for the link */
    position: absolute;
    display: block;
    width: var(--card-width);
    aspect-ratio: var(--aafe-cg-card-aspect, 4/6);
    border-radius: var(--card-border-radius);
    border: 2px solid var(--aafe-cg-border-color, #ffffff);
    border: 2px solid var(--aafe-cg-border-color, rgba(255,255,255,0.7));
    offset-path: circle(var(--radius) at 50% 50%);
    offset-distance: var(--card-offset-distance);
    offset-rotate: auto;
    offset-anchor: 50% 0%;
    transition:
        offset var(--card-trans-duration) var(--card-trans-easing),
        box-shadow 300ms ease,
        transform 300ms ease;
    z-index: var(--zindex, 1);
    overflow: hidden;

    /* Staggered entry animation */
    animation: aafe-cg-card-in 600ms ease both;
    animation-delay: calc(var(--i) * 40ms);
}

/* Shimmer overlay on hover */
.aafe-circular-gallery__link::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        rgba(255,255,255,0)   30%,
        rgba(255,255,255,0.22) 50%,
        rgba(255,255,255,0)   70%
    );
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
    z-index: 2;
}
.aafe-circular-gallery__link:hover::after {
    opacity: 1;
    animation: aafe-cg-shimmer 600ms ease forwards;
}

/* ── Image inside card ──────────────────────────────────── */
.aafe-circular-gallery__img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0;
    padding: 0;
    border-radius: inherit;
    outline: 5px solid var(--image-outline-color, transparent);
    outline-offset: -5px;
    transition: outline 300ms ease-in-out, filter 300ms ease;
}

/* Subtle brighten on card hover */
.aafe-circular-gallery__link:hover .aafe-circular-gallery__img {
    filter: brightness(1.12) saturate(1.1);
}

/* ══════════════════════════════════════════════════════════
   ORBIT  — neighbouring cards spread on hover
   ══════════════════════════════════════════════════════════ */

/* FORWARD siblings (clockwise / +) */
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:hover) > .aafe-circular-gallery__item:hover + .aafe-circular-gallery__item,
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:last-child:hover) > .aafe-circular-gallery__item:nth-child(1) { --d: 3; }

.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:hover) > .aafe-circular-gallery__item:hover + .aafe-circular-gallery__item + .aafe-circular-gallery__item,
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:last-child:hover) > .aafe-circular-gallery__item:nth-child(2),
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:nth-last-child(2):hover) > .aafe-circular-gallery__item:nth-child(1) { --d: 2; }

.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:hover) > .aafe-circular-gallery__item:hover + .aafe-circular-gallery__item + .aafe-circular-gallery__item + .aafe-circular-gallery__item,
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:last-child:hover) > .aafe-circular-gallery__item:nth-child(3),
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:nth-last-child(2):hover) > .aafe-circular-gallery__item:nth-child(2),
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:nth-last-child(3):hover) > .aafe-circular-gallery__item:nth-child(1) { --d: 1; }

.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:hover) > .aafe-circular-gallery__item:hover + .aafe-circular-gallery__item + .aafe-circular-gallery__item + .aafe-circular-gallery__item + .aafe-circular-gallery__item,
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:last-child:hover) > .aafe-circular-gallery__item:nth-child(4),
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:nth-last-child(2):hover) > .aafe-circular-gallery__item:nth-child(3),
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:nth-last-child(3):hover) > .aafe-circular-gallery__item:nth-child(2),
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:nth-last-child(4):hover) > .aafe-circular-gallery__item:nth-child(1) { --d: .5; }

/* BACKWARD siblings (counter-clockwise / -) */
.aafe-circular-gallery__container .aafe-circular-gallery__item:has(+ .aafe-circular-gallery__item:hover),
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:nth-child(1):hover) .aafe-circular-gallery__item:nth-last-child(1) { --d: -3; }

.aafe-circular-gallery__container .aafe-circular-gallery__item:has(+ .aafe-circular-gallery__item + .aafe-circular-gallery__item:hover),
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:nth-child(1):hover) .aafe-circular-gallery__item:nth-last-child(2),
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:nth-child(2):hover) .aafe-circular-gallery__item:nth-last-child(1) { --d: -2; }

.aafe-circular-gallery__container .aafe-circular-gallery__item:has(+ .aafe-circular-gallery__item + .aafe-circular-gallery__item + .aafe-circular-gallery__item:hover),
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:nth-child(1):hover) .aafe-circular-gallery__item:nth-last-child(3),
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:nth-child(2):hover) .aafe-circular-gallery__item:nth-last-child(2),
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:nth-child(3):hover) .aafe-circular-gallery__item:nth-last-child(1) { --d: -1; }

.aafe-circular-gallery__container .aafe-circular-gallery__item:has(+ .aafe-circular-gallery__item + .aafe-circular-gallery__item + .aafe-circular-gallery__item + .aafe-circular-gallery__item:hover),
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:nth-child(1):hover) .aafe-circular-gallery__item:nth-last-child(4),
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:nth-child(2):hover) .aafe-circular-gallery__item:nth-last-child(3),
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:nth-child(3):hover) .aafe-circular-gallery__item:nth-last-child(2),
.aafe-circular-gallery__container:has(> .aafe-circular-gallery__item:nth-child(4):hover) .aafe-circular-gallery__item:nth-last-child(1) { --d: -.5; }

/* ══════════════════════════════════════════════════════════
   HOVER EFFECTS  (Elementor data-hover attribute)
   ══════════════════════════════════════════════════════════ */
.aafe-circular-gallery-wrapper[data-hover="lift"] .aafe-circular-gallery__link:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 40px var(--aafe-cg-lift-shadow, rgba(0, 0, 0, 0.25));
}
.aafe-circular-gallery-wrapper[data-hover="scale"] .aafe-circular-gallery__link:hover {
    transform: scale(var(--aafe-hover-scale, 1.08));
}
.aafe-circular-gallery-wrapper[data-hover="glow"] .aafe-circular-gallery__link:hover {
    box-shadow:
        0 0 0 3px var(--aafe-cg-glow-color, #4f46e5),
        0 8px 30px var(--aafe-cg-glow-shadow, rgba(79, 70, 229, 0.35));
}
.aafe-circular-gallery-wrapper[data-hover="border-pop"] .aafe-circular-gallery__link:hover {
    border-color: var(--aafe-cg-border-pop-color, #4f46e5) !important;
    transform: scale(var(--aafe-hover-scale, 1.01));
}

/* AAFE IMPROVEMENT: Responsive CSS Fixes */
@media (max-width: 768px) {
    .aafe-circular-gallery__container {
        --aafe-cg-card-width: clamp(30px, 6vw, 80px);
        --aafe-cg-radius: 60vmin;
    }
    .aafe-circular-gallery__title-wrap {
        font-size: clamp(0.5rem, 0.8vw + 0.045rem, 0.75rem);
    }
}

@media (max-width: 480px) {
    .aafe-circular-gallery__container {
        --aafe-cg-card-width: clamp(25px, 8vw, 60px);
        --aafe-cg-radius: 80vmin;
    }
    .aafe-circular-gallery-wrapper {
        min-height: 60vh;
    }
}

/* AAFE IMPROVEMENT: RTL Support */
[dir="rtl"] .aafe-circular-gallery__title {
    /* Title is centered but good to ensure correct dir */
    direction: rtl;
}