/* CCG Product Inspector - Frontend Styles v7.0 */
/* Final polish for a truly impressive, high-end aesthetic. */

:root {
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
}

@keyframes pulse-glow {
    0%, 100% {
        filter: drop-shadow(0 0 6px #FFD700);
    }
    50% {
        filter: drop-shadow(0 0 12px #FFD700);
    }
}

/* This keyframe CONTROLS THE LENGTH of the arc */
@keyframes hotspot-loader-morph {
    0% {
        stroke-dasharray: 5, 39; /* Short arc */
    }
    50% {
        stroke-dasharray: 30, 14; /* Long arc */
    }
    100% {
        stroke-dasharray: 5, 39; /* Short arc */
    }
}

/* This keyframe CONTROLS THE MOVEMENT of the arc */
@keyframes hotspot-loader-move {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: -44; /* One full, perfect circle */
    }
}

/* --- Main Inspector Container --- */
.ccg-inspector {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Push stage to top, palette to bottom */
    align-items: center;
    
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.6s var(--ease-in-out-circ), visibility 0.6s;
}

/* --- The Stage (for Cinematic Reveal) --- */
.ccg-inspector__stage {
    position: relative; /* Change to relative to constrain the image */
    width: 100%;
    height: auto; /* Let height be determined by content and max-height */
    max-width: 80vw; /* Max 80% of viewport width */
    max-height: 65vh; /* Adjust max height to account for palette */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 40%; /* Add space from the top, accounts for close button */
    
    clip-path: circle(0% at 50% 50%); /* Start as a closed circle */
    transition: clip-path 1.2s var(--ease-in-out-circ);
}

.ccg-inspector__image-wrapper {
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0px 13px 13px -10px rgba(0,0,0,0.2);
}

.ccg-inspector__stage img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1); /* Start at normal size */
    animation: reveal-zoom 1.5s var(--ease-out-expo) forwards; /* Run once and hold the final state */
}

@keyframes reveal-zoom {
    from {
        transform: scale(1.1);
        opacity: 0.8;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

body.ccg-inspector--active .ccg-inspector__stage {
    clip-path: circle(75% at 50% 50%); /* Open the circle to reveal the image */
}

/* --- Overlay --- */
.ccg-inspector__overlay {

    background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23e9e9e9" fill-opacity="0.4"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
    background-color: #f8f8f8;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

/* --- Palette / Control Panel --- */
.ccg-inspector__palette {
        position: absolute;
    background-image: repeating-linear-gradient(        -45deg,        #ff161600,        #3af0 0.5px,        rgb(0 0 0 / 19%) 1px,        rgb(255 241 176 / 63%) 2px    );
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    width: 100%;
    max-width: 90%;
    padding: 30px;
    margin-bottom: 5vh;
    /* background: rgba(22, 22, 22, 0.7); */
    border: 1px solid #adadad;
    border-radius: 18px;
    box-shadow: 5px 5px 4px rgba(0,0,0,0.5);
    opacity: 0;
    transform: translate(-50%, 60px);
    transition: all 0.7s var(--ease-out-expo) 0.4s;
}

body.ccg-inspector--active .ccg-inspector__palette {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* --- Close Button --- */
.ccg-inspector__close {
    position: absolute;
    top: 40px;
    right: 40px;
    z-index: 2;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    /* background: rgba(22, 22, 22, 0.7); */
    color: rgb(0 0 0 / 90%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-40px) scale(0.9);
    transition: all 0.7s var(--ease-out-expo) 0.2s;
}

.ccg-inspector__close:hover {
    background: #fff;
    color: #000;
    transform: scale(1.1) rotate(270deg) !important; /* Add !important to ensure override */
}

/* --- Swatch Styling within the Palette --- */
.ccg-inspector__palette .leather-item {
    cursor: pointer;
    transition: all 0.5s var(--ease-out-expo);
    opacity: 0.6;
    will-change: transform, opacity, box-shadow;
    border-radius: 50%;
}

.ccg-inspector__palette .leather-item:hover {
    opacity: 1;
    transform: scale(1.15);
}

.ccg-inspector__palette .leather-item.is-selected {
    opacity: 1;
    transform: scale(1.25);
    /* The box-shadow is now handled by the separate #ccg-glow-orb element */
}

/* --- Glow Orb for Selected Swatch --- */
#ccg-glow-orb {
    position: absolute;
    width: 62.5px;
    height: 62.5px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    transition: opacity 0.4s ease, top 0.25s ease, left 0.25s ease;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 1), /* Sharp, bright inner ring */        0 0 25px 10px #FFFEF5,                /* Soft, immediate glow */        0 0 4px 5px rgba(0, 0, 0, 1);
}

/* --- Active State --- */
body.ccg-inspector--active {
    overflow: hidden; /* Prevent scrolling when inspector is open */
}

body.ccg-inspector--active .ccg-inspector {
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

/* body.ccg-inspector--active .ccg-inspector__palette {
    transform: translateY(0);
}
*/

body.ccg-inspector--active .ccg-inspector__close {
    transform: translateY(0) scale(1);
}

/* Animated 'X' Icon */
.ccg-inspector__close .icon-line {
    position: absolute;
    width: 26px;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
    transition: transform 0.6s var(--ease-out-expo);
}

.ccg-inspector__close .icon-line:nth-child(1) {
    transform: rotate(0deg);
}

.ccg-inspector__close .icon-line:nth-child(2) {
    transform: rotate(90deg);
}

body.ccg-inspector--active .ccg-inspector__close .icon-line:nth-child(1) {
    transform: rotate(45deg);
}

body.ccg-inspector--active .ccg-inspector__close .icon-line:nth-child(2) {
    transform: rotate(-45deg);
}

/* --- Dynamic Labyrinth Styles --- */

.ccg-inspector__labyrinth-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
}

/* Base styles for both paths */
.labyrinth-path-base,
.labyrinth-path-flow {
    fill: none;
    animation: draw-line 1.2s var(--ease-in-out-circ) forwards;
}

/* The underlying, stable, glowing line */
.labyrinth-path-base {
    stroke: #EAC435; /* A rich, vibrant gold */
    stroke-width: 3.5;
    filter: drop-shadow(0 0 4px #EAC435);
}

/* The flowing energy highlight on top */
.labyrinth-path-flow {
    stroke-width: 4.5;
    /* The stroke is the animated gradient from the JS */
}

/* Find this rule */
.labyrinth-endpoint {
    fill: #FFD700;
    stroke: #fff; /* The color of our loader arc */
    stroke-width: 2; /* Making the loader slightly thicker and more visible */
    stroke-linecap: round; /* This makes the ends of the arc rounded, like Google's */

    filter: drop-shadow(0 0 6px #FFD700);
    transform-origin: center center;
    opacity: 0;
    
    animation: 
        fade-in-circle 0.5s var(--ease-out-expo) forwards 1s, 
        pulse-glow 2.5s infinite 1.5s;

}



@keyframes draw-line {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes fade-in-circle {
    to {
        opacity: 1;
        transform: scale(1);
    }
}