@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: Walibi0615;
    src: url("../fonts/walibi-holland.ttf");
}

body{
    overflow-y: visible; /* Hide vertical scrollbar */
    overflow-x: hidden; /* Hide horizontal scrollbar */
    font-family: "Poppins Light", sans-serif !important;
    padding: 0;
    margin: 0;
    scroll-behavior: smooth;
    width: 100vw;
}

html{
    width: 100vw;
}

.font-walibi {
    font-family: Walibi0615;
}

.down-arrow {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
}


.full-height {
    height: 100%;
}
.full-width {
    width: 100%;
}

.background-image{
    background: linear-gradient(180deg, #4bcdff 0%, #3a94d5 100%);
}
.drop-shadow-xl{
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.5));
}
.drop-shadow-l{
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.5));
}

.goliath-overlay{
    background: url("assets/img/goliath.png");
}

.h-90vh{
    height: 90vh !important;
}
.h-80vh{
    height: 80vh !important;
}

.ride {
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 130% 130%;
    overflow: hidden;
    border-radius: 10px;
    transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
    margin: 20px;
    filter: saturate(50%) contrast(100%) blur(1px);
    opacity: 0;
}

.rides .ride:nth-child(2n + 1) {
    transform: translate(0, 20px);
}

.rides .ride:nth-child(2n + 2) {
    transform: translate(0, -20px);
}

.rides {
    filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.5));
}

.ride-render {
    background-size: contain;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: center;
    width: 100%;
    height: 100%;
    transform: translate(-50%, 25%) rotate(2deg);
    filter: saturate(75%) blur(3px);
    transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}


.ride.show {
    opacity: 1;
}

.rotated {
    clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%);
}
.ride:hover .ride-render {
    transform: translate(-40%, 15%);
    filter: saturate(110%) contrast(100%) blur(0px);
}

.ride:hover {
    background-size: 100% 100%;
    filter: saturate(100%) contrast(100%) blur(0px);
}

#walibi-render {
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../img/background.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

}

#walibi-render canvas {
    width: 100%;
    height: 100%;
    position: relative;
    bottom: 0;
    filter: drop-shadow(8px 8px 16px rgba(0, 0, 0, 0.75));
}

@media screen and (max-width: 768px) {
    #walibi-render canvas {
        display: none !important;
    }

    #rides-text {
        display: none !important;
    }
    .rides .ride:nth-child(2n + 1) {
        transform: none;
    }

    .rides .ride:nth-child(2n + 2) {
        transform: none;
    }
}