/* Comprehensive Panel Smooth Animations */

/* Comprehensive panel overlay - renders on top of defrag */
#comprehensive-panel {
    position: fixed;
    z-index: 100;
    pointer-events: none;
    opacity: 0;
}

#comprehensive-panel.visible {
    pointer-events: auto;
    opacity: 1;
}

/* P-span panel - liquid flow from left */
#pspan-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(75, 0, 130, 0.2);
    overflow: hidden;
}

#pspan-container.animating {
    animation: liquid-flow-pspan 0.8729s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes liquid-flow-pspan {
    0% {
        clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
        opacity: 1;
    }
    25% {
        clip-path: polygon(0% 0%, 20% 5%, 20% 95%, 0% 100%);
    }
    50% {
        clip-path: polygon(0% 0%, 60% 10%, 60% 90%, 0% 100%);
    }
    75% {
        clip-path: polygon(0% 0%, 90% 3%, 90% 97%, 0% 100%);
    }
    100% {
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
        opacity: 1;
    }
}

/* Comprehensive trials panel - particle coalesce from left */
#comprehensive-trials-container {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 50%;
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(75, 0, 130, 0.2);
    opacity: 0;
    visibility: hidden;
}

#comprehensive-trials-container.animating {
    animation: shimmer-comprehensive 0.8729s ease-out forwards;
}

@keyframes shimmer-comprehensive {
    0% {
        filter: blur(20px) brightness(0.5);
        opacity: 0;
        transform: translateX(-50px);
    }
    50% {
        filter: blur(10px) brightness(1.2);
        opacity: 0.7;
        transform: translateX(0);
    }
    100% {
        filter: blur(0px) brightness(1);
        opacity: 1;
        transform: translateX(0);
    }
}

/* Staggered subcomponent reveals - cascade effect */
.comp-subpart-1 {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: 0s;
}

.comp-subpart-2 {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: 0.15s;
}

.comp-subpart-3 {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: 0.3s;
}

.comp-subpart-4 {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: 0.45s;
}

.comp-subpart-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Graph container for right-to-left reveal */
.graph-revealing {
    position: relative;
    overflow: hidden;
}

.graph-revealing::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to left,
        rgba(250, 240, 230, 1) 0%,
        rgba(250, 240, 230, 0.7) 5%,
        rgba(250, 240, 230, 0) 15%
    );
    pointer-events: none;
    z-index: 10;
    animation: graph-reveal 1.2s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes graph-reveal {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Feathered alpha leading edge for graph reveal */
.graph-mask-container {
    position: relative;
}

.graph-feathered-mask {
    clip-path: inset(0 100% 0 0);
    animation: reveal-right-to-left 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes reveal-right-to-left {
    0% {
        clip-path: inset(0 100% 0 0);
    }
    100% {
        clip-path: inset(0 0% 0 0);
    }
}

/* SVG filter for feathered edge */
.svg-feather-filter {
    filter: url(#feather-edge);
}

/* Background color matching for smooth integration */
#comprehensive-panel {
    background-color: #FAF0E6; /* Match page background */
}

/* Subtle depth during animation */
.comprehensive-panel-entering {
    box-shadow: 0 4px 20px rgba(75, 0, 130, 0);
    transition: box-shadow 0.85s cubic-bezier(0.23, 1, 0.32, 1);
}

.comprehensive-panel-entered {
    box-shadow: 0 4px 20px rgba(75, 0, 130, 0.08);
}

/* Smooth graph appearance - fade plotly elements */
.plotly-graph-entering .js-plotly-plot {
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.plotly-graph-entered .js-plotly-plot {
    opacity: 1;
}