/* Pie graphic */

section.pie-wrapper {
    display: grid;
    grid-template: minmax(0, 1fr) / minmax(0, 1fr);
    place-items: center;
    height: 100svh;
    width: 100%;

    > * {
        grid-area: 1 / 1;
    }

    .pie {
        width: 100%;
        height: 100%;
        min-height: 0;

        /* The controller reads this duration back to time the dataset swap,
           so the timing lives here and nowhere else. */
        transition: opacity 1000ms ease, scale 1000ms ease;

        &.is-swapping {
            opacity: 0;
            scale: 0.97;
        }

        .pie-rotor {
            transform-box: view-box;
            animation: pie-spin 180s linear infinite;
            will-change: transform;

            &:hover {
                /*animation-play-state: paused;*/
            }
        }

        @media (prefers-reduced-motion: reduce) {
            transition-duration: 0s;
            .pie-rotor { animation: none; }
        }

        .pie-segments {
            transition: filter 150ms ease;
            filter: blur(min(3vh, 3vw));

            &:hover .pie-segment {
                filter: saturate(0) brightness(1.5);
            }

            .pie-segment {
                transition: 0.25s;

                &.is-hovered {
                    filter: saturate(1) brightness(1);
                }
            }


        }

        .pie-labels .pie-label {
            pointer-events: none;

            &.is-hovered {

            }
        }

        svg {
            overflow: visible;
        }
    }
}

@keyframes pie-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


.dial {
    --ring-radius: min(35svh, 35vw);
    --step: calc(360deg / var(--count, 1));
    --offset: -90deg;

    display: grid;
    place-items: center;
    pointer-events: none;

    .dial-node {
        display: grid;
        cursor: pointer;
        place-items: center;
        width: 5rem;
        height: 5rem;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        border: 1px solid rgba(255, 255, 255, 0.75);
        text-align: center;
        backdrop-filter: blur(50px);
        grid-area: 1 / 1;
        pointer-events: auto;
        --angle: calc(var(--offset) + var(--i) * var(--step));





        --tilt-depth: 200px;
        position: relative;
        transform: rotate(var(--angle))
                   translate(var(--ring-radius))
                   rotate(calc(-1 * var(--angle)))
                   perspective(var(--tilt-depth))
                   rotateX(var(--tilt-x, 0deg))
                   rotateY(var(--tilt-y, 0deg))
                   translateZ(var(--tilt-lift, 0px));
        box-shadow: 0 0 0 rgb(0 0 0 / 0);
        transition: box-shadow 500ms cubic-bezier(0.22, 1, 0.36, 1);

        /* Specular highlight following the pointer. This, not the rotation,
           is what actually reads as depth on a circle. */
        &::after {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            pointer-events: none;
            opacity: 0;
            transition: opacity 500ms ease;
            background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
                                        rgb(255 255 255 / 0.55),
                                        rgb(255 255 255 / 0) 65%);
        }

        /* Keep the number above the highlight. */
        > * {
            position: relative;
            z-index: 1;
        }

        /* While tracking the pointer the transform is redriven every frame, so
           it wants to keep up; the slow easing above is for settling back. */
        &.is-tilting {
            --tilt-lift: 14px;
            transition: transform 100ms linear, box-shadow 100ms linear;
            box-shadow: calc(var(--tilt-nx, 0) * -26px)
                        calc(var(--tilt-ny, 0) * -26px)
                        26px rgb(0 0 0 / 0.1);

            &::after {
                opacity: 1;
                transition: opacity 150ms ease;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            transition: none;
        }
    }
}