/* Base styles */
@font-face {
    font-family: 'Blippo'; /* The name you want to give to your font */
    src: url('/static/fonts/blippo.ttf') format('truetype'); /* Path to your font file */
    font-weight: normal;
    font-style: normal;
  }
*{
    font-family: 'Blippo', Arial, sans-serif;
}
body, html {
    overflow-x: hidden;
}


.main-container {
    position: absolute;
    overflow: visible;
    width: 80%;
    height: 80%;
    top: 10%;
    left: 10%;
}

.logo-container {
    position: absolute;
    width: 80%;
    height: 90%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

/* Keyframes for slide-in animations */
@keyframes slideInLeft {
    0% { top: 60%; left: -50%; opacity: 0; }
    100% { top: var(--ball-height-offset); left: var(--slide-right-left); opacity: 1; }
}

@keyframes slideInRight {
    0% { top: 60%; right: -50%; opacity: 0; }
    100% { top:var(--ball-height-offset) ; right: var(--slide-right-left); opacity: 1; }
}

@keyframes slideInTop {
    0% { top: -50%; opacity: 0; }
    100% { top: var(--slide-top); opacity: 1; }
}

@keyframes slideInTop2 {
    0% { top: -50%; opacity: 0; }
    100% { top: var(--slide-top2); opacity: 1; }
}

@keyframes slideInBottom {
    0% { 
        top: -50%; 
        left: 50%; /* Start from the middle of the screen horizontally */
        transform: translateX(-50%); /* Ensure the ball starts centered */
        opacity: 0; 
    }
    100% { 
        top: var(--slide-bottom); 
        left: 50%; 
        transform: translateX(-50%); /* Maintain centered position */
        opacity: 1; 
    }
}

@keyframes slideInBottom2 {
    0% { bottom: -50%; opacity: 0; }
    100% { bottom: var(--slide-bottom2); opacity: 1; }
}

/* Common styles for logo parts */
.logo-part {
    position: absolute;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    border-radius: 50%;
}

* {
    --ball-height-offset: 60%;
    --ball-factor: 0.15;
    --greenball-width: 100%;
    --greenball-height: 100%;
    --yellowball-width: calc(var(--greenball-width) * var(--ball-factor));
    --yellowball-height: calc(var(--greenball-height) * var(--ball-factor));
    --redball-width: calc(var(--greenball-width) * var(--ball-factor));
    --redball-height: calc(var(--greenball-height) * var(--ball-factor));
    --whiteball-width: calc(var(--greenball-width) * var(--ball-factor));
    --whiteball-height: calc(var(--greenball-height) * var(--ball-factor));;
    --dartboard-width: calc(var(--greenball-width) * 0.45);
    --dartboard-height: calc(var(--greenball-height) * 0.45);
    --titel-width: calc(var(--greenball-width) * 0.35);
    --titel-height: calc(var(--greenball-height) * 0.2);
    --slide-right-left: 40%;
    --slide-top: 35%;
    --slide-top2: 50%;
    --slide-bottom: 20%;
    --slide-bottom2: 15%;
}

/* Specific animation classes under .start-animation */
.start-animation .greenball {
    animation: slideInTop2 2s ease forwards;
    width: var(--greenball-width);
    height: var(--greenball-height);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    z-index: 0;
}

.start-animation .yellowball {
    top: 60%;
    left: 50%;
    width: var(--yellowball-width);
    height: var(--yellowball-height);
    transform: translate(-50%, -50%);
    animation: slideInLeft 3s ease forwards;
    object-fit: contain;
    z-index: 1;
}

.start-animation .redball {
    top: 60%;
    right: 50%;
    width: var(--redball-width);
    height: var(--redball-height);
    animation: slideInRight 2s ease forwards;
    animation-delay: 1s;
    transform : translate(50%, -50%);
    object-fit: contain;
    z-index: 1;
}

.start-animation .whiteball {
    width: var(--whiteball-width);
    height: var(--whiteball-height);
    animation: slideInBottom 1.5s ease forwards;
    animation-delay: 1s;
    right: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    z-index: 1;
}

.start-animation .dartboard {
    width: var(--dartboard-width);
    height: var(--dartboard-height);
    animation: slideInTop 2.5s ease forwards;
    animation-delay: 0.5s;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    z-index: 1;
}

.start-animation .titel {
    position: absolute;
    bottom: 0%;
    left: 50%;
    animation: slideInBottom2 2.5s ease forwards;
    animation-delay: 0.5s;
    transform: translate(-50%, -50%);
    width: var(--titel-width);
    height: var(--titel-height);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    z-index: 2;
}

/* Keyframes for resizing and moving */
@keyframes resizeMoveGreen {
    0% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    100% {
        top: 0;
        left: 0;
        transform: translate(-50%, -50%) scale(calc(var(--ball-factor) - 0.05));
        opacity: 1;
    }
}

@keyframes resizeMoveYellow {
    0% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    100% {
        top: 100%;
        left: 0;
        transform: translate(-50%, -50%) scale(0.70);
        opacity: 1;
    }
}

@keyframes resizeMoveRed {
    0% {
        transform: translate(+50%, -50%);
        opacity: 1;
    }
    100% {
    
        top: 0;
        right: 0;
        transform: translate(+50%, -50%) scale(0.70);
        opacity: 1;
    }
}
@keyframes resizeMoveWhite {
    0% {
        transform: translate(-50%, 30%);
        opacity: 1;
    }
    100% {
        top: 100%;
        /* left: auto; */
        right: 0;
        transform: translate(+50%, -50%) scale(0.70); /* Adjusted to correctly position in bottom-right */
        opacity: 1;
    }
}
@keyframes resizeMoveDartboard {
    0% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    100% {
        top: 0;
        transform: translate(-50%, -50%) scale(0.30);
        opacity: 1;
    }
    
}

@keyframes resizeMoveTitel {
    0% {
        transform: translate(-50%, -50%);
        opacity: 1;
    }
    100% {
        bottom: 200%;
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 1;
    }
}

/* Add specific animation classes for each logo part */
.start-animation .greenball.resize-move { animation: resizeMoveGreen 1.5s ease forwards; }
.start-animation .yellowball.resize-move { animation: resizeMoveYellow 1.5s ease forwards; }
.start-animation .redball.resize-move { animation: resizeMoveRed 1.5s ease forwards; }
.start-animation .whiteball.resize-move { animation: resizeMoveWhite 1.5s ease forwards; }
.start-animation .dartboard.resize-move { animation: resizeMoveDartboard 1.5s ease forwards; }
.start-animation .titel.resize-move { animation: resizeMoveTitel 1.5s ease forwards; }

/* Style for the images */
.logo-part {
    transition: transform 0.3s ease, cursor 0.3s ease;
}

/* Change cursor to pointer on hover */
.logo-part:hover { cursor: pointer; }

/* Responsive Adjustments */
@media (max-width: 400px) {
    .logo-container {
        width: 100%;
        height: 100%;
    }
    * {
        --slide-right-left: 30%;
        --slide-top: 44%;
        --slide-bottom2: 28%;
        --slide-bottom: 55%;    
        --titel-width: calc(var(--greenball-width) * 0.6);
        --titel-height: calc(var(--greenball-height) * 0.1);
        --dartboard-width: calc(var(--greenball-width) * 0.5);
        --dartboard-height: calc(var(--greenball-height) * 0.5);
    }
}

@media (min-width: 400px) and (max-width: 500px) {
    .logo-container {
        width: 100%;
        height: 100%;
    }
    * {
        --ball-factor: 0.2;
        --ball-height-offset: 63%;
        --slide-right-left: 28%;
        --slide-top: 37%;
        --slide-bottom2: 22%;
        --slide-bottom: 58%; 
        --titel-width: calc(var(--greenball-width) * 0.6);
        --titel-height: calc(var(--greenball-height) * 0.15);
        --dartboard-width: calc(var(--greenball-width) * 0.5);
        --dartboard-height: calc(var(--greenball-height) * 0.5);
    }
}

@media (min-width:500px) and (max-width: 600px) {
    .logo-container {
        width: 100%;
        height: 100%;
    }
    * {
        --ball-factor: 0.2;
        --ball-height-offset: 63%;
        --slide-right-left: 26%;
        --slide-top: 35%;
        --slide-bottom2: 15%;
        --slide-bottom: 58%;
        --titel-width: calc(var(--greenball-width) * 0.6);
        --titel-height: calc(var(--greenball-height) * 0.2);
        --dartboard-width: calc(var(--greenball-width) * 0.5);
        --dartboard-height: calc(var(--greenball-height) * 0.5);
    }
}
@media (min-width: 600px) and (max-width: 768px) {
    .logo-container {
        width: 100%;
        height: 100%;
    }
    * {
        --ball-factor: 0.2;
        --ball-height-offset: 65%;
        --slide-right-left: 26%;
        --slide-top: 35%;
        --slide-bottom2: 15%;
        --slide-bottom: 60%;
        --titel-width: calc(var(--greenball-width) * 0.6);
        --titel-height: calc(var(--greenball-height) * 0.2);
        --dartboard-width: calc(var(--greenball-width) * 0.5);
        --dartboard-height: calc(var(--greenball-height) * 0.5);
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    .logo-container {
        width: 100%;
        height: 100%;
    }
    * {
        --ball-factor: 0.2;
        --ball-height-offset: 70%;
        --slide-right-left: 30%;
        --slide-top: 35%;
        --slide-bottom2: 10%;
        --slide-bottom: 65%;
        --titel-width: calc(var(--greenball-width) * 0.6);
        --titel-height: calc(var(--greenball-height) * 0.2);
        --dartboard-width: calc(var(--greenball-width) * 0.5);
        --dartboard-height: calc(var(--greenball-height) * 0.5);
    }
}

@media (min-width: 1024px) {
    .logo-container {
        width: 100%;
        height: 100%;
    }
    * {
        --ball-factor: 0.18;
        --ball-height-offset: 70%;
        --slide-right-left: 35%;
        --slide-top: 35%;
        --slide-bottom2: 12%;
        --slide-bottom: 70%;
        --titel-width: calc(var(--greenball-width) * 0.35);
        --titel-height: calc(var(--greenball-height) * 0.2);
        --dartboard-width: calc(var(--greenball-width) * 0.5);
        --dartboard-height: calc(var(--greenball-height) * 0.5);
    }
}
footer {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 10%; 
    background-color: transparent;
    color: white;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    display: none; 
    opacity: 0;  
    transition: opacity 0.5s ease, transform 0.3s ease; 
    cursor: pointer;
}

.footer-content {
    display: flex;
    align-items: center;
}

.arrow-down {
    margin: 0 10px; /* Add some space between the arrow and the text */
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 10;
}

.arrow-down svg {
    transition: stroke 0.3s ease; /* Smooth transition for stroke color */
}

.footer-text {
    font-size: 1.5rem; /* Adjust text size as needed */
    color: #9ACA3C; /* Set the text color */
    text-shadow: 
    -0.5px -0.5px 0 black,   /* Top-left */
    0.5px -0.5px 0 black,    /* Top-right */
    -0.5px 0.5px 0 black,    /* Bottom-left */
    0.5px 0.5px 0 black;     /* Bottom-right */
}

footer:hover .footer-text {
    color: #8d0000; /* Change text color on hover */
    transform: translateY(-5px); /* Move the text up slightly on hover */
    transition: transform 0.3s ease;
    text-shadow: 
    -0.5px -0.5px 0 white,   /* Top-left */
    0.5px -0.5px 0 white,    /* Top-right */
    -0.5px 0.5px 0 white,    /* Bottom-left */
    0.5px 0.5px 0 white;     /* Bottom-right */
}

footer:hover .arrow-down {
    animation: bounce 1s infinite; /* Apply bounce animation on hover */
}

footer:hover .arrow-down svg {
    stroke: #8d0000; /* Change the color of the arrow on hover */
}
.rotate {
    transform: rotate(180deg); /* Rotate the arrow by 180 degrees */
}
@keyframes bounce {
    0%, 100% {
        transform: translateY(0); /* Start and end at the original position */
    }
    50% {
        transform: translateY(-10px); /* Move up by 10px at the midpoint */
    }
}