/* =========================================================
   Elementor Newton's Cradle Gallery – CSS  v1.0
   ========================================================= */

/* ── Wrapper ──────────────────────────────────────────── */
.enc-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 8px;
}

/* ── Frame Styles ─────────────────────────────────────── */

/* Top crossbar + vertical side bars */
.enc-frame__top {
    position: relative;
    width: 90%;
    max-width: 780px;
    height: 28px;
    margin-top: 28px;
    flex-shrink: 0;
    z-index: 10;
}

.enc-frame__crossbar {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    height: 100%;
}

.enc-frame__bar {
    position: absolute;
    top: 0;
    width: 14px;
    height: calc(var(--enc-string-len, 160px) + var(--enc-ball-size, 110px) + 20px);
    border-radius: 4px;
    z-index: 9;
}
.enc-frame__bar--left  { left: 2px; }
.enc-frame__bar--right { right: 2px; }

/* Metal frame */
.enc-frame--metal .enc-frame__crossbar {
    background: linear-gradient(180deg, #e8e8e8 0%, #a0a0a0 40%, #c8c8c8 60%, #888 100%);
    box-shadow: 0 4px 16px rgba(0,0,0,0.6), inset 0 2px 4px rgba(255,255,255,0.4);
}
.enc-frame--metal .enc-frame__bar {
    background: linear-gradient(90deg, #b0b0b0, #e0e0e0, #a0a0a0);
    box-shadow: 2px 0 8px rgba(0,0,0,0.5);
}

/* Wood frame */
.enc-frame--wood .enc-frame__crossbar {
    background: linear-gradient(180deg, #c8922a 0%, #8b5e1a 40%, #a87232 70%, #6b4510 100%);
    box-shadow: 0 4px 16px rgba(0,0,0,0.5), inset 0 1px 3px rgba(255,220,120,0.3);
}
.enc-frame--wood .enc-frame__bar {
    background: linear-gradient(90deg, #7a4e18, #c8882a, #7a4e18);
    box-shadow: 2px 0 6px rgba(0,0,0,0.4);
}

/* Glass / acrylic frame */
.enc-frame--glass .enc-frame__crossbar {
    background: linear-gradient(180deg,
        rgba(200,220,255,0.25) 0%,
        rgba(180,210,255,0.10) 50%,
        rgba(200,220,255,0.20) 100%);
    border: 1px solid rgba(180,210,255,0.4);
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 20px rgba(100,160,255,0.25);
}
.enc-frame--glass .enc-frame__bar {
    background: linear-gradient(90deg,
        rgba(180,210,255,0.15),
        rgba(200,230,255,0.30),
        rgba(180,210,255,0.15));
    border: 1px solid rgba(180,210,255,0.3);
}

/* No frame */
.enc-frame--none .enc-frame__crossbar,
.enc-frame--none .enc-frame__bar { display: none; }

/* ── Frame legs ───────────────────────────────────────── */
.enc-frame__legs {
    display: flex;
    justify-content: space-between;
    width: 90%;
    max-width: 780px;
    margin-top: -4px;
}

.enc-frame__leg {
    width: 12px;
    height: 24px;
    border-radius: 0 0 4px 4px;
}

.enc-frame--metal .enc-frame__leg {
    background: linear-gradient(180deg, #888, #555);
}
.enc-frame--wood .enc-frame__leg {
    background: linear-gradient(180deg, #7a4e18, #4a2e0a);
}
.enc-frame--glass .enc-frame__leg {
    background: rgba(180,210,255,0.2);
    border: 1px solid rgba(180,210,255,0.3);
}
.enc-frame--none .enc-frame__leg { display: none; }

/* ── Cradle row ───────────────────────────────────────── */
.enc-cradle {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-top: 0;
    flex: 1;
    position: relative;
    width: 90%;
    max-width: 780px;
}

/* ── Individual pendulum ──────────────────────────────── */
.enc-pendulum {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    /* transform-origin is at the TOP — set via JS */
    cursor: pointer;
    flex: 1;
    max-width: calc(var(--enc-ball-size, 110px) + 20px);
}

/* ── Strings ──────────────────────────────────────────── */
.enc-string {
    position: absolute;
    top: 0;
    width: var(--enc-str-width, 2px);
    height: var(--enc-string-len, 160px);
    background: var(--enc-str-color, #888);
    transform-origin: top center;
    pointer-events: none;
}

.enc-string--l { left:  22%; }
.enc-string--r { right: 22%; }

/* ── The ball ─────────────────────────────────────────── */
.enc-ball {
    position: relative;
    width:  var(--enc-ball-size, 110px);
    height: var(--enc-ball-size, 110px);
    border-radius: 50%;
    margin-top: var(--enc-string-len, 160px);
    overflow: hidden;
    border: var(--enc-ball-bwidth, 3px) solid var(--enc-ball-border, #c0a060);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.6),
        inset 0 -6px 18px rgba(0,0,0,0.4),
        inset 0 4px 12px rgba(255,255,255,0.15);
    transition: box-shadow 0.2s;
    flex-shrink: 0;
}

.enc-pendulum.is-swinging .enc-ball {
    box-shadow:
        0 8px 32px rgba(0,0,0,0.6),
        0 0 28px var(--enc-glow, transparent),
        inset 0 -6px 18px rgba(0,0,0,0.4),
        inset 0 4px 12px rgba(255,255,255,0.15);
}

.enc-ball__inner {
    width: 100%; height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.enc-ball__inner img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    pointer-events: none;
}

/* Shine overlay */
.enc-ball__shine {
    position: absolute;
    top: 6%; left: 12%;
    width: 35%; height: 35%;
    background: radial-gradient(circle at 40% 40%,
        rgba(255,255,255,0.55) 0%,
        rgba(255,255,255,0.0)  70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Reflection band at bottom */
.enc-ball__reflection {
    position: absolute;
    bottom: 8%; left: 10%; right: 10%;
    height: 12%;
    background: rgba(255,255,255,0.10);
    border-radius: 50%;
    pointer-events: none;
}

/* ── Floor shadow ─────────────────────────────────────── */
.enc-shadow {
    width: 70%;
    height: 10px;
    background: rgba(0,0,0,0.45);
    border-radius: 50%;
    filter: blur(5px);
    margin-top: 8px;
    transform: scaleX(1);
    transform-origin: center;
    pointer-events: none;
    transition: transform 0.1s, opacity 0.1s;
}

/* ── Click hint ───────────────────────────────────────── */
.enc-hint {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.45);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    pointer-events: none;
    transition: opacity 0.5s;
    white-space: nowrap;
}

.enc-hint__arrow--left  { animation: enc-nudge-l 1.6s ease-in-out infinite; }
.enc-hint__arrow--right { animation: enc-nudge-r 1.6s ease-in-out infinite; }

@keyframes enc-nudge-l {
    0%,100% { transform: translateX(0); }
    50%     { transform: translateX(-5px); }
}
@keyframes enc-nudge-r {
    0%,100% { transform: translateX(0); }
    50%     { transform: translateX(5px); }
}

.enc-wrapper.is-active .enc-hint {
    opacity: 0;
}

/* ── Hover highlight ──────────────────────────────────── */
.enc-pendulum:hover .enc-ball {
    filter: brightness(1.12);
}

/* ── Lightbox ─────────────────────────────────────────── */
.enc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.88);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.enc-lightbox.is-open {
    opacity: 1;
    pointer-events: all;
}

.enc-lightbox__content {
    position: relative;
    max-width: 90vw; max-height: 88vh;
    transform: scale(0.82);
    transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex; flex-direction: column;
    align-items: center; gap: 18px;
}

.enc-lightbox.is-open .enc-lightbox__content {
    transform: scale(1);
}

.enc-lightbox__img {
    display: block;
    max-width: 100%; max-height: 70vh;
    object-fit: contain;
    border-radius: 50%;   /* round like a ball! */
    box-shadow: 0 24px 80px rgba(0,0,0,0.85),
                0 0 60px rgba(255,200,80,0.15);
    border: 3px solid rgba(200,160,80,0.5);
}

.enc-lightbox__caption { color: #fff; text-align: center; }

.enc-lightbox__title {
    font-size: 1.4rem; font-weight: 700;
    margin: 0 0 8px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.7);
}

.enc-lightbox__desc {
    font-size: 0.95rem; opacity: 0.72; margin: 0 0 10px;
}

.enc-lightbox__link {
    display: inline-block;
    color: #ffcc55;
    text-decoration: none;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255,204,85,0.4);
    padding-bottom: 2px;
    transition: color 0.2s;
}
.enc-lightbox__link:hover { color: #ffe080; }
.enc-lightbox__link[href="#"],
.enc-lightbox__link[href=""] { display: none; }

.enc-lightbox__close {
    position: absolute;
    top: -52px; right: 0;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.2);
    color: #fff; font-size: 1.2rem;
    width: 38px; height: 38px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.2s;
    line-height: 1;
}
.enc-lightbox__close:hover { background: rgba(255,255,255,0.24); }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 768px) {
    .enc-wrapper {
        --enc-ball-size:  72px;
        --enc-string-len: 110px;
    }
    .enc-frame__top,
    .enc-cradle,
    .enc-frame__legs { width: 96%; }
}

@media (max-width: 480px) {
    .enc-wrapper {
        --enc-ball-size:  54px;
        --enc-string-len: 90px;
    }
    .enc-hint { display: none; }
}