/* Accordion Animation */
details > summary {
    list-style: none;
}

    details > summary::-webkit-details-marker {
        display: none;
    }

details[open] summary ~ * {
    animation: sweep .3s ease-in-out;
}

@keyframes sweep {
    0% {
        opacity: 0;
        transform: translateY(-10px)
    }

    100% {
        opacity: 1;
        transform: translateY(0)
    }
}

/* Tooltip for Heatmap */
.heatmap-cell {
    position: relative;
}

    .heatmap-cell:hover .heatmap-tooltip {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
    }

.heatmap-tooltip {
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.2s ease;
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    width: 200px;
    z-index: 50;
}

    .heatmap-tooltip::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #333 transparent transparent transparent;
    }

/* Radar Chart Animation */
.radar-poly {
    animation: dash 2s ease-out forwards;
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
}

@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

/* Background Pattern for CTA */
.bg-math-pattern {
    background-color: #1E377E;
    background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2H0v-2h20v-2H0V8h20V6H0V4h20V2H0V0h22v20h2V0h2v20h2V0h2v20h2V0h2v20h2v2H22v20h-2v-20h-2v20h-2v-20h-2v20h-2v-20h-2v20H8v-20H6v20H4v-20H2v20H0v-2.5l20-20z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}