/* ==========================================================================
   Page styles: ecologyministry/ecologyministry.html
   Global/shared styles live in assets/css/style.css (and tailwind.css).
   ========================================================================== */

:root {
    --forest-deep:    #0a1f0a;
    --forest-dark:    #0d2b14;
    --forest-mid:     #14532d;
    --forest-bright:  #16a34a;
    --forest-lime:    #4ade80;
    --forest-mist:    rgba(74,222,128,0.08);
    --forest-glow:    rgba(22,163,74,0.18);
    --canopy-gold:    #fbbf24;
    --canopy-beam:    rgba(251,191,36,0.12);
    --fire-red:       #dc2626;
    --fire-orange:    #ea580c;
    --fire-amber:     #d97706;
}
@keyframes canopy-ray {
    0%,100% { opacity:0.04; transform: skewX(-10deg) scaleY(1); }
    50%      { opacity:0.13; transform: skewX(-10deg) scaleY(1.05); }
}
@keyframes forest-pulse {
    0%,100% { opacity:0.5; transform:scale(1); }
    50%      { opacity:1; transform:scale(1.06); }
}
@keyframes crisis-flicker {
    0%,100% { opacity:0.7; }
    50%      { opacity:1; }
}
.canopy-beam {
    position: absolute;
    width: 3px;
    background: linear-gradient(to bottom, transparent, var(--canopy-beam) 40%, transparent);
    transform: skewX(-10deg);
    animation: canopy-ray 6s ease-in-out infinite;
    pointer-events: none;
}
.section-canopy {
    background:
        radial-gradient(ellipse at 20% 0%,  rgba(22,163,74,0.12) 0%, transparent 55%),
        radial-gradient(ellipse at 80% 100%, rgba(22,163,74,0.08) 0%, transparent 55%),
        linear-gradient(180deg, #0a1f0a 0%, #0d2b14 100%);
}
.section-forest-dark {
    background: linear-gradient(180deg, #0d2b14 0%, #061209 100%);
    border-top: 1px solid rgba(74,222,128,0.12);
    border-bottom: 1px solid rgba(74,222,128,0.12);
}
.section-crisis {
    background:
        radial-gradient(ellipse at 50% 0%, rgba(220,38,38,0.12) 0%, transparent 60%),
        linear-gradient(180deg, #1a0505 0%, #0c0c0c 100%);
}
.section-mitigation {
    background:
        radial-gradient(ellipse at 10% 50%, rgba(22,163,74,0.10) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 50%, rgba(74,222,128,0.07) 0%, transparent 50%),
        linear-gradient(180deg, #061209 0%, #0a1f0a 50%, #061209 100%);
}
.forest-divider {
    height: 2px;
    background: linear-gradient(to right, transparent, rgba(74,222,128,0.35), transparent);
}
.advocacy-card {
    background: linear-gradient(135deg, rgba(14,43,20,0.95), rgba(10,31,10,0.98));
    border: 1px solid rgba(74,222,128,0.15);
    border-radius: 24px;
    transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    overflow: hidden;
    position: relative;
}
.advocacy-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(to right, transparent, #16a34a, transparent);
    opacity: 0;
    transition: opacity 0.4s;
}
.advocacy-card:hover { transform: translateY(-8px); border-color: rgba(74,222,128,0.45); box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 40px rgba(22,163,74,0.10); }
.advocacy-card:hover::before { opacity: 1; }
.rights-card {
    position: relative;
    background: linear-gradient(135deg, rgba(14,43,20,0.9), rgba(10,31,10,0.95));
    border: 1px solid rgba(74,222,128,0.12);
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s ease;
}
.rights-card:hover { border-color: rgba(74,222,128,0.50); transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(22,163,74,0.08); }
.rights-card .rights-num {
    font-size: 5rem; font-weight: 900; line-height: 1;
    color: transparent; -webkit-text-stroke: 1px rgba(74,222,128,0.20);
    position: absolute; top: 16px; right: 20px;
    pointer-events: none; user-select: none;
}
.crisis-stat {
    background: linear-gradient(135deg, rgba(30,5,5,0.95), rgba(20,0,0,0.98));
    border: 1px solid rgba(220,38,38,0.20);
    border-radius: 20px;
    transition: all 0.4s ease;
    animation: crisis-flicker 4s ease-in-out infinite;
}
.crisis-stat:hover { border-color: rgba(220,38,38,0.55); transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,0.5), 0 0 30px rgba(220,38,38,0.10); }
.mitigation-card {
    background: linear-gradient(135deg, rgba(10,31,10,0.95), rgba(14,43,20,0.98));
    border: 1px solid rgba(74,222,128,0.15);
    border-radius: 24px;
    overflow: hidden;
    transition: all 0.4s ease;
}
.mitigation-card:hover { border-color: rgba(74,222,128,0.50); transform: translateY(-8px); box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 40px rgba(22,163,74,0.12); }
.mitigation-progress {
    height: 6px; border-radius: 3px;
    background: linear-gradient(to right, #16a34a, #4ade80);
    transition: width 1s ease;
}