/* =====================================================
   Elementor Bouncing Ball Gallery — Main Stylesheet
   ===================================================== */

/* Container */
.ebbg-container {
    position: relative;
    width: 100%;
    user-select: none;
    -webkit-user-select: none;
}

/* =====================================================
   Playground / Scene
   ===================================================== */
.ebbg-playground {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
    border: 2px solid #444;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.2), 0 4px 24px rgba(0,0,0,0.18);
    transition: border-color 0.3s;
}

.ebbg-playground-inner {
    position: absolute;
    inset: 0;
}

/* =====================================================
   Background Styles
   ===================================================== */

/* Playground Floor */
.ebbg-bg-playground {
    background-color: #e8e0d0;
    background-image:
        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 40px,
            rgba(0,0,0,0.04) 40px,
            rgba(0,0,0,0.04) 41px
        ),
        repeating-linear-gradient(
            90deg,
            transparent,
            transparent 40px,
            rgba(0,0,0,0.04) 40px,
            rgba(0,0,0,0.04) 41px
        );
}

/* Wood Table */
.ebbg-bg-wood {
    background-color: #8B6914;
    background-image:
        repeating-linear-gradient(
            105deg,
            transparent,
            transparent 12px,
            rgba(255,255,255,0.03) 12px,
            rgba(255,255,255,0.03) 13px
        ),
        repeating-linear-gradient(
            95deg,
            transparent,
            transparent 20px,
            rgba(0,0,0,0.06) 20px,
            rgba(0,0,0,0.06) 21px
        );
    background-blend-mode: overlay;
}

/* Fabric / Cloth */
.ebbg-bg-fabric {
    background-color: #2c3e50;
    background-image:
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,0.03) 0px,
            rgba(255,255,255,0.03) 1px,
            transparent 1px,
            transparent 8px
        ),
        repeating-linear-gradient(
            -45deg,
            rgba(255,255,255,0.03) 0px,
            rgba(255,255,255,0.03) 1px,
            transparent 1px,
            transparent 8px
        );
}

/* Solid */
.ebbg-bg-solid {
    background-color: #1a1a2e;
}

/* Custom — color set via inline style / Elementor selector */
.ebbg-bg-custom {
    background-color: #1a1a2e;
}

/* =====================================================
   Balls
   ===================================================== */
.ebbg-ball {
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    cursor: pointer;
    will-change: transform;
    transform-origin: center center;
    z-index: 10;
}

.ebbg-ball-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,0.4);
    box-shadow:
        0 8px 32px rgba(0,0,0,0.35),
        0 2px 8px rgba(0,0,0,0.25),
        inset 0 -4px 12px rgba(0,0,0,0.2);
    transition: box-shadow 0.15s;
}

.ebbg-ball:hover .ebbg-ball-inner {
    box-shadow:
        0 12px 40px rgba(0,0,0,0.45),
        0 4px 12px rgba(0,0,0,0.3),
        inset 0 -4px 12px rgba(0,0,0,0.2);
}

/* Ball image fill */
.ebbg-ball-image {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 3D gloss overlay — top-left highlight */
.ebbg-ball-gloss {
    position: absolute;
    top: 6%;
    left: 10%;
    width: 40%;
    height: 35%;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: radial-gradient(
        ellipse at 40% 35%,
        rgba(255,255,255,0.75) 0%,
        rgba(255,255,255,0.2) 45%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 2;
}

/* Secondary bottom reflection */
.ebbg-ball-reflection {
    position: absolute;
    bottom: 8%;
    right: 12%;
    width: 28%;
    height: 18%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse,
        rgba(255,255,255,0.18) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 2;
}

/* =====================================================
   Ball Animations
   ===================================================== */
/* ── Squash: applied to .ebbg-ball-inner so JS transform on wrapper is untouched ── */
@keyframes ebbg-squash {
    0%   { transform: scale(1, 1); }
    15%  { transform: scale(1.35, 0.7); }
    35%  { transform: scale(0.85, 1.2); }
    55%  { transform: scale(1.1, 0.92); }
    75%  { transform: scale(0.97, 1.05); }
    100% { transform: scale(1, 1); }
}

/* Squash is on the INNER element – the outer wrapper's transform is JS-only */
.ebbg-ball.ebbg-squash .ebbg-ball-inner {
    animation: ebbg-squash 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Pop-in: also on .ebbg-ball-inner so JS translate on .ebbg-ball is never blocked ── */
@keyframes ebbg-pop-in {
    0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
    60%  { transform: scale(1.08) rotate(4deg); opacity: 1; }
    80%  { transform: scale(0.96) rotate(-2deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* .ebbg-ball itself: NO animation – JS owns its transform entirely */
.ebbg-ball-inner {
    animation: ebbg-pop-in 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.ebbg-ball:nth-child(1)  .ebbg-ball-inner { animation-delay: 0.0s; }
.ebbg-ball:nth-child(2)  .ebbg-ball-inner { animation-delay: 0.07s; }
.ebbg-ball:nth-child(3)  .ebbg-ball-inner { animation-delay: 0.14s; }
.ebbg-ball:nth-child(4)  .ebbg-ball-inner { animation-delay: 0.21s; }
.ebbg-ball:nth-child(5)  .ebbg-ball-inner { animation-delay: 0.28s; }
.ebbg-ball:nth-child(6)  .ebbg-ball-inner { animation-delay: 0.35s; }
.ebbg-ball:nth-child(7)  .ebbg-ball-inner { animation-delay: 0.42s; }
.ebbg-ball:nth-child(8)  .ebbg-ball-inner { animation-delay: 0.49s; }
.ebbg-ball:nth-child(9)  .ebbg-ball-inner { animation-delay: 0.56s; }
.ebbg-ball:nth-child(10) .ebbg-ball-inner { animation-delay: 0.63s; }

/* =====================================================
   Lightbox
   ===================================================== */
.ebbg-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ebbg-lightbox-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    cursor: pointer;
}

.ebbg-lightbox-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
    transform: scale(0.6) translateY(40px);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1), opacity 0.28s ease;
}

.ebbg-lightbox-content.ebbg-lightbox-open {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.ebbg-lightbox-img {
    max-width: 85vw;
    max-height: 75vh;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 4px 20px rgba(0,0,0,0.4);
    display: block;
}

.ebbg-lightbox-caption {
    margin-top: 16px;
    color: #fff;
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-align: center;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
    max-width: 600px;
}

.ebbg-lightbox-description {
    margin-top: 6px;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    text-align: center;
    max-width: 600px;
}

.ebbg-lightbox-close {
    position: absolute;
    top: -44px;
    right: -12px;
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    backdrop-filter: blur(4px);
}

.ebbg-lightbox-close:hover {
    background: rgba(255,255,255,0.28);
    transform: scale(1.1) rotate(90deg);
}

/* Lightbox nav arrows */
.ebbg-lightbox-prev,
.ebbg-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, transform 0.2s;
    z-index: 3;
}

.ebbg-lightbox-prev { left: -68px; }
.ebbg-lightbox-next { right: -68px; }

.ebbg-lightbox-prev:hover,
.ebbg-lightbox-next:hover {
    background: rgba(255,255,255,0.25);
    transform: translateY(-50%) scale(1.08);
}

/* =====================================================
   Control Bar (Magnet / Wind / Cluster buttons)
   ===================================================== */
.ebbg-controls {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ebbg-ctrl-btn {
    background: rgba(0, 0, 0, 0.42);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 20px;
    padding: 5px 13px;
    font-size: 12px;
    cursor: pointer;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    transition: background 0.2s, transform 0.25s, box-shadow 0.2s;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    user-select: none;
    line-height: 1.4;
    white-space: nowrap;
}

.ebbg-ctrl-btn:hover {
    background: rgba(0, 0, 0, 0.65);
}

/* Active state — glowing accent */
.ebbg-ctrl-btn.ebbg-ctrl-active {
    background: rgba(80, 160, 255, 0.35);
    border-color: rgba(100, 180, 255, 0.55);
    box-shadow: 0 0 10px rgba(80, 160, 255, 0.4);
}

.ebbg-magnet-btn.ebbg-ctrl-active {
    background: rgba(255, 100, 160, 0.35);
    border-color: rgba(255, 130, 180, 0.55);
    box-shadow: 0 0 10px rgba(255, 100, 160, 0.4);
}

.ebbg-wind-btn {
    /* The button itself never rotates */
}

/* Only the arrow indicator span inside the button rotates */
.ebbg-wind-arrow {
    display: inline-block;
    font-size: 10px;
    margin-left: 3px;
    vertical-align: middle;
    line-height: 1;
}

.ebbg-attract-btn.ebbg-ctrl-active {
    background: rgba(120, 255, 180, 0.3);
    border-color: rgba(150, 255, 200, 0.5);
    box-shadow: 0 0 10px rgba(120, 255, 180, 0.35);
}

/* ── Throw flash ─────────────────────────────────────── */
@keyframes ebbg-throw-flash {
    0%   { box-shadow: 0 0 0 0 rgba(255, 220, 50, 0.8); }
    60%  { box-shadow: 0 0 0 18px rgba(255, 220, 50, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 220, 50, 0); }
}

.ebbg-ball.ebbg-thrown .ebbg-ball-inner {
    animation: ebbg-throw-flash 0.4s ease-out;
}

/* =====================================================
   Gyroscope Permission Button
   ===================================================== */
.ebbg-gyro-btn {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 20;
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 12px;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}

.ebbg-gyro-btn:hover {
    background: rgba(0,0,0,0.65);
}

/* =====================================================
   Responsive
   ===================================================== */
@media (max-width: 768px) {
    .ebbg-lightbox-prev { left: -52px; }
    .ebbg-lightbox-next { right: -52px; }

    .ebbg-lightbox-img {
        max-width: 92vw;
        max-height: 70vh;
    }
}

@media (max-width: 480px) {
    .ebbg-lightbox-prev,
    .ebbg-lightbox-next {
        display: none;
    }
}

/* =====================================================
   v1.4 NEW FEATURES
   ===================================================== */

/* ── Overlay Canvas ─────────────────────────────────── */
.ebbg-overlay-canvas {
    position: absolute;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 5;
}

/* ── Black Hole ─────────────────────────────────────── */
.ebbg-black-hole {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #000 40%, #1a0030 65%, transparent 100%);
    box-shadow:
        0 0 0 3px rgba(120,0,255,0.4),
        0 0 20px 6px rgba(80,0,180,0.5),
        0 0 50px 15px rgba(40,0,120,0.3);
    z-index: 30;
    pointer-events: none;
    animation: ebbg-bh-spin 3s linear infinite;
}

@keyframes ebbg-bh-spin {
    from { box-shadow: 0 0 0 3px rgba(120,0,255,0.4), 0 0 20px 8px rgba(80,0,180,0.5), 0 0 50px 16px rgba(40,0,120,0.3); }
    50%  { box-shadow: 0 0 0 5px rgba(180,0,255,0.6), 0 0 30px 12px rgba(120,0,220,0.6), 0 0 70px 20px rgba(60,0,160,0.4); }
    to   { box-shadow: 0 0 0 3px rgba(120,0,255,0.4), 0 0 20px 8px rgba(80,0,180,0.5), 0 0 50px 16px rgba(40,0,120,0.3); }
}

.ebbg-black-hole.ebbg-bh-eating {
    animation: ebbg-bh-eat 0.3s ease infinite alternate;
}

@keyframes ebbg-bh-eat {
    from { transform: translate(-50%,-50%) scale(1); }
    to   { transform: translate(-50%,-50%) scale(1.3); }
}

@keyframes ebbg-bh-explode-anim {
    0%   { transform: translate(-50%,-50%) scale(1);   opacity: 1; }
    30%  { transform: translate(-50%,-50%) scale(3.5); opacity: 0.8; }
    60%  { transform: translate(-50%,-50%) scale(6);   opacity: 0.4; }
    100% { transform: translate(-50%,-50%) scale(10);  opacity: 0; }
}

.ebbg-black-hole.ebbg-bh-explode {
    animation: ebbg-bh-explode-anim 0.6s cubic-bezier(0.2,0.8,0.4,1) forwards !important;
    background: radial-gradient(circle, #fff 10%, #ffcc00 40%, #ff4400 70%, transparent 100%);
    box-shadow: 0 0 80px 40px rgba(255,150,0,0.6);
}

/* ── Portal Flash ───────────────────────────────────── */
@keyframes ebbg-portal-flash-anim {
    0%   { transform: translate(-50%,-50%) scale(0.3); opacity: 1; }
    100% { transform: translate(-50%,-50%) scale(2.5); opacity: 0; }
}

.ebbg-portal-flash {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid rgba(100,180,255,0.9);
    pointer-events: none;
    z-index: 40;
    animation: ebbg-portal-flash-anim 0.5s ease-out forwards;
}

/* ── Cannon Ball ────────────────────────────────────── */
.ebbg-cannon-ball .ebbg-ball-inner {
    animation: none !important;
    border: 2px solid rgba(255,255,255,0.5);
}

/* ── Tilt Bar ───────────────────────────────────────── */
.ebbg-tilt-bar {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 20;
    display: flex;
    gap: 4px;
}

.ebbg-tilt-btn {
    background: rgba(0,0,0,0.45);
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    width: 34px;
    height: 34px;
    font-size: 14px;
    cursor: pointer;
    backdrop-filter: blur(5px);
    transition: background 0.15s, transform 0.1s;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
}

.ebbg-tilt-btn:hover    { background: rgba(255,255,255,0.18); }
.ebbg-tilt-btn:active   { transform: scale(0.92); }
.ebbg-tilt-center       { font-size: 10px; width: 28px; background: rgba(0,0,0,0.3); }

/* ── Cannon active cursor hint ──────────────────────── */
.ebbg-playground.ebbg-cannon-mode {
    cursor: crosshair;
}