/* styles.css */
body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #e6f7ff; /* Very light pastel blue */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'Bebas Neue', sans-serif;
    position: relative;
}

.hidden {
    display: none;
}

#logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 8.5in; /* Slightly larger than the logo */
    height: 8.5in; /* Slightly larger than the logo */
    border-radius: 50%;
    background-color: white; /* White color */
    position: relative;
    opacity: 0;
    z-index: 1; /* Lower z-index */
    animation: fadeInAndGrowLogo 3s forwards;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Subtle drop shadow */
}

#logo {
    width: 90%; /* Adjusted to fit almost to the border */
    height: 90%; /* Adjusted to fit almost to the border */
    border-radius: 50%;
    transition: transform 3s ease, opacity 3s ease, filter 3s ease;
    object-fit: contain; /* Ensure the logo fits within the container */
}

#circles-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5in; /* Increased gap to accommodate larger circles */
    z-index: 2; /* Higher z-index */
    opacity: 1;
}

.circle {
    width: 1.5in; /* Increased size by 50% */
    height: 1.5in; /* Increased size by 50% */
    border-radius: 50%;
    background-color: #184b70; /* Updated circle color */
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    overflow: hidden;
    opacity: 0; /* Initially hidden */
    animation: fadeInCircles 3s forwards, moveToPosition 3s forwards; /* Separate animations */
    cursor: pointer;
}

.circle-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.circle:hover .circle-text {
    filter: blur(5px); /* Apply blur on hover */
}

.circle-text {
    font-size: 24px; /* Increased font size by 50% */
    color: whitesmoke; /* Updated text color */
    text-align: center;
    z-index: 4; /* Ensure text is above all */
    transition: filter 0.5s ease; /* Smooth blur transition */
}

.inner-circle {
    width: 90%; /* Adjust inner circle size relative to parent circle */
    height: 90%;
    border-radius: 50%;
    border: 2px solid white; /* White border for the inner circle */
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center the inner circle */
}

#panel {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 36px;
    color: #184b70;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}

#panel.visible {
    opacity: 1;
    pointer-events: auto;
}

@keyframes fadeInAndGrowLogo {
    0% {
        opacity: 0;
        transform: scale(0.9);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0); /* No shadow initially */
    }
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Subtle drop shadow at end */
    }
}

@keyframes fadeInCircles {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes moveToPosition {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(calc(4.25in * cos(var(--angle))), calc(4.25in * sin(var(--angle))));
    }
}