/* Custom Utilities */
.pop-out-shadow {
    box-shadow: 20px 20px 60px rgba(16, 185, 129, 0.15), -20px -20px 60px #ffffff;
}

.text-balance {
    text-wrap: balance;
}

.glass-nav {
    background: rgba(6, 78, 59, 0.3);
    /* Emerald-900 with 0.3 opacity */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.scrolled-nav {
    background: rgba(16, 185, 129, 0.95) !important;
    /* Emerald-500 to match badges */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.text-shadow-sm {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Card Pop Button Effect */
.btn-card-pop {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    isolation: isolate;
    /* Create stacking context */
}

.btn-card-pop span {
    position: relative;
    z-index: 10;
    transition: color 0.3s;
}

/* Front Card (with trailing shadow cards) */
.btn-card-pop::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #10b981;
    /* Emerald-500 - Top Layer */
    /* Create trailing layers with shadows ABOVE: Middle (Emerald-600) and Back (Emerald-700) */
    /* Negative offsets place them visually "before" or "on top" in the stack as it rises from bottom */
    box-shadow: 0 -10px 0 #059669, 0 -20px 0 #047857;
    transform: translateY(150%);
    /* Start lower to hide shadows too */
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 1;
    border-radius: 0.75rem;
}

.btn-card-pop:hover::before {
    transform: translateY(0);
}

.btn-card-pop:hover span {
    color: white;
    transition-delay: 0.1s;
    /* Wait for green to fill a bit */
}