/* ================================================================
   Terai Roots — Advanced Visual Effects (effects.css)
   Glassmorphism · Gradient mesh · Animated borders ·
   Scroll reveals · Botanical stroke draw · Gradient text · Waves
   Tokens come from main.css (:root)
   ================================================================ */

/* ============================================================
   1. GRADIENT MESH BACKGROUNDS
   ============================================================ */
.mesh-bg {
    background:
        radial-gradient(ellipse 60% 60% at 15% 15%, var(--mesh-green), transparent),
        radial-gradient(ellipse 50% 50% at 85% 85%, var(--mesh-amber), transparent),
        radial-gradient(ellipse 40% 40% at 65% 20%, var(--mesh-forest), transparent),
        var(--bg-body);
}
.mesh-bg-alt {
    background:
        radial-gradient(ellipse 60% 50% at 20% 30%, var(--mesh-amber), transparent),
        radial-gradient(ellipse 50% 60% at 80% 70%, var(--mesh-green), transparent),
        var(--bg-alt);
}
.mesh-bg-animated {
    background:
        radial-gradient(ellipse 60% 60% at 15% 15%, var(--mesh-green), transparent),
        radial-gradient(ellipse 50% 50% at 85% 85%, var(--mesh-amber), transparent),
        radial-gradient(ellipse 40% 40% at 65% 20%, var(--mesh-forest), transparent),
        var(--bg-body);
    animation: meshShift 14s ease-in-out infinite alternate;
}
@keyframes meshShift {
    0%   { background-position: 0% 0%,   100% 100%, 65% 20%; }
    50%  { background-position: 20% 20%, 70% 70%,  80% 10%; }
    100% { background-position: 5% 30%,  90% 80%,  55% 30%; }
}

/* ============================================================
   2. GLASSMORPHISM HELPERS
   ============================================================ */
.glass {
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255,255,255,.35);
    box-shadow: 0 8px 32px rgba(0,0,0,.08), inset 0 1px 0 rgba(255,255,255,.5);
}
.glass-dark {
    background: rgba(5,46,22,.4);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 8px 32px rgba(0,0,0,.24);
}
.glass-card {
    background: var(--glass-bg);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: 0 4px 24px rgba(31,69,54,.08), inset 0 1px 0 rgba(255,255,255,.9);
}

/* ============================================================
   3. ANIMATED GRADIENT BORDERS
   ============================================================ */
.grad-border { position: relative; z-index: 0; }
.grad-border::before {
    content: ''; position: absolute; inset: -2px; border-radius: inherit; padding: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-accent), var(--color-secondary), var(--color-primary));
    background-size: 300% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
    animation: gradBorderSpin 4s linear infinite; z-index: -1;
}
@keyframes gradBorderSpin { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

/* ============================================================
   4. SCROLL-DRIVEN REVEAL (JS + native fallback)
   ============================================================ */
.reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-left  { transform: translateX(-36px); }
.reveal-right { transform: translateX(36px);  }
.reveal-scale { transform: scale(.92);        }
.reveal-left.revealed, .reveal-right.revealed { transform: translateX(0); }
.reveal-scale.revealed { transform: scale(1); }

.animate-delay-1 { transition-delay: .10s; }
.animate-delay-2 { transition-delay: .20s; }
.animate-delay-3 { transition-delay: .30s; }
.animate-delay-4 { transition-delay: .40s; }
.animate-delay-5 { transition-delay: .50s; }

@supports (animation-timeline: view()) {
    .scroll-fade-up {
        animation: scrollRevealUp linear both;
        animation-timeline: view(); animation-range: entry 0% entry 60%;
    }
    @keyframes scrollRevealUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
}

/* Image wipe reveal */
.svg-mask-reveal { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s cubic-bezier(.22,1,.36,1); }
.svg-mask-reveal.revealed { clip-path: inset(0 0% 0 0); }

/* ============================================================
   5. SVG BOTANICAL STROKE DRAW
   ============================================================ */
.botanical-svg { position: absolute; pointer-events: none; opacity: 0; transition: opacity .5s ease .3s; }
.botanical-svg.visible { opacity: 1; }
.botanical-svg .draw-path {
    stroke-dasharray: 1200; stroke-dashoffset: 1200;
    animation: strokeDraw 3s cubic-bezier(.5,0,.5,1) forwards; animation-play-state: paused;
}
.botanical-svg.visible .draw-path { animation-play-state: running; }
.botanical-svg .draw-path:nth-child(2) { animation-delay: .4s; }
.botanical-svg .draw-path:nth-child(3) { animation-delay: .8s; }
.botanical-svg .draw-path:nth-child(4) { animation-delay: 1.2s; }
.botanical-svg .draw-path:nth-child(5) { animation-delay: 1.6s; }
@keyframes strokeDraw { to { stroke-dashoffset: 0; } }

/* ============================================================
   6. MICRO-INTERACTIONS
   ============================================================ */
.shine-hover { position: relative; overflow: hidden; }
.shine-hover::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.25) 50%, transparent 60%);
    transition: left .5s ease; pointer-events: none;
}
.shine-hover:hover::after { left: 150%; }

.card-float { transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease; }
.card-float:hover { transform: translateY(-8px) rotate(-.3deg); box-shadow: var(--shadow-lg); }

.feature-icon-pulse { animation: iconPulse 3s ease-in-out infinite; }
@keyframes iconPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(31,69,54,.3); } 50% { box-shadow: 0 0 0 12px rgba(31,69,54,0); } }

.float-badge { animation: floatBadge 4s ease-in-out infinite; }
@keyframes floatBadge { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

.count-up { display: inline-block; }

/* ============================================================
   7. GRADIENT TEXT
   ============================================================ */
.gradient-text {
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.gradient-text-warm {
    background: linear-gradient(135deg, var(--color-secondary), var(--color-accent));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ============================================================
   8. REVEAL FALLBACK — guarantee content shows if JS fails
   ============================================================ */
.no-js .reveal, .no-js .svg-mask-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; }