/* Website Made by Bence (bencebarens.nl) */

/* Algemene layout */
#about main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#about main{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2em;
    padding: 0 1em 5em 1em;
    z-index: 1;
}

/* Portfolio viewport */
#about main #portfolio {
    position: fixed;
    width: 100%;
    height: 100vh;
    padding-top: 10em;
    perspective: 1200px;
    pointer-events: none;
}

@media (max-width: 1000px) {
    #about main #portfolio {
        padding-top: 5em;
    }
}

/* 3D camera */
#carousel-camera {
    margin-top: -20em;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    pointer-events: none;
}

#carousel-stage {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    animation: rotate-gallery 120s linear infinite;
    will-change: transform;
}

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

/* Individuele ringen */
.ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    transform-style: preserve-3d;
    pointer-events: none;
}

.ring li {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min-content;
    display: flex;
    flex-direction: column;
    align-items: center;
    transform-style: preserve-3d;
    transform: 
        translateX(-50%) 
        translateY(var(--row-offset)) 
        rotateY(calc(var(--slot) * var(--angle))) 
        translateZ(calc(-1 * var(--radius)));
    backface-visibility: hidden;
    contain: layout paint;
    transition: all 100ms ease;
}

.ring li:hover{
    transform: 
        translateX(-50%) 
        translateY(var(--row-offset)) 
        rotateY(calc(var(--slot) * var(--angle))) 
        translateZ(calc(-1 * var(--radius)))
        scale(1.1);
}

.ring li,
.ring li * {
    pointer-events: auto;
}

#portfolio.no-clicks,
#portfolio.no-clicks * {
    pointer-events: none !important;
}

.ring img, .ring video {
    width: var(--item-size, 150px);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
}

.ring li:hover img, .ring li:hover video{
    border: 0.1em solid var(--color-accent);
}

@media (prefers-reduced-motion: reduce) {
    #carousel-stage {
        animation-duration: 500s;
    }
}

#about main section:nth-of-type(2){
    text-align: center;
    margin-top: 40vh;
}

#about main section:nth-of-type(2) p{
    font-size: 1.1em;
}

#about main section:nth-of-type(2) img{
    width: 20em;
    filter: drop-shadow(0 0 0.5em rgba(0,0,0,0.3));
}