/* Experimental client-side interpolation toggle on the Feature Heatmap page. */

.fh-experimental-toggle-container {
    display: none; /* toggled via callback when precomputed is active */
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #f59e0b;
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    margin: 8px 0;
    width: fit-content;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.fh-experimental-toggle-container.visible {
    display: flex;
}

.fh-experimental-toggle-label {
    font-size: 14px;
    font-weight: 600;
    color: #78350f;
    user-select: none;
}

.fh-experimental-toggle-caption {
    font-size: 12px;
    color: #92400e;
    font-style: italic;
    user-select: none;
}

.fh-experimental-heatmap-card {
    padding: 8px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-bottom: 16px;
}

/* --- Loading shimmer, shared by both heatmap paths. ---------------------
   Despite the file it lives in, `.fh-experimental-shimmer` is also used by
   the CLASSIC card while its 3D view downloads its point cloud. Any element
   carrying it needs a `position: relative` ancestor sized to the graph.
   ------------------------------------------------------------------------
   Sits absolutely on top of the empty placeholder Graph and animates a
   diagonal light sweep across a muted gray backdrop (the same technique
   Instagram / YouTube use for thumbnail placeholders). A pattern-matched
   clientside callback flips its `display` to `none` the moment the real
   interpolated trace is written into the figure.
--------------------------------------------------------------------------*/
.fh-experimental-graph-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.fh-experimental-shimmer {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    overflow: hidden;
    pointer-events: none;
    background-color: #eef1f4;
    background-image: linear-gradient(
        100deg,
        rgba(238, 241, 244, 0) 0%,
        rgba(238, 241, 244, 0) 40%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(238, 241, 244, 0) 60%,
        rgba(238, 241, 244, 0) 100%
    );
    background-size: 220% 100%;
    background-repeat: no-repeat;
    animation: fh-experimental-shimmer-sweep 1.4s linear infinite;
    z-index: 5;
}

@keyframes fh-experimental-shimmer-sweep {
    0%   { background-position: 150% 0; }
    100% { background-position: -50% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .fh-experimental-shimmer {
        animation: none;
        background: #eef1f4;
    }
}