/* ==========================================================
   GHAYA BUILDER V2 VIEWER
   ========================================================== */

.ghaya-v2-stage {
    position: relative !important;
    overflow: hidden;
    isolation: isolate;
}

/*
 * The original preview remains available
 * to builder.js but is hidden from customers.
 */
.ghaya-v2-original-layer {
    visibility: hidden !important;
  /*  pointer-events: none !important;*/
}

/*
 * New independent preview surface.
 */
.ghaya-v2-viewer-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: auto;
    touch-action: none;
    z-index: 5;
}

.ghaya-v2-object {
    position: absolute;
    display: block;
    object-fit: contain;
    object-position: center;
    border: 0;
    background: transparent;
    user-select: none;
  /*  pointer-events: none;*/
    transform-origin: center;
    will-change: left, top, width, height, transform, opacity, filter;
    transition: left 380ms cubic-bezier(.22, 1, .36, 1), top 380ms cubic-bezier(.22, 1, .36, 1), width 380ms cubic-bezier(.22, 1, .36, 1), height 380ms cubic-bezier(.22, 1, .36, 1), opacity 220ms ease, filter 260ms ease;
}

    /* Chain entrance */

    .ghaya-v2-object.ghaya-v2-chain-enter {
        animation: ghayaV2ChainEnter 680ms cubic-bezier(.22, 1, .36, 1) both;
    }

    /* Lock entrance */

    .ghaya-v2-object.ghaya-v2-lock-enter {
        animation: ghayaV2LockEnter 580ms cubic-bezier(.34, 1.56, .64, 1) both;
    }

    /* Charm entrance */

    .ghaya-v2-object.ghaya-v2-charm-enter {
        animation: ghayaV2CharmEnter 620ms cubic-bezier(.34, 1.56, .64, 1) both;
    }

    /* Object removal */

    .ghaya-v2-object.ghaya-v2-leaving {
        animation: ghayaV2Leave 220ms ease both !important;
    }

@keyframes ghayaV2ChainEnter {
    0% {
        opacity: 0;
        filter: blur(6px);
        transform: scale(.88);
    }

    55% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1.025);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: scale(1);
    }
}

@keyframes ghayaV2LockEnter {
    0% {
        opacity: 0;
        filter: blur(4px);
        transform: translate(-50%, -68%) scale(.48) rotate(-8deg);
    }

    68% {
        opacity: 1;
        filter: blur(0);
        transform: translate(-50%, -47%) scale(1.1) rotate(3deg);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}

@keyframes ghayaV2CharmEnter {
    0% {
        opacity: 0;
        filter: blur(4px);
        transform: translate(-50%, -88%) scale(.4) rotate(-12deg);
    }

    62% {
        opacity: 1;
        filter: blur(0);
        transform: translate(-50%, -45%) scale(1.14) rotate(4deg);
    }

    82% {
        transform: translate(-50%, -54%) scale(.97) rotate(-2deg);
    }

    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
}

@keyframes ghayaV2Leave {
    from {
        opacity: 1;
        filter: blur(0);
    }

    to {
        opacity: 0;
        filter: blur(5px);
    }
}



/* Only charms are draggable. Chain and lock remain fixed. */
.ghaya-v2-object[data-object-type="charm"] {
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    -webkit-user-drag: none;
}

    .ghaya-v2-object[data-object-type="charm"]:active,
    .ghaya-v2-object[data-object-type="charm"].ghaya-v2-dragging {
        cursor: grabbing;
    }

.ghaya-v2-object.ghaya-v2-dragging {
    animation: none !important;
    transition: none !important;
    filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .18));
    z-index: 999 !important;
}

.ghaya-v2-stage.ghaya-v2-is-dragging {
    cursor: grabbing;
}

    .ghaya-v2-stage.ghaya-v2-is-dragging,
    .ghaya-v2-stage.ghaya-v2-is-dragging * {
        user-select: none !important;
    }

@media (prefers-reduced-motion: reduce) {
    .ghaya-v2-object {
        animation: none !important;
        transition: none !important;
    }
}
/* ==========================================================
   MAGNETIC CHARM RELEASE
   ========================================================== */

.ghaya-v2-object[data-object-type="charm"] {
    will-change: left, top, transform;
}

    .ghaya-v2-object[data-object-type="charm"].ghaya-v2-snapping {
        transition: left 380ms cubic-bezier(0.22, 1, 0.36, 1), top 380ms cubic-bezier(0.22, 1, 0.36, 1), transform 380ms cubic-bezier(0.22, 1, 0.36, 1), filter 250ms ease;
    }

    .ghaya-v2-object[data-object-type="charm"].ghaya-v2-dragging {
        transition: none !important;
        transform: translate(-50%, -50%) rotate(2deg) scale(1.07) !important;
        filter: drop-shadow( 0 12px 14px rgba(0, 0, 0, 0.24) );
        z-index: 100 !important;
    }

.ghaya-v2-is-dragging {
    cursor: grabbing;
}

/* ==========================================================
   CHARM SWING
   ========================================================== */

.ghaya-v2-object[data-object-type="charm"].ghaya-v2-swinging {
    transform-origin: 50% 8%;
    animation: ghayaCharmSwing 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes ghayaCharmSwing {
    0% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }

    18% {
        transform: translate(-50%, -50%) rotate(8deg) scale(1.015);
    }

    38% {
        transform: translate(-50%, -50%) rotate(-6deg) scale(1.01);
    }

    58% {
        transform: translate(-50%, -50%) rotate(3.5deg) scale(1.005);
    }

    76% {
        transform: translate(-50%, -50%) rotate(-1.8deg) scale(1);
    }

    90% {
        transform: translate(-50%, -50%) rotate(0.8deg) scale(1);
    }

    100% {
        transform: translate(-50%, -50%) rotate(0deg) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .ghaya-v2-object[data-object-type="charm"].ghaya-v2-swinging {
        animation: none;
    }
}

/* ==========================================================
   CHARM COLLISION SETTLING
   ========================================================== */

.ghaya-v2-object[data-object-type="charm"].ghaya-v2-collision-settle {
    transition: left 360ms cubic-bezier(0.22, 1, 0.36, 1), top 360ms cubic-bezier(0.22, 1, 0.36, 1), transform 300ms cubic-bezier(0.22, 1, 0.36, 1), filter 250ms ease;
}

    .ghaya-v2-object[data-object-type="charm"].ghaya-v2-collision-settle:not(.ghaya-v2-dragging) {
        filter: drop-shadow( 0 8px 10px rgba(0, 0, 0, 0.16) );
    }

/* Keep the fixed jewelry layers under control */

.ghaya-v2-object[data-object-type="chain"] {
    max-width: 84%;
    max-height: 68%;
    object-fit: contain;
}

.ghaya-v2-object[data-object-type="lock"] {
    max-width: 108px;
    max-height: 108px;
    object-fit: contain;
}

.ghaya-v2-object[data-object-type="charm"] {
    object-fit: contain;
}

.ghaya-v2-object-unavailable {
    opacity: 0.48;
    filter: grayscale(1);
   /* pointer-events: none;*/
}

/* All builder objects can be selected and moved */
.ghaya-v2-viewer-layer .ghaya-v2-object {
    pointer-events: auto !important;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-drag: none;
}

    .ghaya-v2-viewer-layer .ghaya-v2-object:active,
    .ghaya-v2-viewer-layer .ghaya-v2-object.ghaya-v2-dragging {
        cursor: grabbing;
    }


.ghaya-v2-viewer-layer {
    pointer-events: auto;
}


.ghaya-v2-selected {
    outline: 2px solid #c8a24d;
    outline-offset: 4px;
    border-radius: 10px;
}



.ghaya-v2-object-tools {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
}

.ghaya-v2-tool-button {
    width: 42px;
    height: 42px;
    border: 1px solid #d4af37;
    border-radius: 50%;
    background: #ffffff;
    color: #17314f;
    font-size: 23px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

    .ghaya-v2-tool-button:hover {
        transform: translateY(-2px);
        background: #f7f1df;
    }