/* General styles */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%; /* Ensure it spans the entire viewport height */
    overflow: hidden; /* Prevent scrolling */
    background-image: url('img/Background.png'); /* Set the background image */
    background-size: cover; /* Make the image cover the entire viewport */
    background-position: center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
}

/* Mansion */
.mansion {
    position: absolute;
    bottom: 0; /* Place it at the bottom */
    left: 50%; /* Horizontally center it */
    transform: translateX(-70%) translateY(3%);
    max-width: 100%; /* Ensure it doesn't exceed the viewport width */
    height: auto;
    z-index: 4;
}

.mansion img {
    content: url("img/Mansion.png"); /* Default image */
    transition: 0.3s ease; /* Optional: smooth transition */
    width: 141%; /* Make sure the image fills the mansion container */
    height: auto; /* Keep aspect ratio intact */
}

.mansion-img:hover {
    content: url("img/Mansion_Hover.png"); /* Change image on hover */
}

.moon {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-53%) translateY(-3%);
    max-width: 100%; /* Ensure it doesn't exceed the viewport width */
    height: auto;
    z-index: 3;
}

.moon img {
    content: url("img/Moon.png"); /* Default image */
    transition: 0.3s ease; /* Optional: smooth transition */
    width: 100%; /* Make sure the image fills the mansion container */
    height: auto; /* Keep aspect ratio intact */
}

.moon-img:hover {
    content: url("img/Moon_Hover.png"); /* Change image on hover */
}

.border {
    position: absolute;
    top: 0;
    transform: translateX(0%) translateY(0%); /* Correct the centering by moving it left by 50% of its width */
    max-height: 90%; /* Set the maximum width (adjust as necessary) */
    z-index: 2; /* Ensure the mansion is above the fireworks */
}
.border img {
    height: 100%; /* Make sure the image fills the mansion container */
}

.logo {
    position: absolute;
    bottom: 30%; /* Place it at the bottom */
    left: 54.8%; /* Horizontally center it */
    max-width: 40%; /* Ensure it doesn't exceed the viewport width */
    height: auto;
    z-index: 6;
    animation: shrinkLogo 4s ease-in-out forwards;
}
.logo img {
    width: 120%; /* Make sure the image fills the mansion container */
}

.curtains {
    position: absolute;
    top: 0;
    transform: translateX(0%) translateY(0%); /* Correct the centering by moving it left by 50% of its width */
    z-index: 5;
    width: 100%;
    height: 100%;
    animation: drawCurtains 4s ease-in-out forwards, lowerZ 5s ease-in-out forwards;
}
.curtains img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.citations {
    position: absolute;
    bottom: 20px;
    right: 30px;
    z-index: 4;
}

.menu {
    position: absolute;
    left: 30px;
    top: 20px;
    width: fit-content; /* Adjust to fit the image */
    margin: auto; /* Center the menu on the page if desired */
    z-index: 4;
}

.menu-image {
    display: block; /* Ensures the image is displayed as a block */
    width: 100%; /* Image fills the container */
}

.menu-link {
    position: absolute; /* Position links on top of the image */
    top: 0; /* Align the links with the top of the container */
    height: 100%; /* Full height of the image */
    text-decoration: none; /* Remove underline from links */
    color: transparent; /* Hide link text */
    background-color: rgba(255, 255, 255, 0); /* Transparent background */
}

@keyframes shrinkLogo {
    0% {
        transform: translateX(-70%) translateY(3%) scale(1); /* Start big */
    }
    75% {
        transform: translateX(-70%) translateY(3%) scale(1); /* Wait for 3s */
    }
    100% {
        transform: translateX(-61%) translateY(3%) scale(0); /* Shrink to normal size */
    }
}

@keyframes drawCurtains {
    0% {
        opacity: 1;
    }
    75% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

@keyframes lowerZ {
    90% {
        z-index: 5;
    }
    100% {
        z-index: 1; /* Change z-index at the end */
    }
}

/* Fireworks container */
.fireworks-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Match the viewport height */
    z-index: 2;
    pointer-events: none; /* Prevent interaction */
}

/* Flying particle (launching particle) */
.launching-particle {
    position: absolute;
    width: 4px; /* Visible size */
    height: 6px; /* Visible size */
    background-color: rgba(242, 202, 136, 0.95);
    border-radius: 50%;
    animation: fly-up 1.5s ease-out forwards;
}

/* Animation for flying particle */
@keyframes fly-up {
    0% {
        transform: translateY(100vh); /* Start at the bottom of the screen */
        opacity: 1;
    }
    100% {
        transform: translateY(var(--explosion-height)); /* End at explosionHeight */
        opacity: 1;
    }
}

/* Firework particle styles */
.firework {
    position: absolute;
    width: 2px; /* Particle size */
    height: 2px; /* Particle size */
    background-color: rgba(242, 202, 136, 0.95);
    border-radius: 50%;
    animation: fade 1.5s ease-out forwards, move-out 1.5s ease-out forwards, trail 3s linear forwards;
    box-shadow: 0 0 10px rgba(242, 202, 136, 0.95), 0 0 20px rgba(242, 202, 136, 0.95), 0 0 30px rgba(242, 202, 136, 0.95); /* Tail effect */
}

/* Particle fade animation */
@keyframes fade {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Particle move-out animation: from the center to the target position */
@keyframes move-out {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 1;
    }
    70% {
        transform: translateX(var(--offset-x)) translateY(var(--offset-y)); /* Move outward */
        opacity: 1;
    }
    100%{
        transform: translateX(var(--offset-x)) translateY(var(--offset-y)); /* Move outward */
        opacity: 0;
    }
}

/* Trail effect */
@keyframes trail {
    0% {
        transform: translateX(0) translateY(0);
        opacity: 1;
        box-shadow: 0 0 10px rgba(242, 202, 136, 0.95), 0 0 20px rgba(242, 202, 136, 0.95), 0 0 30px rgba(242, 202, 136, 0.95); /* Initial tail */
    }
    100% {
        transform: translateX(var(--offset-x)) translateY(var(--offset-y)); /* Follow the move-out path */
        opacity: 0;
        box-shadow: 0 0 50px rgba(242, 202, 136, 0.95), 0 0 100px rgba(242, 202, 136, 0.95), 0 0 200px rgba(242, 202, 136, 0.95); /* Fading trail */
    }
}