@import "reset.css";
@import "font.css";

:root {
  --vh100: 100vh;

  --page-padding: 1.25rem; /* 20px */
  --header-height: 38px;

  --color-black: #000;
  --color-yellow-bright: #FFFB00;
  --color-yellow-bg: #FFFFF0;
  --color-white: #fff;

  --bg-color: #FFFFF0;
  --font-color: #000000;

  --font-size-s: 1rem; /* 16px */
  --font-size-m: 1.5rem; /* 24px */
  --font-size-l: 2rem; /* 32px */

  --global-transition-speed: 400ms;
  --page-progess: 0%;
}

@media screen and (min-width: 700px) {
    :root {
        --font-size-s: 1.25rem; /* 20px */
        --font-size-m: 1.875rem; /* 30px */
        --font-size-l: 3.125rem; /* 50px */
    }
}

@media screen and (min-width: 1024px) {
    
}

@media screen and (min-width: 1400px) {
    
}

* {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.scrolling-container {
    height: var(--vh100);
    width: 100vw;
    overflow: hidden;
}

.scrollbar-track {
    background-color: transparent !important;
}

.state--modal-open .scrollbar-track {
    display: none!important;
    pointer-events: none!important;
}

.scrollbar-thumb {
    left: -2px !important;
}
.ie-notice {
    display: none;
}
  
/* Show IE banner on IE10/11 */
@media screen and (-ms-high-contrast: active),
        screen and (-ms-high-contrast: none) {
    .ie-notice {
        display: block;
        font-family: "ArnhemFine", 'Times New Roman', Times, serif;
        text-align: center;
        min-width: 350px;
        width: 50%;
        margin: 0 auto;
        font-size: 1.875rem;
    }
}
  
/* Responsive Image */

.responsive-image {
    display: block;
    position: relative;
    width: 100%;
    background-size: cover;
    overflow: hidden;
    will-change: padding-top;
}

.responsive-image img {
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    height: 100%;
    width: 100%;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 800ms ease, transform 800ms ease;
    will-change: opacity, transform;
}

.responsive-image img.did-appear {
    opacity: 1;
    transform-origin: bottom;
    transform: scale(1);
}

/* Base Styles */
::-moz-selection {
    color: var(--color-white); background: var(--color-black);
}
  
::selection {
    color: var(--color-white); background: var(--color-black);
}
  

html {
    scroll-behavior: smooth;
}

.state--modal-open {
    scroll-behavior: auto;
}

body {
    font-family: 'Theinhardt', Arial, Helvetica, sans-serif;
    background-color: var(--bg-color);
    color: var(--font-color);
    position: fixed;
    transition: color 300ms ease;
}

body.state--loaded {
    position: static;
}

.main {
    position: relative;
}

.page {
    opacity: 0;
    transition: color 300ms ease, opacity 300ms ease 800ms
}

.state--loaded .page {
    opacity: 1;
}

.page__frame {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: var(--vh100);
    pointer-events: none;
    overflow: hidden;
}

.button {
    display: inline-block;
    background-color: var(--color-black);
    color: var(--color-white);
    font-size: 0.825rem;
    padding: 0.7rem 2.1rem;
    border-radius: 10000px;
    text-decoration: none;
    border: 1px solid var(--color-black);
    transition: color 200ms ease, background-color 200ms ease;
}

.button:hover {
    background-color: transparent;
    color: var(--color-black);
}

.button.state--inverted {
    border: 1px solid var(--color-white);
    background-color: var(--color-white);
    color: var(--color-black);
}

.button.state--inverted:hover {
    color: var(--color-white);
    background-color: transparent;
}

.progress {
    --progress: 0%;

    position: fixed;
    top: 50%;
    right: calc(var(--page-padding) - 11px);
    width: 1px;
    height: 200px;
    background-color: var(--font-color);
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translate3d(0,-50%,0);
}

.progress::before,
.progress::after {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--font-color);
    position: absolute;
    left: 50%;
    background-color: var(--bg-color);
    border: 1px solid var(--font-color);
}

.progress::before {
    top: 0;
    transform: translate3d(-6px,-50%,0);
}

.progress::after {
    bottom: 0;
    transform: translate3d(-6px,50%,0);
}

.progress__bubble {
    position: absolute;
    top: var(--progress);
    left: 0;
    transform: translate3d(-5px, -50%, 0);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: var(--font-color);
    border: 1px solid var(--font-color);
    z-index: 1;
}

@media screen and (min-width: 700px) {
    .progress {
        right: calc(var(--page-padding) + 6px);
        height: 300px;
    }
}

/* clipping animation */

.clipping {
    opacity: 0;
    transition: clip-path var(--global-transition-speed) ease, transform var(--global-transition-speed) ease, opacity var(--global-transition-speed) ease;
}

.state--active-section .clipping {
    opacity: 1;
}

.state--section-above .clipping {
    opacity: 0;
}

@media screen and (min-width: 700px) {
    .clipping {
        clip-path: inset(100% 0 0 0);
        opacity: 1;
    }
    
    .state--active-section .clipping {
        clip-path: inset(0 0 0 0);
        opacity: 1;
    }
    
    .state--section-above .clipping {
        clip-path: inset(0 0 100% 0);
        opacity: 1;
    }
}
/* Loader */

.loader {
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: var(--color-black);
    opacity: 1;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    transition: opacity 1ms ease 1300ms;
}

.state--loaded .loader {
    z-index: -1;
    pointer-events: none;
    opacity: 0;
}

.loader__text {
    font-family: "ArnhemFine", 'Times New Roman', Times, serif;
    margin-right: 1rem;
    width: 110px;
    text-align: right;
    font-size: 1.875rem;
    transform: translate3d(-10px,0,0);
}

.loader__icon {
    margin-right: 1rem;
    z-index: 1;
    transform: translate3d(-10px,0,0);
}

.loader__icon img {
    transform: scale(1);
    transition: transform 800ms cubic-bezier(1,0,1,-0.2);
}

.state--loaded .loader__icon img {
    transform: scale(45);
}

.loader__logo {
    transform: translate3d(-10px,0,0);
}


@media screen and (-ms-high-contrast: active),
        screen and (-ms-high-contrast: none) {
    .loader {
        display: block;
        padding: 2rem;
    }
    .loader__text,
    .loader__logo,
    .loader__icon {
        display: none;
    }
}

@media screen and (min-width: 700px) {

    .loader__icon,
    .loader__text,
    .loader__logo {
        transform: translate3d(-30px,0,0);
    }
}

@media screen and (min-width: 1400px) {
    .state--loaded .loader__icon img {
        transform: scale(60);
    }
}

/* Richtext */

.richtext {
    font-size: var(--font-size-s);
    line-height: 1.2;
    font-weight: normal;
    color: var(--color-black);
}

.richtext p {
    margin-bottom: 2rem;
    font-weight: normal;
}

.richtext a {
    border-bottom: 2px solid var(--color-black);
    text-decoration: none;
    color: var(--color-black);
}

.richtext strong {
    font-weight: bold;
}

.richtext em {
    font-style: italic;
}

/* navigation & Header */
.header,
.nav {
    display: none;
}

@media screen and (min-width: 700px) {
    .header {
        display: block;
        position: fixed;
        z-index: 3;
        left: 0;
        top: var(--page-padding);
        bottom: auto;
        height: calc(var(--vh100) - var(--page-padding)  - var(--page-padding));
        width: 100%;
        pointer-events: none;
    }
    
    .header__logos {
        --transform: 100%;
        --scale: 1.3;
    
        position: absolute;
        left: var(--page-padding);
        top: 100%;
        width: calc(100% - var(--page-padding) - var(--page-padding));
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }
    
    .header__claim-wrapper {
        padding-bottom: var(--page-padding);
        transform: translate3d(0, calc(var(--transform) * -1),0) ;
    }
    
    .header__claim {
        pointer-events: auto;
        font-family: "ArnhemFine", 'Times New Roman', Times, serif;
        font-size: var(--font-size-l);
        text-transform: uppercase;
        max-width: 130px;
        line-height: 0.7;
        transform: scale(var(--scale));
        transform-origin: bottom left;
    }
    
    .header__logo-wrapper {
        padding-bottom: var(--page-padding);
        transform: translate3d(0, calc(var(--transform) * -1),0) ;
    }
    
    .header__logo {
        pointer-events: auto;
        height: 20px;
        transform: scale(var(--scale));
        transform-origin: bottom right;
    }
    
    .header__logo path {
        fill: var(--font-color);
        transition: fill 300ms ease;
    }
    
    .header__claim-wrapper,
    .header__logo-wrapper {
        padding-bottom: 0;
    }
    
    .header__logos {
        top: var(--transform);
    }

    .header__claim {
        max-width: 200px;
    }

    .header__logo {
        height: 35px;
    }

    .nav {
        z-index: 1;
        pointer-events: auto;
        text-align: center;
        display: block;

        position: fixed;
        left: 0;
        top: var(--page-padding);
        width: 100%;
    }

    .nav__item {
        display: inline-block;
        margin: 0 5px;
    }

    .nav__link {
        color: var(--font-color);
        text-decoration: none;
        display: block;
        border-bottom: 2px solid transparent;
        transition: color 300ms ease, border-bottom 300ms ease;
    }

    .nav__link.state--active {
        border-bottom: 2px solid var(--font-color);
    }
}

@media screen and (min-width: 1024px) {
    
}

@media screen and (min-width: 1400px) {
    
}

/* Section */
.section {
    height: calc(var(--vh100) * 2);
    width: 100%;
    position: relative;
    overflow: hidden;
}

.section__inner {
    position: fixed;
    width: 100%;
    top: 0;
    height: var(--vh100);
    padding: var(--page-padding);
    visibility: hidden;
    transition: visibility 1ms ease 700ms;
}

.state--active-section .section__inner {
    pointer-events: auto;
    visibility: visible;
    transition: visibility 1ms ease;
}

.state--section-above .section__inner {
    pointer-events: auto;
    visibility: hidden;
    transition: visibility 1ms ease 1200ms;
}

.section__fixed {
    pointer-events: none;
    position: fixed;
    overflow: hidden;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--vh100);
}

.state--active-section .section__fixed {
    pointer-events: auto;
}

.state--section-above .section__fixed {
    pointer-events: auto;
}

.section__title {
    --title-size: 14vw;

    font-family: "ArnhemFine", 'Times New Roman', Times, serif;
    z-index: 2;
    position: absolute;
    top: var(--page-padding);
    left: 0;
    width: 100%;
    font-size: var(--title-size);
    line-height: 0.8;
    text-align: center;
    text-transform: uppercase;
}

.section__title.state--big {
    --title-size: 25vw;
}

.section__title span {
    --transition-delay-in: 0;
    --transition-delay-out: 0;
    --transition-speed: 600ms;

    display: inline-block;
    opacity: 0;
    transform: translate3d(0,0,0) scale(1.2);
    transition: transform var(--transition-speed) ease var(--transition-delay-out), 
        opacity var(--transition-speed) ease var(--transition-delay-out);
}

.state--section-above .section__title span {
    opacity: 0;
    transform: translate3d(0,0,0) scale(0.8);
    transition: transform var(--transition-speed) ease var(--transition-delay-out), 
        opacity var(--transition-speed) ease var(--transition-delay-out);
}

.state--active-section .section__title span {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
    transition: transform var(--transition-speed) ease var(--transition-delay-in), 
        opacity var(--transition-speed) ease var(--transition-delay-in);
}

@media screen and (min-width: 700px) {
    .section__title {
        --title-size: 8vw;
        top: calc(var(--header-height) + 0.5rem);
    }

    .section__title.state--big {
        --title-size: 15vw;
    }
}

@media screen and (min-width: 1024px) {
    .section__title {
        --title-size: 10vw;
    }

    .section__title.state--big {
        --title-size: 15vw;
    }
}

@media screen and (min-width: 1400px) {
    .section__title {
        --title-size: 9rem;
    }

    .section__title.state--big {
        --title-size: 9rem;
    }
}

@media screen and (min-width: 1920px) {
    .section__title {
        --title-size: 13rem;
    }

    .section__title.state--big {
        --title-size: 13rem;
    }
}

/* Section Overlay */
.section__overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--vh100);
    z-index: 3;
    overflow: hidden;
    pointer-events: none;
}

.section__overlay-wrapper {
    width: 100%;
    height: var(--vh100);
    background-color: var(--color-white);
    transform: translate3d(100%, 0, 0);
    pointer-events: auto;
    transition: transform 400ms ease-out 200ms;
}

.state--overlay-open .section__overlay-wrapper {
    transform: translate3d(0, 0, 0);
    transition: transform 400ms ease-out;
}

.section__overlay-inner {
    height: 100%;
    overflow: auto;
}

.section__overlay-grid {
    padding: 9rem var(--page-padding) var(--page-padding);
}

.section__overlay-close {
    position: absolute;
    left: 50%;
    top: var(--page-padding);
    transform: translate3d(-50%,0,0);
    width: 40px;
    height: 40px;
    background-color: var(--color-black);
    border: 1px solid var(--color-black);
    border-radius: 50%;
    z-index: 1;
    transition: background-color 200ms ease;
}

.section__overlay-close:hover {
    background: var(--color-white);
}

.section__overlay-close::before,
.section__overlay-close::after {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 2px;
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: var(--color-white);
    transition: background-color 200ms ease, transform 200ms ease;
}

.section__overlay-close::before {
    transform: translate3d(-50%,-50%,0) rotate(-45deg);
}

.section__overlay-close::after {
    transform: translate3d(-50%,-50%,0) rotate(45deg);
}

.section__overlay-close:hover::before {
    background-color: var(--color-black);
}

.section__overlay-close:hover::after {
    background-color: var(--color-black);
}

.section__overlay-close span {
    position: absolute;
    left: 50%;
    bottom: 0;
    font-size: 1rem;
    color: var(--color-black);
    transform: translate3d(-50%, 150%, 0);
}

.section__overlay-col {
    transform: translate3d(0,50px,0);
    opacity: 0;
    transition: opacity 200ms ease, transform 200ms ease;
}

.state--overlay-open .section__overlay-col {
    opacity: 1;
    transform: translate3d(0,0,0);
    transition: opacity var(--global-transition-speed) ease 400ms, transform var(--global-transition-speed) ease 400ms;
}

.state--overlay-open .section__overlay-col:last-child {
    opacity: 1;
    transform: translate3d(0,0,0);
    transition: opacity var(--global-transition-speed) ease 500ms, transform var(--global-transition-speed) ease 500ms;
}

.section__overlay-title {
    font-size: var(--font-size-l);
    margin-bottom: 2rem;
    font-family: "ArnhemFine", 'Times New Roman', Times, serif;
    line-height: 0.7;
    text-transform: uppercase;
    color: var(--color-black);
}

.section__overlay-grid .richtext {
    max-width: 600px;
}

@media screen and (min-width: 700px) {
    .section__overlay-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .section__overlay-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        padding: 9rem 3.75rem;
        gap: 7rem;
        width: 100%;
        max-width: 1700px;
        margin: 0 auto;
        align-items: center;
        justify-content: center;
        min-height: 100%;
    }
}

@media screen and (min-width: 1024px) {
    
}

@media screen and (min-width: 1400px) {
    
}

/* Scene Background */
.scene-background {
    z-index: -1;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: var(--vh100);
    overflow: hidden;
    pointer-events: none;
}

.scene-background__intro {
    --square-width: 100%;
    --square-height: 100%;
    --square-offset: 0;
    --overlay-offset: 0;
    --overlay-scale: 1;
    --overlay-rotation: 0;
    --overlay-width: 60%;
    --image-scale: 1;
    --image-offset: 0;

    perspective: 300px;
    width: 100%;
    height: 100%;
}

.scene-background__intro-square {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--square-width);
    height: var(--square-height);
    transform: translate3d(-50%,calc(-50% + var(--square-offset)),0);
    background-color: var(--color-yellow-bright);
}

.scene-background__intro-image,
.scene-background__intro-image-overlay {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 95%;
    width: 95%;
    object-fit: contain;
}

.scene-background__intro-image-overlay-wrapper {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translate3d(0,100px,0);
    transition: opacity 1000ms ease 400ms, transform 1000ms ease 400ms;
}

.scene-background__intro-image-overlay-wrapper.did-appear {
    opacity: 1;
    transform: translate3d(0,0,0);
}

.scene-background__intro-image-overlay {
    transform-style: preserve-3d;
    transform: translate3d(-52%,calc(-50% + var(--overlay-offset )),0) scale(var(--overlay-scale)) rotateX(var(--overlay-rotation));
}

.scene-background__intro-image {
    opacity: 0;
    transform: translate3d(-52%,calc(-50% + var(--image-offset)),0) scale(var(--image-scale));
}

.scene-background__intro-image.did-appear {
    opacity: 1;
    transition: opacity 1ms ease 1300ms;
}

.scene-background__windows {
    --x-offset: 100%;
    --y-offset: 0;
    --scale: 1;
    --scale-invert: 1;
    --rotate: 0;
    --margin-scale: 2.5vw;
    --sunset-y-offset: 0;
    --sunset-scale: 0;

    transform: translate3d(0, calc(var(--y-offset) + var(--sunset-y-offset)), 0);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
}

.scene-background__windows-wrapper {
    width: 355vw;
    transform: translate3d(var(--x-offset),0,0);
    perspective: 400px;
}

.scene-background__windows-inner {
    width: 100%;
    justify-content: flex-start;
    align-items: flex-end;
    display: flex;
    flex-wrap: nowrap;
    transform: rotateY(var(--rotate)) scale(var(--in-scale));
}

.scene-background__window {
    width: 45vw;
    flex: 0 0 45vw;
    margin: 0 10vw;
    height: 50vh;
    border-radius: 22.5vw 22.5vw 0 0;
    background-color: var(--color-yellow-bright);
    transform: scale(var(--scale-invert));
    transform-origin: center bottom;
}

.scene-background__window:nth-child(4) {
    margin: 0 10vw;
    transform: scale(calc(var(--scale) + var(--sunset-scale)));
}

.scene-background__stars {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.scene-background__star {
    --transition-delay: 0;
    --scale: 1;

    width: 7px;
    height: 7px;
    background-color: var(--color-yellow-bright);
    border-radius: 50%;
    position: absolute;
    transform: scale(0) translate3d(0,50px,0);
    -webkit-transform: scale(0) translateY(50px) translateZ(0);
    -webkit-backface-visibility: hidden;
    transition: transform 300ms ease;
}

.state--stars .scene-background__star {
    transform: scale(1) translate3d(0,0,0);
    transition: transform 1600ms ease var(--transition-delay);
    animation: stars-bounce 6s ease-in-out infinite var(--transition-delay);
}

@keyframes stars-bounce {
    0% {
        transform: scale(1) translate3d(0,30px,0);
    }
    50% {
        transform: scale(1) translate3d(0,0,0);
    }
    99% {
        transform: scale(1) translate3d(0,30px,0);
    }
}

@-webkit-keyframes stars-bounce {
    0% {
        transform: scale(1) translate3d(0,30px,0);
    }
    50% {
        transform: scale(1) translate3d(0,0,0);
    }
    99% {
        transform: scale(1) translate3d(0,30px,0);
    }
}

.scene-background__suns {
    --sun-height: 0;
    --sun-width: 0;
    --sun-margin: 10vw;
    --sun-x: 0;
    --sun-rotate: 0;
    --sun-radius: 999999px;
    --wrapper-offset: 0;

    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    perspective: 800px;
}

.scene-background__suns-inner {
    position: absolute;
    left: 50%;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    transform-origin: left center;
    transform: translate3d(var(--sun-x),var(--wrapper-offset),0) rotateY(var(--sun-rotate))
}

.scene-background__sun-wrapper {
    height: 0;
}

.scene-background__sun {
    width: var(--sun-width);
    height: var(--sun-height);
    flex: 0 0 var(--sun-width);
    margin-right: var(--sun-margin);
    background-color: var(--color-yellow-bright);
    border-radius: 999999px 999999px var(--sun-radius) var(--sun-radius);
    transform: translate3d(calc(var(--sun-width) / -2), calc(var(--sun-width) / -2), 0);
}

.scene-background__footer-square {
    --square-offset: 150%;
    background-color: var(--color-yellow-bright);
    width: 26vh;
    height: 40vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, var(--square-offset), 0);
}

@media screen and (min-width: 700px) {
    .scene-background__windows-wrapper {
        width: 75vw;
        transform: translate3d(var(--x-offset),0,0);
        perspective: 800px;
    }

    .scene-background__windows-inner {
        left: 0;
        bottom: 0;
        justify-content: flex-start;
        align-items: flex-end;
        display: flex;
        flex-wrap: nowrap;
        transform: rotateY(var(--rotate)) scale(var(--in-scale));
    }

    .scene-background__window {
        width: 20vw;
        flex: 0 0 20vw;
        margin: 0 2.5vw;
        height: 70vh;
        border-radius: 10vw 10vw 0 0;
        background-color: var(--color-yellow-bright);
        transform: scale(var(--scale-invert));
        transform-origin: center bottom;
    }

    .scene-background__window:nth-child(4) {
        margin: 0 2.5vw;
        transform: scale(calc(var(--scale) + var(--sunset-scale)));
    }

    .scene-background__footer-square {
        width: 50vh;
        height: 75vh;
    }
}

/* intro */

.intro__logos {
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    padding: var(--page-padding);
    bottom: 0;
    align-items: flex-end;
    opacity: 0;
    transform: translate3d(0,20px,0);
    transition: opacity var(--global-transition-speed) ease, transform var(--global-transition-speed) ease;
}

.state--active-section .intro__logos {
    opacity: 1;
    transform: translate3d(0,0,0);
}

.intro__claim {
    pointer-events: auto;
    font-family: "ArnhemFine", 'Times New Roman', Times, serif;
    font-size: var(--font-size-l);
    text-transform: uppercase;
    max-width: 130px;
    line-height: 0.7;
    transform-origin: bottom left;
}

.intro__logo {
    pointer-events: auto;
    height: 20px;
    transform-origin: bottom right;
}

@media screen and (min-width: 700px) {
    .intro__logos {
        display: none;
    }
}

/* Klimt */


.klimt__image-container {
    width: 80%;
    max-width: 72vh;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-55%,0);
    overflow: hidden;
}

.state--active-section .klimt__image-container {
    transform: translate3d(-50%,-60%,0);
}

.state--section-above .klimt__image-container {
    transform: translate3d(-50%,-65%,0);
}

.klimt__image-wrapper {
    position: relative;
    padding-top: 105%;
    overflow: hidden;
    height: 0;
}

.klimt__image {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

.klimt__image:nth-child(1) {
    transform: scale(1.15) 
                translate3d(
                    calc(calc(var(--mouse-x-offset) + var(--auto-parallax)) * 1%), 
                    calc(var(--mouse-y-offset) * 1%), 0) 
                translateZ(-100px);
}

.klimt__image:nth-child(2) {
    transform: scale(1.15) 
                translate3d(
                    calc(calc(var(--mouse-x-offset) + var(--auto-parallax)) * 1.2%), 
                    calc(var(--mouse-y-offset) * 1.2%), 0) 
                translateZ(-50px);
}

.klimt__image:nth-child(3) {
    transform: scale(1.2) 
                translate3d(
                    calc(calc(var(--mouse-x-offset) + var(--auto-parallax)) * 1.3%), 
                    calc(var(--mouse-y-offset) * 1.3%), 0)
}

.klimt__teaser-text {
    position: absolute;
    text-align: center;
    bottom: 2rem;
    left: 0;
    width: 100%;
    padding: 0 var(--page-padding);
    transform: translate3d(0,25%,0);
}

.state--active-section .klimt__teaser-text {
    transform: translate3d(0,0,0);
}

.state--section-above .klimt__teaser-text {
    transform: translate3d(0,-25%,0);
}

.klimt__teaser-text p {
    width: 340px;
    max-width: 340px;
    font-family: "ArnhemFine", 'Times New Roman', Times, serif;
    line-height: 1;
    font-size: var(--font-size-m);
    color: var(--color-black);
    margin: 0 auto 1rem;
}

.klimt__overlay-image {
    margin-bottom: 0.5rem;
}

.klimt__overlay-description {
    font-family: "ArnhemFine", 'Times New Roman', Times, serif;
    line-height: 1;
    font-size: 1rem;
}

.klimt__overlay-description span {
    font-style: italic;
}

@media screen and (min-width: 700px) {

    .klimt__image-container {
        transform: translate3d(-50%,-45%,0);
    }

    .state--active-section .klimt__image-container {
        transform: translate3d(-50%,-50%,0);
    }
    
    .state--section-above .klimt__image-container {
        transform: translate3d(-50%,-55%,0);
    }

    .klimt__teaser-text {
        text-align: left;
        top: 50%;
        bottom: auto;
        left: 5vw;
        transform: translate3d(0,-25%,0);
    }

    .klimt__teaser-text p {
        margin: 0 0 1.5rem;
    }

    .state--active-section .klimt__teaser-text {
        transform: translate3d(0,-50%,0);
    }
    
    .state--section-above .klimt__teaser-text {
        transform: translate3d(0,-75%,0);
    }
}

@media screen and (min-width: 1024px) {
}

@media screen and (min-width: 1400px) {
    
}

/* Objects */
.objects {
    --objects-auto-parallax: 0;
}

.objects__image-wrapper {
    position: absolute;
    width: 17vw;
    height: 17vw;
    max-width: 120px;
    max-height: 120px;
    opacity: 0;
    transform: scale(0.5);
    transition-property: transform, opacity;
    transition-duration: var(--global-transition-speed);
    transition-timing-function: ease;
    transition-delay: 0ms!important;
}

.state--active-section .objects__image-wrapper {
    opacity: 1;
    transform: scale(1);
    transition-delay: var(--transition-delay)!important;
}

.state--section-above .objects__image-wrapper {
    opacity: 0;
    transform: scale(0.5);
    transition-delay: var(--transition-delay)!important;
}

.objects__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.objects__image-wrapper:nth-child(5n + 1),
.objects__image-wrapper:nth-child(5n) {
    display: none;
}

.objects__image-wrapper:nth-child(4n) .objects__image {
    transform: translate3d(
        calc(var(--mouse-x-offset) * 2%),
        calc(calc(var(--mouse-y-offset) + var(--objects-auto-parallax)) * 2%),
        0) scale(1);
}

.objects__image-wrapper:nth-child(4n + 1) .objects__image {
    transform: translate3d(
        calc(var(--mouse-x-offset) * 4%),
        calc(calc(var(--mouse-y-offset) + var(--objects-auto-parallax)) * 4%), 
        0)  scale(1.05);
}

.objects__image-wrapper:nth-child(4n + 2) .objects__image {
    transform: translate3d(
        calc(var(--mouse-x-offset) * 6%),
        calc(calc(var(--mouse-y-offset) + var(--objects-auto-parallax)) * 6%),
        0) scale(1.1);
}

.objects__image-wrapper:nth-child(4n + 3) .objects__image {
    transform: translate3d(
        calc(var(--mouse-x-offset) * 8%),
        calc(calc(var(--mouse-y-offset) + var(--objects-auto-parallax)) * 8%),
        0) scale(1.15);
}

.objects__teaser-text {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    width: 90%;
    text-align: center;
    transform: translate3d(-50%,25%,0);
}

.state--active-section .objects__teaser-text {
    transform: translate3d(-50%,0,0);
}

.state--section-above .objects__teaser-text {
    transform: translate3d(-50%,-25%,0);
}

.objects__teaser-text p {
    width: 100%;
    max-width: 390px;
    margin: 0 auto;
    font-family: "ArnhemFine", 'Times New Roman', Times, serif;
    line-height: 1;
    font-size: var(--font-size-m);
    color: var(--color-black);
    margin-bottom: 1.5rem;
}

@media screen and (min-width: 700px) {

    .objects__image-wrapper:nth-child(5n + 1),
    .objects__image-wrapper:nth-child(5n) {
        display: block;
    }

    .objects__teaser-text {
        position: absolute;
        bottom: auto;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%,-5%,0);
    }

    .state--active-section .objects__teaser-text {
        transform: translate3d(-50%,-30%,0);
    }
    
    .state--section-above .objects__teaser-text {
        transform: translate3d(-50%,-55%,0);
    }
}

@media screen and (min-width: 1024px) {
}

@media screen and (min-width: 1400px) {
    
}

/* event */

.event__image-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-48%,0);
    width: 80%;
    height: 60%;
    overflow: hidden;
}

.state--active-section .event__image-container {
    transform: translate3d(-50%,-58%,0);
}

.state--section-above .event__image-container {
    transform: translate3d(-50%,-68%,0);
}

.event__image-wrapper {
    --scale-foreground: 1;
    --scale-background: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.event__image-wrapper::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 50%);
}

.event__image-foreground {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform-origin: bottom center;
    transform: scale(calc(var(--scale-foreground) + 0.02)) translate3d(calc(var(--mouse-x-offset) * 1%), calc(var(--mouse-y-offset) * 1%),0);
}

.event__image {
    transform-origin: center center;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(calc(var(--scale-background) + 0.01)) translate3d(calc(var(--mouse-x-offset) * 0.5%), calc(var(--mouse-y-offset) * 0.5%),0);
}

.event__teaser-text {
    position: absolute;
    z-index: 2;
    bottom: 2rem;
    left: 50%;
    text-align: center;
    transform: translate3d(-50%,20%,0);
    transition: transform var(--global-transition-speed) ease;
}

.event__teaser-text.state--desktop {
    display: none;
}

.state--active-section .event__teaser-text {
    transform: translate3d(-50%,0,0);
}

.state--section-above .event__teaser-text {
    transform: translate3d(-50%,-20%,0);
}

.event__teaser-text p {
    width: 350px;
    max-width: 350px;
    font-family: "ArnhemFine", 'Times New Roman', Times, serif;
    line-height: 1;
    font-size: var(--font-size-m);
    color: var(--color-white);
    margin-bottom: 1.5rem;
}

.event__teaser-text.state--mobile p {
    color: var(--color-black);
}

@media screen and (min-width: 700px) {
    
    .event__teaser-text.state--desktop {
        display: block;
    }
    
    .event__teaser-text.state--mobile {
        display: none;
    }

    .event__image-container {
        height: 72vh;
        max-width: 110vh;
    }

    .event__image-container {
        transform: translate3d(-50%,-45%,0);
    }

    .state--active-section .event__image-container {
        transform: translate3d(-50%,-50%,0);
    }
    
    .state--section-above .event__image-container {
        transform: translate3d(-50%,-55%,0);
    }
}

@media screen and (min-width: 1024px) {
    
}

@media screen and (min-width: 1400px) {
    
}

/* story */
.story__grid {
    --y-1: 20%;
    --y-2: 15%;

    width: 90%;
    margin: 0 auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-60%,0);
}

.story__grid-col-1 {
    transform: translate3d(0,20%,0);
}

.state--active-section .story__grid-col-1 {
    transform: translate3d(0,0,0);
}
.state--section-above .story__grid-col-1{
    transform: translate3d(0,-20%,0);
}

.story__grid-col-1 .story__image {
    margin: 1rem 0 3rem;
}

.story__image-main-wrapper {
    display: block;
    position: absolute;
    bottom: -5%;
    left: 50%;
    width: 100vw;
    height: var(--vh100);
    transform: translate3d(-50%,10%,0);
    pointer-events: none;
}

.story__image-main {    
    position: absolute;
    left: 50%;
    bottom: 13%;
    height: 40vh;
    transform: translate3d(-30%,var(--y-2),0) scaleX(-1);
}

.story__text {
    width: 100%;
}

.story__text p {
    width: 100%;
    max-width: 370px;
    font-family: "ArnhemFine", 'Times New Roman', Times, serif;
    line-height: 1;
    font-size: var(--font-size-m);
    color: var(--color-yellow-bright);
    margin-bottom: 1.5rem;
}

.story__slider {
    --progress: 0;

    width: 100%;
    padding-top: 70%;
    position: relative;
    margin: 1rem 0 2rem;
    overflow: hidden;
}

.story__slider-slide {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.story__slider-image {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    transform: translate3d(0,0,0)
}

.story__slider-slide:nth-child(1) {
    transform: translate3d(0,0,0)
}


.story__slider-slide:nth-child(2) {
    transform: translate3d(0,calc(var(--progress2) * 1%),0)
}


.story__slider-slide:nth-child(3) {
    transform: translate3d(0,calc(var(--progress3) * 1%),0)
}

@media screen and (min-width: 700px) { 
    .story__image-main-wrapper {
        display: block;
        position: absolute;
        bottom: -5%;
        left: 50%;
        width: 100vw;
        height: var(--vh100);
        transform: translate3d(-50%,10%,0);
        pointer-events: none;
    }

    .story__image-main {
        position: absolute;
        left: 50%;
        bottom: 0;
        height: 90vh;
        transform: translate3d(-25%,var(--y-2),0) scaleX(-1);
    }

    .state--active-section .story__image-main-wrapper {
        transform: translate3d(-50%,0,0);
    }

    .state--section-above .story__image-main-wrapper {
        transform: translate3d(-50%,-10%,0);
    }

    .story__grid {
        width: 80%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        transform: translate3d(-50%,-50%,0);
    }
}

@media screen and (min-width: 1024px) {
    
}

@media screen and (min-width: 1400px) {
    
}

/* books */

.books__teaser-text {
    position: absolute;
    z-index: 1;
    bottom: 2rem;
    left: 50%;
    text-align: center;
    transform: translate3d(-50%,25%,0);
}

.state--active-section .books__teaser-text {
    transform: translate3d(-50%,0,0);
}

.state--section-above .books__teaser-text {
    transform: translate3d(-50%,-25%,0);
}

.books__teaser-text p {
    width: 350px;
    max-width: 350px;
    font-family: "ArnhemFine", 'Times New Roman', Times, serif;
    line-height: 1;
    font-size: var(--font-size-m);
    color: var(--color-black);
    margin-bottom: 1.5rem;
}

.books__image-container {
    width: 80%;
    height: 60vh;
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    transform: translate3d(-50%, -65%, 0);
}

.books__image-slider {
    --slider-offset: 0;

    height: 100%;
    display: flex;
    transform: translate3d(var(--slider-offset), 0, 0);
}

.books__overview-image {
    width: 90vw;
    margin-right: 12vw;
    transform: translate3d(0,30%,0);
    transition: transform var(--global-transition-speed) ease;
}

.books__overview-image:first-child {
    margin-right: 6vw;
}

.books__overview-image:last-child {
    width: 17vw;
}

.books__overview-image picture {
    background: transparent!important;
}

.books__overview-image img {
    transform: translate3d(0, 100%, 0)!important;
    transition: transform var(--global-transition-speed) ease;
}

.state--active-section .books__overview-image {
    transform: translate3d(0,0,0);
}

.state--active-section .books__overview-image img {
    transform: translate3d(0, 0, 0)!important;
}

.state--section-above .books__overview-image {
    transform: translate3d(0,-30%,0);
}

.state--section-above .books__overview-image img {
    transform: translate3d(0, -100%, 0)!important;
}

.books__overview-image:nth-child(2n) {
    align-self: flex-end;
}

.books__overview-image:last-child {
    margin-right: 0;
}

@media screen and (min-width: 700px) {

    .books__image-container {
        height: 70vh;
        transform: translate3d(-50%, -50%, 0);
    }
    .books__teaser-text {
        position: absolute;
        bottom: auto;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%,-15%,0);
    }

    .state--active-section .books__teaser-text {
        transform: translate3d(-50%,-40%,0);
    }
    
    .state--section-above .books__teaser-text {
        transform: translate3d(-50%,-65%,0);
    }

    .books__overview-image {
        width: 43vw;
        margin-right: 12vw;
    }
}

@media screen and (min-width: 1024px) {
}

@media screen and (min-width: 1400px) {
    
}

/* outro */
.outro__bottom {
    position: absolute;
    left: var(--page-padding);
    right: var(--page-padding);
    bottom: var(--page-padding);
}

.outro__grid {
    display: flex;
    align-items: flex-end;
}

.outro__image {
    position: absolute;
    pointer-events: none;
    left: 50%;
    top: var(--vh100);
    width: 90%;
    height: 90%;
    object-fit: contain;
    transform: translate3d(-52%,-50%,0);
}

.outro__text {
    font-size: 0.825rem;
    line-height: 1.2;
}

.outro__text a {
    color: var(--color-black);
}

.outro__copyright {
    font-size: 0.625rem;
    align-self: flex-end;
    width: 400px;
}

.outro__footer .footer {
    position: static;
    transform: translate3d(0,0,0);
    padding-bottom: 0;
}

.outro__footer .footer__block {
    transform: translate3d(0,0,0);
    opacity: 1;
}

.outro__footer .footer__block-title {
    margin: 0 0 5px;
}

@media screen and (min-width: 1024px) {
    .outro__grid {
        margin-bottom: var(--page-padding);
    }
}


/* Footer */
.footer {
    display: none;
}

@media screen and (min-width: 700px) {
    
}

@media screen and (min-width: 1024px) {
    .footer {
        --footer-transform: -25px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        position: fixed;
        z-index: 1;
        left: var(--page-padding);
        right: var(--page-padding);
        bottom: -5px;
        padding-bottom: var(--page-padding);
        transform: translate3d(0, var(--footer-transform), 0);
        pointer-events: none;
    }
    
    .footer.state--footer-active {
        pointer-events: auto;
    }
    
    .footer__block {
        --footer-block-delay: 0;
        pointer-events: auto;
    
        line-height: 0.8;
        opacity: 0;
        transition: opacity 200ms ease, transform 300ms ease var(--footer-block-delay);
        transform: translate3d(0,100%,0)
    }
    
    .state--footer-active .footer__block {
        transform: translate3d(0,0,0)
    }
    
    .footer__block.did-appear {
        opacity: 1;
    }
    
    .footer__block-title {
        display: block;
        font-size: 0.825rem;
        margin: -5px 0 12px;
        transition: margin 300ms ease var(--footer-block-delay);
    }
    
    .state--footer-active .footer__block-title {
        margin: 0 0 5px;
    }
    
    .footer p {
        display: inline;
        font-family: "ArnhemFine", 'Times New Roman', Times, serif;
        font-size: 1rem;
        line-height: 1.1;
    }

    .footer a {
        color: var(--color-black)
    }
}

@media screen and (min-width: 1400px) {
    
}