:root {

    --primary-color: #29245c;

    --circle-size: 675px;
    --radius: calc(var(--circle-size) / 2);
    --radius-half: calc(var(--circle-size) / 4);

    --item-size: 150px;
}

body {  position: relative; font-family: "Source Sans 3", sans-serif; font-size: 1rem; font-weight: 400; color: var(--primary-color); margin: 0;}

:is(h1,h2) {font-weight: 600; margin: 0;}

h1 {font-size:clamp(2rem, 4.375rem, 5vh); }
h2 {font-size: 1.75rem; }

h2:is(.insight,.base) {font-style: italic; font-weight: 400; position: absolute; width: fit-content; text-align: center; z-index: 3;}

h2.insight {transform: translateY(calc(0px - var(--radius-half)));}
h2.base {transform: translateY(var(--radius-half));}


body main { min-height: 100vh; display: flex; flex-direction: column;  }
body main hgroup {}
body main hgroup h1 {width: 100%; text-align: center; position: relative; padding-top: 50px;}
body main hgroup p {display: none;}
body main section {width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}

body main section.content { flex: 1; background: #D9E8F8; background: linear-gradient(0deg, rgba(217, 232, 248, 1) 0%, rgba(217, 232, 248, 1) 50%, rgba(255, 255, 255, 1) 50%);}

figure {all: unset;}

.circle-container { position: relative; width: var(--circle-size); height: var(--circle-size); padding: 100px 0; margin: 0; list-style: none; background-image: url('../media/center.svg'); background-size: contain; background-position: center; background-repeat: no-repeat;}

.circle-container .item { display: block; position: absolute; top: 50%; left: 50%; margin: calc(0px - calc(var(--item-size) / 2)); width: var(--item-size); height: var(--item-size); }
.circle-container .item figure {position: relative;}
.circle-container .item figure img {display: block; max-width: 100%; transition: .15s; width: var(--item-size); height: var(--item-size);}
.circle-container .item figure img.hover-state {position: absolute; inset: 0; opacity: 0; transition: all 0.5s;}
.circle-container .item figure figcaption {position: absolute; top: -24px; width: 550px;}
.circle-container .item figure figcaption h2 {width: 250px;}
.circle-container .item figure figcaption p {opacity: 0; transition: all 0.5s; font-style: italic;}

.circle-container > .item:nth-of-type(1) { transform: rotate(-67.5deg) translate(var(--radius)) rotate(67.5deg); }
.circle-container > .item:nth-of-type(2) { transform: rotate(-22.5deg) translate(var(--radius)) rotate(22.5deg);   }
.circle-container > .item:nth-of-type(3) { transform: rotate(22.5deg)  translate(var(--radius)) rotate(-22.5deg); }
.circle-container > .item:nth-of-type(4) { transform: rotate(67.5deg)  translate(var(--radius)) rotate(-67.5deg);  }
.circle-container > .item:nth-of-type(5) { transform: rotate(112.5deg) translate(var(--radius)) rotate(-112.5deg); }
.circle-container > .item:nth-of-type(6) { transform: rotate(157.5deg) translate(var(--radius)) rotate(-157.5deg); }
.circle-container > .item:nth-of-type(7) { transform: rotate(202.5deg) translate(var(--radius)) rotate(-202.5deg); }
.circle-container > .item:nth-of-type(8) { transform: rotate(247.5deg) translate(var(--radius)) rotate(-247.5deg); }

.circle-container .item:nth-child(-n+4) figure figcaption {left: calc(100% + 24px);} 
.circle-container .item:nth-child(n+5) figure figcaption {right: calc(100% + 24px); text-align: right; display: flex; flex-direction: column; align-items: flex-end;} 

.circle-container .item:is(:nth-child(4), :nth-child(5)) figure figcaption {top: 36px;}

/* Hover */
.circle-container .item:hover {cursor: pointer;}
.circle-container .item:is(:hover, .active) figure img.hover-state {opacity: 1;}
.circle-container .item:is(:hover, .active) figure figcaption p {opacity: 1;}

/* Animatie */
.circle-container > .item { 
    transition: transform .5s ease; transition-delay: calc((sibling-index() - 1) * 250ms); 
    z-index: calc((sibling-count() - sibling-index()) * 2);
    
    @starting-style { 
        transform: rotate(247.5deg) translate(var(--radius)) rotate(-247.5deg) !important; 
    } 
}

.circle-container .item figure figcaption {
    
    opacity: 1;
    transition: all 0.5s; 
    transition-delay: 2.5s;
    

    @starting-style {
        opacity: 0;
    }
}

@media screen and (max-width: 1999px) {
    :root {
        --circle-size: 550px;
        --item-size: 125px;
    }

    h2 {font-size: 1.5rem;}

    .circle-container .item figure figcaption { top: 0; }
    .circle-container .item:is(:nth-child(1), :nth-child(8)) figure figcaption {top: -36px;}
    .circle-container .item:is(:nth-child(4), :nth-child(5)) figure figcaption {top: 36px;}

}

@media screen and (max-width: 1599px) {
    :root {
        --circle-size: 550px;
        --item-size: 125px;
    }

    h2 {font-size: 1.5rem;}

    .circle-container .item figure figcaption { top: 0; width: 450px; }
    .circle-container .item figure figcaption h2 {line-height: 1.1;}
    .circle-container .item figure figcaption p {margin-top: 0;}
    .circle-container .item:is(:nth-child(1), :nth-child(8)) figure figcaption {top: -48px;}
    .circle-container .item:is(:nth-child(4), :nth-child(5)) figure figcaption {top: 48px;}

}

@media screen and (max-width: 1599px) {
    
    .circle-container .item figure figcaption {max-width: 350px;}
    .circle-container .item figure figcaption p {font-size: 0.875rem;}

}

@media screen and (max-width: 1399px) {
    :root {
        --circle-size: 500px;
        --item-size: 100px;
    }
}

@media screen and (max-width: 1399px) {
    :root {
        --circle-size: 500px;
        --item-size: 100px;
    }

    .circle-container .item figure figcaption {width: 360px;}
    .circle-container .item figure figcaption p { font-size: 0.875rem;}

}

@media screen and (max-width: 1299px) {
    :root {
        --circle-size: 400px;
        --item-size: 85px;
    }

    h1 {font-size: 2.5rem; padding-top: 10% !important;}
    h2 {font-size: 1.125rem;}

    .circle-container .item figure figcaption p { font-size: 0.75rem;}


}

@media screen and (max-width: 1200px) {

    body main hgroup {display: flex; flex-direction: column; align-items: center; justify-content: center;}
    body main hgroup p {display: inline-block; text-align: center; max-width: 400px;}
    body main section {display: none;}
    
}

@media screen and (max-width: 480px) {

    h1 {font-size: 1.75rem;}
}