/*

    c-o
    Entwicklung: Leon Klaßen—www.leonklassen.com
    2025

*/



*,
*:before,
*:after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

ol, ul {
    list-style: none;
}

b, strong {
    font-weight: bold;
}

i, em {
    font-style: italic;
}

dialog:modal {
    max-width: 100%;
    max-height: 100%;
}



/* ### FONTS ### */



@font-face {
    font-family:'co-haskoy';
    font-style: normal;
    font-weight: normal;
    src: url( 'fonts/Haskoy-Medium.otf' ) format( 'opentype' );
}

@font-face {
    font-family:'co-haskoy';
    font-style: normal;
    font-weight: bold;
    src: url( 'fonts/Haskoy-Bold.otf' ) format( 'opentype' );
}



/* ### VARS ### */


:root {

    --mobile-point-scale: 1;
    --mobile-width-scale: 1;

}


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

    :root {
    
        --mobile-point-scale: 1.5;
        --mobile-width-scale: 0.8;

    }

}



/* ### GENERAL ### */


body {
    margin: 0px;
    padding: 0px;
    font-size: 1.5rem;
    line-height: 1.15em;
    font-family: 'co-haskoy', sans-serif;
    background-color: black;
    color: black;
    cursor: default;
    -webkit-user-select: text; 
    -moz-user-select: text; 
    -ms-user-select: text; 
    user-select: text;
    font-weight: normal;
    min-height:100%;
    height: 100%;
    width: 100%;
}

::selection {
    background: white;
    color: black;
}

::-moz-selection {
    background: white;
    color: black;
}

a {
    color: inherit;
    text-decoration: inherit;
    cursor: pointer;
}

button {
    background-color: transparent;
    text-align: left;   
    color: inherit;     
}

a:hover {

}

strong {
    font-weight: bold;
}

em {
    font-style: normal;
}


/*button:focus-visible,
a:focus-visible,
*[tabindex = "0"]:focus-visible {
    outline: 3px solid black;
    outline-offset: 5px;
    border-radius: 10px;
}*/


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

    body {
        font-size: 1.25rem;    
    }
    
}


/* ### HOME ### */


body::before {
    content: "";
    display: block;
    position: absolute;
    height: 100%;
    width: 100%;
    background-size: cover;
}



/* ### MOBILE ### */


.mobile {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;    
    perspective: 1000px;
    -webkit-user-select: none;
    user-select: none;
}

.mobile .string {
    position: absolute;
    top: 0px;
    width: 0px;
    transform-style: preserve-3d;
    animation: string-swing 10s infinite;
    transform-origin: 50% 0%;
}

.mobile.debug .string::before {
    content: "";
    display: block;
    width: 1px;
    left: 0px;
    height: 100%;
    background-color: purple;
}

.mobile .bar {
    position: absolute;
    height: 0px;
    bottom: 0px;
    animation: swing 10s infinite;
    transform-style: preserve-3d;
}

.mobile.debug .bar::before {
    content: "";
    display: block;
    height: 1px;
    top: 0px;
    width: 100%;
    background-color: red;
}

.mobile .point {
    position: absolute;
    height: auto;
    transform-style: preserve-3d;
    animation: string-swing 15s infinite;
}

.mobile.debug .point {
    background-color: rgba( 255, 255, 0, 0.1 );
}

.mobile .point a {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
}

.mobile .point img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    transition: scale .8s;
}

@media (hover: hover) {
    
    .mobile .point a:hover img {
        scale: 1.05;
    }

}

@keyframes swing {
    
    0% {
        transform: rotateY( -3deg );
    }
    
    50% {
        transform: rotateY( 3deg );
    }
    
    100% {
        transform: rotateY( -3deg );
    }
    
}


@keyframes string-swing {

    0% {
        transform: rotateZ( -0.8deg );
    }
    
    50% {
        transform: rotateZ( 0.8deg );
    }
    
    100% {
        transform: rotateZ( -0.8deg );
    }
    
}


@media (prefers-reduced-motion) {
    
    .mobile .string {
        animation: none;
    }
    
    .mobile .bar {
        animation: none;
    }
    
    .mobile .point {
        animation: none;
    }
    
    .mobile .point img {
        transition: none;
    }

}


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

   /* .mobile .point {
        scale: 1.5;
    }*/

}



/* ### POPUP ### */


.popup {
    position: fixed;
    left: 0px;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: transparent;
}

.popup .close-backdrop {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-color: hsla( 0, 0%, 0%, 0.6 );
    opacity: 0;
    transition: opacity .3s;
}

.popup.animated .close-backdrop {
    opacity: 1;
}

.popup .wrapper {
    position: relative;
    width: calc( 100% - 64px );
    max-width: 800px;
    background-color: black;
    color: white;
    height: auto;
    z-index: 1;
    opacity: 0;
    transition: scale .3s, opacity .3s;
}

.popup.animated .wrapper {
    opacity: 1;
}

.popup .wrapper .scroll {
    position: relative;
    width: 100%;
    height: auto;
    max-height: calc( 100vh - 64px );
    overflow: hidden;
    overflow-y: auto;
    padding: 32px;
}

.popup .wrapper .scroll > main > * + * {
    margin-top: 32px;
}

.popup .headline-image {
    display: block;
    width: 100%;
    max-width: 200px;
    height: auto;
    margin-bottom: 32px;
}

.popup p a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.popup .wp-block-image {
    position: relative;
    width: calc( 100% + 64px );
    margin-left: -32px;
}

.popup .wp-block-image:last-child {
    margin-bottom: -32px;
}

.popup .wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
}

.popup .wp-block-image figcaption {
    padding-left: 32px;
    padding-right: 32px;
    margin-top: 16px;
}

.popup .wp-block-embed {
    position: relative;
    width: calc( 100% + 64px );
    margin-left: -32px;
    aspect-ratio: 16 / 9;
}

.popup .wp-block-embed:last-child {
    margin-bottom: -32px;
}

.popup .wp-block-embed iframe {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;    
}

.popup .tnp {
    margin-top: 64px;
}

.popup .tnp form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.popup .tnp-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.popup .tnp-email {
    padding: 8px;
    padding-left: 0px;
    padding-right: 0px;
    background-color: transparent;
    border-bottom: 1px solid white;
    color: white;
    height: 50px;
}

.popup .tnp-field .tnp-submit {
    width: fit-content;
    padding: 8px;
    padding-left: 16px;
    padding-right: 16px;
    background-color: transparent;
    color: white;
    cursor: pointer;
    height: 50px;
    border-radius: 25px;
    border: 1px solid white;
}

.popup .close {
    position: absolute;
    top: 32px;
    right: 32px;
    width: 32px;
    height: 32px;
    margin: 0px;
    cursor: pointer;
    z-index: 1;
}

.popup .close::before,
.popup .close::after {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0px;
    top: calc( 50% - 1px );
    background-color: white;
}

.popup .close::before {
    rotate: 45deg;    
}

.popup .close::after {
    rotate: -45deg;    
}


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

    .popup .wrapper {
        width: 100%;
        max-height: 100svh;
    }
    
}