/*
Tag sphere, adapted from "CSS Only 3D Tagcloud V2" by Niklas Knaack, MIT licence.
Copyright (c) 2024 Niklas Knaack. The licence text is in LICENSE.txt in this folder and applies to this file.

Changes from the original, for the GAR PPWR FAQ prototype (page notes Item 3):
1. No font loaded from an outside server; the page's own system fonts are used.
2. Positions come from the data (one point per tag, set by app.js), not from the index of each tag.
3. The outer ring of radio controls is removed; a pause control in the page stops the rotation instead.
4. Rotation stops when the device asks for reduced motion, when the reader pauses it, and while a tag has
   keyboard focus or the pointer is over the sphere.
5. Tags are links inside the page with a visible focus ring; nothing opens in a new tab.
6. No CSS custom properties, so the file holds no double hyphen (house style).
*/

.tc-wrap {
    position: relative;
    width: 30rem;
    height: 30rem;
    max-width: 100%;
    margin: 0 auto;
    perspective: 52rem;
}

.tc-tilt {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateZ(-14deg);
}

.tc-ball {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: tc-spin 48s linear infinite;
}

.tc-tag {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
    list-style: none;
}

.tc-face {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    transform-style: preserve-3d;
    animation: tc-counter 48s linear infinite;
    white-space: nowrap;
}

.tc-face a {
    display: inline-block;
    padding: 0.1rem 0.35rem;
    border-radius: 0.3rem;
    text-decoration: none;
    line-height: 1.2;
}

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

@keyframes tc-counter {
    from { transform: translate(-50%, -50%) rotateY(0deg) rotateZ(14deg); }
    to { transform: translate(-50%, -50%) rotateY(-360deg) rotateZ(14deg); }
}

.tc-wrap.tc-paused .tc-ball,
.tc-wrap.tc-paused .tc-face,
.tc-wrap:hover .tc-ball,
.tc-wrap:hover .tc-face,
.tc-wrap:focus-within .tc-ball,
.tc-wrap:focus-within .tc-face {
    animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
    .tc-ball,
    .tc-face {
        animation: none;
    }
    .tc-face {
        transform: translate(-50%, -50%) rotateZ(14deg);
    }
}

@media (max-width: 30rem) {
    .tc-wrap {
        width: 19rem;
        height: 19rem;
    }
}