/* Curriculum Animation Styles */

/* 1. Base Layout */
.kinder-curriculum {
    position: relative;
    width: 800px;
    height: 800px;
    margin: 100px auto;
    max-width: 100%;
    /* Responsive safeguard */
}

.curriculum-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Ensure SVG matches the container */
#kinder-curriculum-svg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    /* Allow click-through to underlying elements if needed, 
       but here the SVG paths are likely the interactive targets */
}

/* 2. Outer Ring & Paths */
.outer-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    pointer-events: none;
    /* Let clicks pass through to SVG paths beneath if these divs are visual-only or vice versa */
    z-index: 2;
}

/* 
   The user provided HTML divs for paths (.path-sky, etc.), but complex shapes 
   are best handled by the SVG paths themselves. 
   We apply the requested hover styles to the SVG paths using attribute selectors 
   to match the user's intent of "animating each path".
*/

/* SVG Path Styling */
/* Neon Path: #D3CB74 */
/* Sky Path: #B2C9C3 */
/* Coral Path: #F58A7B */
/* Forest Path: #4C684A */
/* Sage Path: #8E9674 */

path[fill="#D3CB74"],
path[fill="#B2C9C3"],
path[fill="#F58A7B"],
path[fill="#4C684A"],
path[fill="#8E9674"] {
    transition: transform 0.6s ease, filter 0.4s ease;
    transform-origin: center;
    cursor: pointer;
    /* Ensure they are on top for interaction if Z-index allows */
    position: relative;
}

/* Hover Expand Effect - "Extend Out" (Radial Push) */
path[fill="#D3CB74"]:hover,
path[fill="#B2C9C3"]:hover,
path[fill="#F58A7B"]:hover,
path[fill="#4C684A"]:hover,
path[fill="#8E9674"]:hover {
    transform: scale(1.07);
    /* The "Better" option requested */
    z-index: 10;
    /* Works if elements are relatively positioned or handled by JS order */
    filter: drop-shadow(0px 10px 20px rgba(0, 0, 0, 0.15));
}


/* 3. Inner Rotation (Smooth 24/7) */
/* This targets the overlay div containing the Hubs provided in HTML */
.inner-rotating {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    /* Above the background SVG */

    /* Animation applied here for the overlay content */
    animation: rotateSlow 60s linear infinite;

    /* Flexbox to center or position children if needed, 
       though "Hubs" are likely absolute around the circle */
    pointer-events: none;
    /* Let interaction pass to children */
}

/* Enable pointer events on the actual hub items */
.inner-rotating .hub {
    pointer-events: auto;
    position: absolute;
    /* Additional styling for hubs would go here (e.g., text styles) */
    cursor: pointer;
}

/* Animation Keyframes */
@keyframes rotateSlow {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Pause on Hover (UX improvement) */
.inner-rotating:hover,
#kinder-curriculum-svg:hover .curriculum-hub-group {
    /* Also pause if we duplicate logic for SVG group */
    animation-play-state: paused;
}

/* Hub Positioning (Approximate based on 3 items) */
/* These need to be positioned around the circle. 
   Assuming standard layout or user might add specific positions later.
   For now, we place them centrally or as placeholders. 
*/
.hub-discovery {
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
}

.hub-collab {
    bottom: 20%;
    right: 10%;
}

.hub-heart {
    bottom: 20%;
    left: 10%;
}

/* Responsive Adjustments */
@media (max-width: 850px) {
    .kinder-curriculum {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        margin: 50px auto;
    }

    .inner-rotating {
        width: 50%;
        height: 50%;
    }
}