/**
 * Eco Nature Beauty - Main Stylesheet
 * Plugin ko cute, animated, aur eco-friendly banata hai
 * No !important overuse - specificity se conflicts avoid karte hain
 */

/* ========================================
   CSS Custom Properties (Variables)
   ======================================== */
:root {
    --enb-green-dark:   #1b4332;
    --enb-green-mid:    #40916c;
    --enb-green-light:  #74c69d;
    --enb-green-pale:   #d8f3dc;
    --enb-yellow:       #f4d03f;
    --enb-autumn-1:     #e07b39;
    --enb-autumn-2:     #c0392b;
    --enb-white:        #ffffff;
    --enb-radius:       16px;
    --enb-shadow:       0 8px 32px rgba(27,67,50,.15);
    --enb-leaf-duration-slow:   12s;
    --enb-leaf-duration-medium: 7s;
    --enb-leaf-duration-fast:   4s;
    --enb-z-leaves:     9998;
    --enb-z-badge:      9999;
}

/* ========================================
   Leaves Container
   ======================================== */
#enb-leaves-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;   /* Clicks website mein jayenge, leaves pe nahi */
    z-index: var(--enb-z-leaves);
    overflow: hidden;
}

/* ========================================
   Individual Leaf
   ======================================== */
.enb-leaf {
    position: absolute;
    top: -80px;
    width: 28px;
    height: 36px;
    opacity: 0;
    will-change: transform, opacity;   /* GPU acceleration */
    animation: enb-fall linear infinite;
}

.enb-leaf svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.12));
}

/* Leaf sway - cute side-to-side motion */
@keyframes enb-fall {
    0% {
        transform: translateY(0) rotate(0deg) translateX(0);
        opacity: 0;
    }
    5% {
        opacity: 0.85;
    }
    25% {
        transform: translateY(25vh) rotate(45deg) translateX(30px);
    }
    50% {
        transform: translateY(50vh) rotate(90deg) translateX(-20px);
        opacity: 0.8;
    }
    75% {
        transform: translateY(75vh) rotate(135deg) translateX(25px);
    }
    95% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(110vh) rotate(200deg) translateX(-15px);
        opacity: 0;
    }
}

/* ========================================
   Leaf Color Themes
   ======================================== */
.enb-leaf-green .enb-leaf-shape    { fill: #52b788; }
.enb-leaf-green .enb-leaf-vein     { stroke: #2d6a4f; }

.enb-leaf-yellow .enb-leaf-shape   { fill: #f4d03f; }
.enb-leaf-yellow .enb-leaf-vein    { stroke: #b7950b; }

.enb-leaf-mixed .enb-leaf-shape    { fill: #52b788; }
.enb-leaf-mixed:nth-child(3n+1) .enb-leaf-shape { fill: #f4d03f; }
.enb-leaf-mixed:nth-child(3n+2) .enb-leaf-shape { fill: #95d5b2; }
.enb-leaf-mixed:nth-child(3n)   .enb-leaf-shape { fill: #74c69d; }

.enb-leaf-autumn .enb-leaf-shape   { fill: #e07b39; }
.enb-leaf-autumn:nth-child(2n) .enb-leaf-shape { fill: #c0392b; }
.enb-leaf-autumn:nth-child(3n) .enb-leaf-shape { fill: #e67e22; }

/* ========================================
   Eco Badge - Floating corner badge
   ======================================== */
#enb-eco-badge {
    position: fixed;
    bottom: 24px;
    left: 24px;
    z-index: var(--enb-z-badge);
    background: linear-gradient(135deg, var(--enb-green-dark), var(--enb-green-mid));
    color: var(--enb-white);
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: var(--enb-shadow);
    cursor: default;
    animation: enb-badge-bounce 3s ease-in-out infinite;
    letter-spacing: 0.4px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#enb-eco-badge:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 40px rgba(27,67,50,.25);
}

@keyframes enb-badge-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-6px); }
}

/* ========================================
   Ambient Sound Button
   ======================================== */
#enb-ambient-btn {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: var(--enb-z-badge);
    width: 44px;
    height: 44px;
    background: var(--enb-green-mid);
    color: var(--enb-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    box-shadow: var(--enb-shadow);
    transition: background 0.2s ease, transform 0.2s ease;
    user-select: none;
}

#enb-ambient-btn:hover {
    background: var(--enb-green-dark);
    transform: scale(1.1) rotate(10deg);
}

#enb-ambient-btn.enb-muted { background: #888; }

/* ========================================
   Cursor Trail
   ======================================== */
.enb-cursor-leaf {
    position: fixed;
    pointer-events: none;
    width: 16px;
    height: 20px;
    z-index: calc(var(--enb-z-badge) + 1);
    opacity: 0.7;
    transition: opacity 0.5s ease;
    animation: enb-cursor-spin 1.5s linear;
    transform-origin: center;
}

@keyframes enb-cursor-spin {
    from { transform: rotate(0deg) scale(1); opacity: 0.7; }
    to   { transform: rotate(360deg) scale(0); opacity: 0; }
}

/* ========================================
   Elementor Eco Hero Widget
   ======================================== */
.enb-hero-widget {
    position: relative;
    overflow: hidden;
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.enb-hero-leaves-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.enb-bg-leaf {
    position: absolute;
    display: block;
    animation: enb-hero-leaf-float ease-in-out infinite alternate;
}
.enb-bg-leaf svg { width: 100%; height: 100%; }
.enb-bg-leaf-1 { width:90px; height:120px; top:-20px; left:-20px; animation-duration:6s; animation-delay:0s; }
.enb-bg-leaf-2 { width:70px; height:90px; top:10%; right:-10px; animation-duration:8s; animation-delay:1s; }
.enb-bg-leaf-3 { width:110px; height:140px; bottom:-30px; left:10%; animation-duration:7s; animation-delay:2s; }
.enb-bg-leaf-4 { width:60px; height:80px; bottom:5%; right:15%; animation-duration:9s; animation-delay:0.5s; }
.enb-bg-leaf-5 { width:80px; height:100px; top:30%; left:5%; animation-duration:5s; animation-delay:3s; }
.enb-bg-leaf-6 { width:50px; height:65px; top:20%; right:25%; animation-duration:10s; animation-delay:1.5s; }

@keyframes enb-hero-leaf-float {
    from { transform: rotate(-10deg) scale(0.95); }
    to   { transform: rotate(10deg) scale(1.05); }
}

.enb-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 40px 20px;
    max-width: 600px;
}

.enb-hero-badge {
    display: inline-block;
    background: rgba(255,255,255,.2);
    color: #fff;
    padding: 6px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
    letter-spacing: 0.5px;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,.3);
}

.enb-hero-title {
    color: #fff;
    font-size: clamp(22px, 4vw, 38px);
    font-weight: 700;
    margin: 0 0 16px;
    line-height: 1.3;
    text-shadow: 0 2px 8px rgba(0,0,0,.15);
}

.enb-hero-subtitle {
    color: rgba(255,255,255,.88);
    font-size: clamp(14px, 2vw, 17px);
    line-height: 1.7;
    margin: 0 0 32px;
}

.enb-hero-btn {
    display: inline-block;
    background: rgba(255,255,255,.15);
    color: #fff;
    padding: 14px 34px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border: 2px solid rgba(255,255,255,.5);
    backdrop-filter: blur(8px);
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    letter-spacing: 0.3px;
}

.enb-hero-btn:hover {
    background: rgba(255,255,255,.28);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    color: #fff;
    text-decoration: none;
}

/* ========================================
   Elementor Eco Card Widget
   ======================================== */
.enb-eco-card {
    position: relative;
    background: var(--enb-card-bg, #d8f3dc);
    border: 2px solid var(--enb-card-border, #40916c);
    border-radius: var(--enb-radius);
    padding: 32px 28px;
    text-align: center;
    overflow: hidden;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
    box-shadow: 0 4px 20px rgba(0,0,0,.06);
}

.enb-eco-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
}

.enb-eco-card-icon {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
    animation: enb-icon-pulse 2.5s ease-in-out infinite;
}

@keyframes enb-icon-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.1) rotate(5deg); }
}

.enb-eco-card-title {
    color: var(--enb-card-accent, #1b4332);
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 10px;
}

.enb-eco-card-text {
    color: #444;
    font-size: 14px;
    line-height: 1.7;
    margin: 0;
}

.enb-eco-card-decoration {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    color: var(--enb-card-border, #40916c);
    pointer-events: none;
}

/* ========================================
   Reduced Motion - Accessibility
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .enb-leaf,
    .enb-bg-leaf,
    .enb-eco-card-icon,
    #enb-eco-badge {
        animation: none;
    }
    .enb-hero-btn,
    .enb-eco-card {
        transition: none;
    }
}

/* ========================================
   Print Styles - Leaves print mein na aayen
   ======================================== */
@media print {
    #enb-leaves-container,
    #enb-eco-badge,
    #enb-ambient-btn,
    #enb-cursor-trail {
        display: none;
    }
}