/* =============================================================
   Circle Widget for Elementor — Frontend Styles
   ============================================================= */

/* ---- Grid ---- */
.cwe-circle-widget {
    width: 100%;
}

.cwe-grid {
    display: grid;
    grid-template-columns: repeat(6, auto);
    gap: 20px;
    align-items: start;
    justify-items: center;
    justify-content: center;
}

/* ---- Item ---- */
.cwe-circle-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.cwe-circle-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    width: 100%;
}

/* ---- Scroll Rotate Wrapper ----
   This outer div receives the scroll rotation transform.
   Keeping it separate from .cwe-circle-img-wrap means
   hover effects (which also use transform) never clash.
--------------------------------------------------------- */
.cwe-scroll-rotate-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    /* NO transition here — JS drives it frame-by-frame */
    will-change: transform;
}

/* ---- Image Wrapper ---- */
.cwe-circle-img-wrap {
    position: relative;
    overflow: hidden;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    flex-shrink: 0;
    /* Only border-color and box-shadow transition; transform is handled by scroll JS */
    transition: border-color 350ms ease, box-shadow 350ms ease, filter 350ms ease;
}

.cwe-circle-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 350ms ease, filter 350ms ease;
}

/* ---- Overlay ---- */
.cwe-circle-overlay {
    position: absolute;
    inset: 0;
    background: transparent;
    transition: background 350ms ease;
    pointer-events: none;
    border-radius: inherit;
}

/* ---- Name ---- */
.cwe-circle-name {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    color: #333333;
    text-align: center;
    word-break: break-word;
    transition: color 350ms ease;
    text-decoration: none;
    line-height: 1.3;
}

/* =============================================================
   HOVER EFFECTS
   All hover transforms go on .cwe-circle-img-wrap or its img,
   never on .cwe-scroll-rotate-wrap so they don't conflict.
   ============================================================= */

/* --- Zoom In --- */
.cwe-hover-zoom .cwe-circle-img-wrap img { transform: scale(1); }
.cwe-hover-zoom:hover .cwe-circle-img-wrap img { transform: scale(1.12); }

/* --- Zoom Out --- */
.cwe-hover-zoom_out .cwe-circle-img-wrap img { transform: scale(1.12); }
.cwe-hover-zoom_out:hover .cwe-circle-img-wrap img { transform: scale(1); }

/* --- Grayscale → Color --- */
.cwe-hover-grayscale .cwe-circle-img-wrap img { filter: grayscale(100%); }
.cwe-hover-grayscale:hover .cwe-circle-img-wrap img { filter: grayscale(0%); }

/* --- Brightness --- */
.cwe-hover-brightness .cwe-circle-img-wrap img { filter: brightness(1); }
.cwe-hover-brightness:hover .cwe-circle-img-wrap img { filter: brightness(1.25); }

/* --- Rotate (hover only — scroll rotate is on the outer wrapper) --- */
.cwe-hover-rotate .cwe-circle-img-wrap { transform: rotate(0deg); }
.cwe-hover-rotate:hover .cwe-circle-img-wrap { transform: rotate(8deg); }

/* --- Bounce --- */
@keyframes cwe-bounce {
    0%   { transform: translateY(0); }
    30%  { transform: translateY(-12px); }
    50%  { transform: translateY(0); }
    70%  { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}
.cwe-hover-bounce:hover .cwe-scroll-rotate-wrap {
    animation: cwe-bounce 0.55s ease forwards;
}

/* --- Shake --- */
@keyframes cwe-shake {
    0%, 100% { transform: translateX(0); }
    15%  { transform: translateX(-6px); }
    30%  { transform: translateX(6px); }
    45%  { transform: translateX(-4px); }
    60%  { transform: translateX(4px); }
    75%  { transform: translateX(-2px); }
    90%  { transform: translateX(2px); }
}
.cwe-hover-shake:hover .cwe-scroll-rotate-wrap {
    animation: cwe-shake 0.55s ease forwards;
}

/* --- Tilt --- */
@keyframes cwe-tilt {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(-8deg); }
    50%  { transform: rotate(8deg); }
    75%  { transform: rotate(-4deg); }
    100% { transform: rotate(0deg); }
}
.cwe-hover-tilt:hover .cwe-scroll-rotate-wrap {
    animation: cwe-tilt 0.6s ease forwards;
}

/* --- Pulse --- */
@keyframes cwe-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.1); }
    100% { transform: scale(1); }
}
.cwe-hover-pulse:hover .cwe-scroll-rotate-wrap {
    animation: cwe-pulse 0.6s ease infinite;
}

/* --- Float Up --- */
.cwe-hover-float .cwe-scroll-rotate-wrap { transform: translateY(0); }
.cwe-hover-float:hover .cwe-scroll-rotate-wrap {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.18);
}

/* --- Blur → Sharp --- */
.cwe-hover-blur .cwe-circle-img-wrap img { filter: blur(3px); }
.cwe-hover-blur:hover .cwe-circle-img-wrap img { filter: blur(0); }

/* --- Color Overlay --- */
.cwe-hover-overlay .cwe-circle-overlay { background: transparent; }
.cwe-hover-overlay:hover .cwe-circle-overlay { background: rgba(0,115,170,0.45); }

/* =============================================================
   SCROLL ROTATE — active state
   When JS is running, disable any CSS transition on the
   scroll-rotate-wrap so JS transform applies instantly each frame.
   ============================================================= */
.cwe-scroll-rotating .cwe-scroll-rotate-wrap {
    transition: none !important;
    animation: none !important;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */
@media (max-width: 767px) {
    .cwe-grid {
        grid-template-columns: repeat(2, auto);
    }
}

/* =============================================================
   ELEMENTOR EDITOR FIX
   ============================================================= */
.elementor-editor-active .cwe-circle-item {
    cursor: default;
}