@font-face {
    font-family: 'Flama';
    src: url('../fonts/Flama-Basic.eot');
    src: url('../fonts/Flama-Basic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Flama-Basic.woff2') format('woff2'),
        url('../fonts/Flama-Basic.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Flama';
    src: url('../fonts/Flama-BasicItalic.eot');
    src: url('../fonts/Flama-BasicItalic.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Flama-BasicItalic.woff2') format('woff2'),
        url('../fonts/Flama-BasicItalic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Flama';
    src: url('../fonts/Flama-Medium.eot');
    src: url('../fonts/Flama-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Flama-Medium.woff2') format('woff2'),
        url('../fonts/Flama-Medium.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: 'Flama';
}

:root {
    --animation-delay-amount: 100ms;
}

.diagram {
    /* transform: rotate(calc(180deg - (var(--active-segment) * (var(--gap) * 1deg)))); */
    /* transform: rotate(calc(180deg - ((var(--rotation) * (var(--gap)) * 1deg)))); */
    transform: rotate(calc(180deg + (var(--rotation) * 1deg)));

    transition-property: transform;
    transition-duration: var(--duration);
}

.actor-segment {

    position: absolute;
    border-radius: 100%;
    /* clip: rect(0px, 18rem, 9rem, 9rem); */
    /* clip-path: polygon(50% 50%, 0 0, var(--slice-relative, 60%) 0); */

    z-index: var(--segment-number, 1);

    transform: rotate(var(--rotation));
}

.actor-segment:hover,
.actor-segment.is-active {
    transform: rotate(var(--rotation)) scale(1.05);
    z-index: 100;
}

.actor-segment.is-active .actor-segment-bg,
.actor-segment.is-active .actor-segment-text {
    opacity: 1;
}

.category-holder {
    --deg: calc(360deg / var(--total-count, 6));
    --diff: calc(45deg - (var(--deg, 60deg) / 2));

    -webkit-mask-image: radial-gradient(circle, transparent 0%, transparent calc(71% - 2rem), #000 calc(71% - 2rem), #000 100%);
    mask-image: radial-gradient(circle, transparent 0%, transparent calc(71% - 2rem), #000 calc(71% - 2rem), #000 100%);
    /* background-image: radial-gradient(circle, #fff 0%, #fff calc(71% - 2rem), #000 calc(71% - 2rem), #000 100%); */

    overflow: hidden;
}

.category-segment {
    /* --calc-c: calc(50 / (cos(var(--half-deg))));
    /* --calc-c: calc(50px/0.73900891722); 67.658266216333247 */
    /* --calc-x: calc(sqrt((var(--calc-c, 0) * var(--calc-c, 0)) - (50 * 50))); */
    /* --calc-x: calc(sqrt((var(--calc-c) * var(--calc-c)) - (50 * 50))); */
    /* --calc-x: calc(sqrt((67.658266216333247 * 67.658266216333247) - (50 * 50))); */

    /* -webkit-clip-path: polygon(50% 50%, 0 calc(50% - (var(--calc-x, 0) * 1%)), 0 calc(50% + (var(--calc-x, 0) * 1%))); */
    /* clip-path: polygon(50% 50%, 0 calc(50% - (var(--calc-x) * 1%)), 0 calc(50% + (var(--calc-x) * 1%))); */

    transform: rotate(var(--rotation));
}

.category-segment-inner {
    transition: all 200ms;
    position: absolute;
    border-radius: 100%;
    cursor: pointer;
    /* clip: rect(0px, 9rem, 18rem, 0px); */
    /* background-color: var(--bg-colour, #000); */

    transform:rotate(var(--deg, 60deg));
}

.category-svg text {
    font-size: 0.4rem;
}

@media (min-width: 1536px) {
    .category-svg text {
        font-size: 0.33rem;
    }
}