:root {
    /* BRAND COLORS */
    --life-green: #0E4D4A;     /* Deep Forest (Brand) */
    --womate-gold: #7EB148;    /* Light Green-Gold (Background) */
    
    /* UI POP COLORS */
    --gnosis-light: #fdfaf0;   /* Cream White (For high contrast on green) */
    --cyan-glow: #00f2ff;      /* Tech highlight */
    --void: #05050a;
}

/* ================= THE AKASHIC HUB (TOGGLE) ================= */
.akashic-hub {
    display: none; 
    background: transparent;
    border: none;
    cursor: pointer;
    width: 60px;
    height: 60px;
    position: relative;
    justify-content: center;
    align-items: center;
    perspective: 400px;
    outline: none;
    /* Adding a subtle drop shadow to lift the whole button off the green background */
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

/* 3D Cube: Uses the deep brand green for contrast */
.cube {
    width: 26px;
    height: 26px;
    position: relative;
    transform-style: preserve-3d;
    animation: rotateGnosis 12s linear infinite; /* Slower, more majestic rotation */
    transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.akashic-hub span {
    position: absolute;
    width: 100%;
    height: 100%;
    /* Semi-transparent dark green faces */
    background: rgba(14, 77, 74, 0.2); 
    /* Bold dark green border to cut through the light green background */
    border: 1.5px solid var(--life-green);
    display: block;
    backdrop-filter: blur(2px);
}

/* The Plus Seal: White/Cream pops perfectly against dark green and light gold */
.plus-seal {
    position: absolute;
    color: var(--gnosis-light);
    font-size: 22px;
    font-weight: 300;
    transition: 0.5s;
    z-index: 10;
    text-shadow: 0 0 10px rgba(0,0,0,0.3);
}

/* The Ring: A mix of your brand green and a bright glow */
.ring {
    position: absolute;
    inset: 2px;
    border: 2px solid var(--life-green);
    border-radius: 50%;
    animation: portalPulse 2.5s infinite;
    opacity: 0.6;
}

/* ================= RESPONSIVE & ACTIVE STATES ================= */
@media (max-width: 900px) {
    .akashic-hub {
        display: flex;
    }

    /* When the menu is OPEN (Active) */
    .akashic-hub.active .cube {
        transform: scale(1.6) rotateX(45deg);
        animation-play-state: paused;
    }

    .akashic-hub.active span {
        /* Glows white when active for maximum feedback */
        border-color: var(--gnosis-light);
        box-shadow: 0 0 15px var(--gnosis-light);
    }

    .akashic-hub.active .plus-seal {
        transform: rotate(135deg);
        color: var(--cyan-glow); /* Shifts to tech-cyan when unlocked */
    }

    .akashic-hub.active .ring {
        border-color: var(--gnosis-light);
        animation-duration: 0.8s;
    }
}

/* ================= ANIMATIONS ================= */
@keyframes rotateGnosis {
    from { transform: rotateX(0) rotateY(0) rotateZ(0); }
    to { transform: rotateX(360deg) rotateY(360deg) rotateZ(180deg); }
}

@keyframes portalPulse {
    0% { transform: scale(0.7); opacity: 0.8; border-width: 3px; }
    100% { transform: scale(1.4); opacity: 0; border-width: 1px; }
}