@font-face {

    font-family: 'VattenfallHallDisplay-Bold';

    src: url('../fonts/VattenfallHallDisplay-Bold.eot');

    src: url('../fonts/VattenfallHallDisplay-Bold.eot?#iefix') format('embedded-opentype'),

        url('../fonts/VattenfallHallDisplay-Bold.woff2') format('woff2'),

        url('../fonts/VattenfallHallDisplay-Bold.woff') format('woff');

    font-weight: bold;

    font-style: normal;

}



@font-face {

    font-family: 'Vattenfall Hall NORDx';

    src: url('../fonts/VattenfallHall-Regular.eot');

    src: url('../fonts/VattenfallHall-Regular.eot?#iefix') format('embedded-opentype'),

        url('../fonts/VattenfallHall-Regular.woff2') format('woff2'),

        url('../fonts/VattenfallHall-Regular.woff') format('woff');

    font-weight: 400;

    font-style: normal;

}







html,

body {

    margin: 0;

    padding: 0;

    width: 100%;

    height: 100%;

    overflow: hidden;

    position: fixed;

    font-family: 'Vattenfall Hall NORDx', Arial, sans-serif;

    overscroll-behavior: none;

}





sub {

    vertical-align: baseline;

    position: relative;

    bottom: -0.25em;

    line-height: 0;

}



.scroll-wrapper {

    width: 100%;

    height: 100%;

    overflow-x: auto;

    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    display: flex;

    align-items: center;

    -ms-overflow-style: none;

    scrollbar-width: none;

    overscroll-behavior-x: none;

}



.scroll-wrapper::-webkit-scrollbar {

    display: none;

}





.container {

    width: 100%;

    min-width: 801px;

    height: auto;

    position: relative;

    margin: 0;

    flex-shrink: 0;

}



.bg-image {

    width: 100%;

    height: auto;

    display: block;

    user-select: none;

    -webkit-user-drag: none;

    -khtml-user-drag: none;

    -moz-user-drag: none;

    -o-user-drag: none;

}



.intro-text {

    position: absolute;

    top: calc(34px + 2.3vw);

    left: 5%;

    z-index: 5;

    color: #000;

    text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);

    pointer-events: none;

}



.intro-text h1 {

    font-size: calc(40px + 0.7vw);

    margin: 0 20px 20px 0;

    line-height: 1.1;

    font-family: 'VattenfallHallDisplay-Bold', 'Vattenfall Hall NORDx', sans-serif;

    font-weight: bold;



}

.intro-text h1,
.intro-text p {

    pointer-events: auto;     

}



h2 {

    font-family: 'VattenfallHallDisplay-Bold', 'Vattenfall Hall NORDx', sans-serif;

    font-weight: bold;

}



.intro-text p {

    font-size: calc(14px + 0.3vw);

    line-height: 1.5;

    font-weight: 400;

}



.logo {

    position: fixed;

    bottom: 10px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 10;

    width: 18vw;

    min-width: 200px;

    max-width: 250px;

    height: auto;

}



.swipe-hint {

    display: none;

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    pointer-events: none;

    z-index: 9999;

}



.swipe-circle {

    width: 100px;

    height: 100px;

    background-color: #fff;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);

    overflow: hidden;

}



.hand-icon {

    width: 60%;

    height: 60%;

    animation: swipe-anim 2s infinite ease-in-out;

}



.yellow-btn {

    width: 100%;

    height: 100%;

    background-color: yellow;

    border-radius: 50%;

    cursor: pointer;

    opacity: 1;

    z-index: 5;

    background-color: transparent;

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center;

    border-radius: 0;

    display: block;

    animation: pulse-yellow 2s infinite ease-in-out;

}



.yellow-btn:focus {

    outline: none;

}



.yellow-btn:focus-visible {

    outline: 2px solid #000;

    outline-offset: 2px;

}



.hotspot {

    position: absolute;

    width: 4%;

    aspect-ratio: 1 / 1;

    transform: translate(-50%, -50%);

    z-index: 5;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



/* Grotere knoppen op mobiel voor duim-bediening */

@media (max-width: 801px) {

    .hotspot {

        width: 8vw;

        min-width: 55px;

    }

}



/* Verfijnde knoppen op desktop */

@media (min-width: 802px) {

    .hotspot {

        width: 3vw;

        min-width: 48px;

        max-width: 53px;

    }

}



.hotspot-label {

    position: absolute;

    width: max-content;

    text-align: center;

    font-size: 14px;

    font-family: 'Vattenfall Hall NORDx', sans-serif;

    font-weight: 400;

    color: #000;

    pointer-events: none;

    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);

    line-height: 1.2;

}



.label-left {

    right: 100%;

    margin-right: 10px;

    top: 50%;

    transform: translateY(-50%);

    text-align: right;

}



.label-right {

    left: 100%;

    margin-left: 5px;

    top: 50%;

    transform: translateY(-50%);

    text-align: left;

}



.label-above {

    bottom: 100%;

    margin-bottom: 5px;

}



.label-below {

    top: 100%;

    margin-top: 3px;

}



.hotspot.viewed {

    background-color: #cccccc;

    border-radius: 50%;

}



.hotspot.viewed .yellow-btn {

    filter: grayscale(100%);

    opacity: 0.3;

    animation: none;

    background-color: transparent !important;

}



.hotspot.viewed .hotspot-label {

    color: #888888;

    text-shadow: none;

    opacity: 1;

}



@keyframes pulse-yellow {

    0% {

        transform: scale(1);

    }



    50% {

        transform: scale(1.1);

    }



    100% {

        transform: scale(1);

    }

}



.yellow-btn:hover {

    opacity: 1;

}



.yellow-btn[data-popup="start"] {

    animation: none;

}





.hotspot-layer {

    position: absolute;

    top: 0;

    left: 0;

    height: 100%;

    z-index: 5;

    pointer-events: none;



}



.hotspot-layer a {

    pointer-events: auto;

}











@keyframes swipe-anim {

    0% {

        transform: translateX(-15px);

    }



    50% {

        transform: translateX(15px);

    }



    100% {

        transform: translateX(-15px);

    }

}



@keyframes fade-out {

    0% {

        opacity: 1;

    }



    80% {

        opacity: 1;

    }





    100% {

        opacity: 0;

        visibility: hidden;

    }

}





.modal-overlay {

    position: fixed;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    z-index: 10000;

    background: rgba(255, 255, 255, 0.85);

    display: none;

    justify-content: center;

    align-items: flex-start;

    padding: clamp(20px, 4vw, 40px);

    overflow-y: auto;

    overflow-x: hidden;

    box-sizing: border-box;

    opacity: 0;

    transition: opacity 0.3s ease;

}



.modal-overlay.active {

    display: flex;

    opacity: 1;

}



#modalShell {

    width: 100%;

}



/* Start popup is fullscreen with its own background - remove overlay chrome */

.modal-overlay.active:has(.popup-start) {

    /*  padding: 0; */

    background: transparent;

    overflow: hidden;

}





.modal-wrapper {

    width: 90%;

    max-width: 1200px;

    position: relative;

    display: flex;

    flex-direction: column;

}



.modal-content {

    background: white;

    width: 100%;

    height: auto;

    max-height: 90vh;

    max-height: calc(var(--vh, 1vh) * 90);

    max-height: 90dvh;

    overflow-y: auto;

    padding: 20px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);

    display: flex;

    flex-direction: column;

    box-sizing: border-box;

}



.close-modal {

    position: absolute;

    top: -25px;

    right: -28px;

    width: 52px;

    height: 52px;

    background-color: #ffda00;

    border-radius: 50%;

    color: black;

    font-size: 36px;

    font-weight: normal;

    display: flex;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    z-index: 10;

    line-height: 1;

    font-family: Arial, sans-serif;

}



.close-modal::before {

    content: '';

    position: absolute;

    width: 30px;

    height: 30px;

    border: 3px solid black;

    border-radius: 50%;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

}



.close-modal:hover {

    transform: scale(1.1);

    transition: transform 0.2s;

}



.modal-body {

    display: flex;

    width: 100%;

    gap: 20px;

    flex-direction: row;

}



.modal-text {

    flex: 0 0 calc(40% - 10px);

    text-align: left;

    padding-top: 20px;

}



.modal-text h2 {

    margin-top: 0;

    color: #333;

    font-size: calc(1.5rem + 1vw);



}



.modal-text p {

    font-size: calc(1rem + 0.5vw);

    line-height: 1.4;

}



.modal-image {

    flex: 0 0 calc(60% - 10px);

    position: relative;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    min-height: 400px;

}







.circle-overlay {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 200px;

    height: 200px;

    background-color: #005C63;

    border-radius: 50%;

    transform: translate(-50%, -50%);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    color: white;

    cursor: pointer;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

    transition: transform 0.3s ease, background-color 0.3s;

    text-decoration: none;

}



.circle-overlay:hover {

    transform: translate(-50%, -50%) scale(1.05);

    background-color: #004a50;

}



.overlay-text {

    font-family: 'VattenfallHallDisplay-Bold', sans-serif;

    font-size: 20px;

    line-height: 1.2;

    margin-bottom: 10px;

    font-weight: bold;

}



.overlay-link {

    font-family: 'Vattenfall Hall NORDx', sans-serif;

    font-size: 18px;

    font-weight: 400;

}





/* Mobile responsive */

@media (max-width: 801px) {

    .swipe-hint {

        display: block;

        transform: translate(-50%, -50%);

        animation: fade-out 3s forwards;

        animation-delay: 1.5s;

    }



    .modal-overlay {

        align-items: flex-start;

        overflow-y: auto;

        background: white;

        padding: 0;

    }



    .modal-wrapper {

        width: 100%;

        height: auto;

        min-height: 100vh;

        min-height: calc(var(--vh, 1vh) * 100);

        min-height: 100dvh;

        margin: 0;

    }



    .modal-content {

        width: 100%;

        max-width: none;

        height: auto;

        min-height: 100vh;

        min-height: calc(var(--vh, 1vh) * 100);

        min-height: 100dvh;

        margin: 0;

        padding: 20px;

        padding-bottom: 150px;

        box-shadow: none;

        border-radius: 0;

        display: block;

        box-sizing: border-box;

    }





    .close-modal {

        top: 32px;

        right: 12px;

    }



    .modal-body {

        display: flex;

        flex-direction: column-reverse;

        margin-top: 40px;

        margin-bottom: 40px;

    }



    .modal-image {

        flex: 0 0 auto;

        width: 100%;

        margin-bottom: 20px;

        display: block;

        min-height: 300px;

    }



    .modal-text {

        flex: 0 0 auto;

        width: 100%;

        padding-top: 0;

    }



    .modal-text p {

        margin-bottom: 100px;

    }



    .logo {

        width: 40vw;

        min-width: 150px;

        max-width: none;

        bottom: 20px;



    }





    .yellow-btn {

        min-width: 50px;

    }



    .hotspot-label {

        font-size: 12px;

    }







    .intro-text h1 {

        font-size: calc(30px + 0.7vw);

        max-width: 250px;

    }





    .intro-text {

        top: calc(10px + 2.3vw);

        left: 5%;



    }



}