/* --- DESKTOP HOVER EFFECTS --- */
@media (min-width: 1024px) {
    /* 1. The Container Lift */
    .node-container {
        transition: transform 0.5s cubic-bezier(0.2, 1, 0.3, 1), opacity 1s ease;
        will-change: transform;
    }
    
      .node-container:hover button {
        background-color: #E4002B; /* Changes to your brand red on hover */
        color: white;
        box-shadow: 0 0 15px rgba(228, 0, 43, 0.4);
    }
    


    .node-container:hover {
        transform: translateY(-15px) !important; /* Lifts the whole section */
    }

    /* 2. The Card Glow */
    .glass-card {
        transition: all 0.5s ease;
        border: 1px solid rgba(255, 255, 255, 0.1);
    }

    .node-container:hover .glass-card {
        background: rgba(255, 255, 255, 0.08); /* Slightly brighten bg */
        border-color: rgba(255, 255, 255, 0.3); /* Whiten border */
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 
                    0 0 20px rgba(255, 255, 255, 0.05); /* Soft outer glow */
    }

    /* 3. The Icon Glow */
    .node-container:hover .path-icon {
        box-shadow: 0 0 25px rgba(255, 255, 255, 0.4);
        border-color: #fff;
    }
}




/* --- PULSE SYSTEM --- */
.pulse-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px; /* Icon width */
    height: 64px;
    margin-top: -32px; /* Center perfectly */
    margin-left: -32px;
    border-radius: 50% !important;
    border-width: 2px;
    border-style: solid;
    opacity: 0;
    pointer-events: none;
    z-index: -1;
}

/* Only animate when section is visible (.is-active) */
.is-active .pulse-ring.ring-1 {
    animation: pulse-ring-active 2.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}
.is-active .pulse-ring.ring-2 {
    animation: pulse-ring-active 2.5s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
    animation-delay: 0.8s;
}

@keyframes pulse-ring-active {
    0% { transform: scale(1); opacity: 0.8; }
    100% { transform: scale(2.8); opacity: 0; }
}

/* --- DESKTOP ANIMATIONS --- */
#pathway-draw {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: 7s ease-in-out;
}
.is-active #pathway-draw {
    stroke-dashoffset: 0;
}
.node-container {
    opacity: 0;
    transform: translateY(20px);
    transition: 1s ease;
}
.is-active .node-container {
    opacity: 1;
    transform: translateY(0);
}

/* --- UPDATED MOBILE RESPONSIVE (TIGHTER GAPS) --- */
/* --- MOBILE SPECIFIC FIXES --- */
@media (max-width: 1023px) {
    .north-star-grid {
        position: relative;
        padding-left: 50px;
        margin-left: 20px;
        /* Force child z-index layers to respect this container */
        isolation: isolate; 
        background-image: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.05) 100%);
        background-size: 2px 100%;
        background-repeat: no-repeat;
    }

    /* The Filling Line - Set to z-index: -1 so it is BEHIND everything */
    .north-star-grid::before {
        content: '';
        position: absolute;
        left: -1px;
        top: 32px;
        width: 3px;
        height: var(--fill-height, 0%); 
        background: linear-gradient(to bottom, #3b82f6, #E4002B, #f59e0b);
        box-shadow: 0 0 15px rgba(228, 0, 43, 0.3);
        z-index: -1; 
        pointer-events: none;
    }

    /* The Spark - Also behind icons but above the line */
    .north-star-grid::after {
        content: '';
        position: absolute;
        left: 0.5px;
        top: calc(32px + var(--fill-height, 0%)); 
        width: 12px;
        height: 12px;
        background: #fff;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 20px 5px #fff, 0 0 40px 10px #3b82f6;
        z-index: 0; 
        opacity: var(--spark-opacity, 0);
        pointer-events: none;
    }

    .node-container {
        /* CRITICAL: Pulls the next section's icon up into the previous card's space */
        margin-top: -60px !important; 
        padding-bottom: 0px !important;
    }

    .node-container:first-child {
        margin-top: 0 !important;
    }

    .node-trigger {
        position: relative !important;
        margin-left: -83px !important; 
        top: 0 !important;
        /* Closes gap between icon and its own card */
        margin-bottom: -75px !important; 
        z-index: 20;
    }

    .glass-card {
        padding: 1.25rem !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        position: relative;
        z-index: 10;
    }

    /* Activated Icon State */
    .path-icon.activated {
        border-color: #fff !important;
        box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);
        transform: scale(1.1);
        background: #020617 !important; /* Ensure it stays solid to hide line behind it */
    }
}