/* ============================================
   Global Animations & Interactive Effects
   Renewable Ergon - Enhanced UI/UX
   ============================================ */

/* ============================================
   CSS Custom Properties for Animations
   ============================================ */
:root {
    --animation-fast: 0.2s;
    --animation-normal: 0.3s;
    --animation-slow: 0.5s;
    --animation-slower: 0.8s;
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out-circ: cubic-bezier(0.85, 0, 0.15, 1);
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ============================================
   Scroll Reveal Animations
   ============================================ */

/* Base state for animated elements */
[data-animate] {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--animation-slower) var(--ease-out-expo),
                transform var(--animation-slower) var(--ease-out-expo);
}

[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade variations */
[data-animate="fade-up"] {
    transform: translateY(60px);
}

[data-animate="fade-down"] {
    transform: translateY(-60px);
}

[data-animate="fade-left"] {
    transform: translateX(60px);
}

[data-animate="fade-right"] {
    transform: translateX(-60px);
}

[data-animate="fade-up"].is-visible,
[data-animate="fade-down"].is-visible {
    transform: translateY(0);
}

[data-animate="fade-left"].is-visible,
[data-animate="fade-right"].is-visible {
    transform: translateX(0);
}

/* Scale animations */
[data-animate="zoom-in"] {
    transform: scale(0.85);
}

[data-animate="zoom-in"].is-visible {
    transform: scale(1);
}

[data-animate="zoom-out"] {
    transform: scale(1.15);
}

[data-animate="zoom-out"].is-visible {
    transform: scale(1);
}

/* Flip animations */
[data-animate="flip-up"] {
    transform: perspective(2500px) rotateX(-100deg);
    transform-origin: center bottom;
}

[data-animate="flip-up"].is-visible {
    transform: perspective(2500px) rotateX(0);
}

/* Stagger delays for child elements */
[data-animate-stagger] > *:nth-child(1) { transition-delay: 0.05s; }
[data-animate-stagger] > *:nth-child(2) { transition-delay: 0.1s; }
[data-animate-stagger] > *:nth-child(3) { transition-delay: 0.15s; }
[data-animate-stagger] > *:nth-child(4) { transition-delay: 0.2s; }
[data-animate-stagger] > *:nth-child(5) { transition-delay: 0.25s; }
[data-animate-stagger] > *:nth-child(6) { transition-delay: 0.3s; }
[data-animate-stagger] > *:nth-child(7) { transition-delay: 0.35s; }
[data-animate-stagger] > *:nth-child(8) { transition-delay: 0.4s; }

/* ============================================
   Hero Section Animations
   ============================================ */

/* Animated gradient background */
.hero-gradient-animate {
    background: linear-gradient(-45deg, #0a1628, #1a365d, #0d1f3c, #142850);
    background-size: 400% 400%;
    animation: gradientShift 15s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

/* Floating particles effect */
.floating-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.floating-particles::before,
.floating-particles::after {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(181, 244, 51, 0.1) 0%, transparent 70%);
    animation: float 20s ease-in-out infinite;
}

.floating-particles::before {
    top: 20%;
    left: 10%;
    animation-delay: -5s;
}

.floating-particles::after {
    bottom: 20%;
    right: 10%;
    width: 400px;
    height: 400px;
    animation-delay: -10s;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    33% {
        transform: translate(30px, -30px) rotate(120deg);
    }
    66% {
        transform: translate(-20px, 20px) rotate(240deg);
    }
}

/* Hero title animation */
.hero-title-animate {
    animation: heroTitleReveal 1s var(--ease-out-expo) forwards;
    animation-delay: 0.2s;
    opacity: 0;
    transform: translateY(30px);
}

@keyframes heroTitleReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero subtitle stagger */
.hero-subtitle-animate {
    animation: heroTitleReveal 1s var(--ease-out-expo) forwards;
    animation-delay: 0.4s;
    opacity: 0;
    transform: translateY(20px);
}

/* CTA buttons reveal */
.hero-ctas-animate {
    animation: heroTitleReveal 1s var(--ease-out-expo) forwards;
    animation-delay: 0.6s;
    opacity: 0;
    transform: translateY(20px);
}

/* Stats counter animation */
.stat-value-animate {
    animation: countUp 0.8s var(--ease-out-expo) forwards;
    animation-delay: 0.8s;
    opacity: 0;
}

@keyframes countUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   Button & CTA Animations
   ============================================ */

/* Primary button pulse glow */
.button.priamry,
.btn-fill {
    position: relative;
    overflow: hidden;
    transition: all var(--animation-normal) var(--ease-out-expo);
}

.button.priamry::before,
.btn-fill::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(45deg, #b5f433, #268226, #b5f433);
    background-size: 200% 200%;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    animation: gradientRotate 3s linear infinite;
    transition: opacity var(--animation-normal) ease;
}

@keyframes gradientRotate {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.button.priamry:hover::before,
.btn-fill:hover::before {
    opacity: 1;
}

/* Ripple effect on click */
.button-ripple {
    position: relative;
    overflow: hidden;
}

.button-ripple::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 60%);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    transition: transform 0.6s ease, opacity 0.6s ease;
}

.button-ripple:active::after {
    transform: translate(-50%, -50%) scale(2.5);
    opacity: 1;
    transition: 0s;
}

/* Arrow icon animation */
.button i,
.button img {
    transition: transform var(--animation-normal) var(--ease-out-back);
}

.button:hover i,
.button:hover img {
    transform: translateX(4px);
}

/* Magnetic button effect */
.button-magnetic {
    transition: transform var(--animation-fast) ease;
}

/* ============================================
   Card Hover Effects
   ============================================ */

/* Universal card lift effect */
.card-hover-lift {
    transition: transform var(--animation-normal) var(--ease-out-expo),
                box-shadow var(--animation-normal) var(--ease-out-expo);
}

.card-hover-lift:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
}

/* Card with glow border */
.card-glow {
    position: relative;
    transition: all var(--animation-normal) ease;
}

.card-glow::before {
    content: '';
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, transparent 40%, rgba(181, 244, 51, 0.4), transparent 60%);
    background-size: 200% 200%;
    border-radius: inherit;
    z-index: -1;
    opacity: 0;
    transition: opacity var(--animation-normal) ease;
}

.card-glow:hover::before {
    opacity: 1;
    animation: glowMove 2s linear infinite;
}

@keyframes glowMove {
    0% { background-position: 200% 200%; }
    100% { background-position: -200% -200%; }
}

/* Card tilt effect */
.card-tilt {
    transform-style: preserve-3d;
    transition: transform var(--animation-fast) ease;
}

/* Card image zoom */
.card-image-zoom {
    overflow: hidden;
}

.card-image-zoom img {
    transition: transform var(--animation-slow) var(--ease-out-expo);
}

.card-image-zoom:hover img {
    transform: scale(1.08);
}

/* Card content reveal */
.card-reveal-content {
    position: relative;
}

.card-reveal-content .card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    opacity: 0;
    transition: opacity var(--animation-normal) ease;
}

.card-reveal-content:hover .card-overlay {
    opacity: 1;
}

/* ============================================
   Team/Board Card Enhancements
   ============================================ */

.board-card,
.oversight-card,
.team-card {
    transition: all var(--animation-slow) var(--ease-out-expo);
}

.board-card:hover,
.team-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.oversight-card:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(181, 244, 51, 0.4);
}

/* Social icons pop */
.board-card-social a,
.oversight-social a,
.team-card-social a {
    transition: all var(--animation-normal) var(--ease-spring);
}

.board-card-social a:hover,
.oversight-social a:hover,
.team-card-social a:hover {
    transform: translateY(-4px) scale(1.1);
}

/* Image overlay gradient animation */
.board-card-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 60%);
    opacity: 0;
    transition: opacity var(--animation-normal) ease;
}

.board-card:hover .board-card-image::after {
    opacity: 1;
}

/* ============================================
   Section Transitions
   ============================================ */

/* Section divider wave */
.section-wave {
    position: relative;
}

.section-wave::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 80px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80'%3E%3Cpath fill='%23ffffff' d='M0,48L60,42.7C120,37,240,27,360,32C480,37,600,59,720,64C840,69,960,59,1080,48C1200,37,1320,27,1380,21.3L1440,16L1440,80L0,80Z'/%3E%3C/svg%3E") no-repeat center bottom;
    background-size: cover;
}

/* Parallax scroll effect */
.parallax-slow {
    transform: translateZ(0);
    will-change: transform;
}

/* ============================================
   Accordion Animations
   ============================================ */

.acc-item,
.stack-item,
.faq-acc-item,
.faq-po-item {
    transition: all var(--animation-normal) ease;
}

.acc-item:hover,
.stack-item:hover,
.faq-acc-item:hover,
.faq-po-item:hover {
    transform: translateX(4px);
    border-color: rgba(181, 244, 51, 0.5);
}

.acc-panel,
.stack-content,
.faq-acc-content,
.faq-po-content {
    transition: max-height var(--animation-slow) var(--ease-out-expo),
                padding var(--animation-slow) var(--ease-out-expo),
                opacity var(--animation-normal) ease;
}

/* ============================================
   Navigation & Header
   ============================================ */

/* Header styles moved to header-new.css */

/* Nav link underline animation - disabled for pill-style nav */
/*
.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width var(--animation-normal) var(--ease-out-expo),
                left var(--animation-normal) var(--ease-out-expo);
}

.nav-link:hover::after {
    width: 100%;
    left: 0;
}
*/

/* Dropdown menu animation */
.has-mega .mega {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity var(--animation-normal) ease,
                transform var(--animation-normal) var(--ease-out-expo),
                display var(--animation-normal) allow-discrete;
}

.has-mega.open .mega {
    opacity: 1;
    transform: translateY(0);
}

/* ============================================
   Footer Animations
   ============================================ */

.footer-links a {
    transition: all var(--animation-normal) ease;
}

.footer-links a:hover {
    transform: translateX(8px);
    color: var(--color-primary) !important;
}

.footer-social .social {
    transition: all var(--animation-normal) var(--ease-spring);
}

.footer-social .social:hover {
    transform: translateY(-4px) scale(1.1);
    box-shadow: 0 8px 20px rgba(181, 244, 51, 0.3);
}

/* ============================================
   Modal Animations
   ============================================ */

.bio-modal {
    transition: opacity var(--animation-normal) ease,
                visibility var(--animation-normal) ease;
}

.bio-modal-content {
    transition: transform var(--animation-slow) var(--ease-out-expo),
                opacity var(--animation-normal) ease;
}

.bio-modal.active .bio-modal-content {
    animation: modalSlideIn 0.5s var(--ease-out-expo) forwards;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ============================================
   Stats Counter Animation
   ============================================ */

.stat-animate .stat-value {
    display: inline-block;
}

/* ============================================
   Form Input Animations
   ============================================ */

input,
textarea,
select {
    transition: all var(--animation-normal) ease;
}

input:focus,
textarea:focus,
select:focus {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(181, 244, 51, 0.15);
}

/* ============================================
   Loading States
   ============================================ */

.skeleton-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s infinite;
}

@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   Smooth Scroll
   ============================================ */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   Utility Animation Classes
   ============================================ */

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.animate-bounce {
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-ping {
    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
    75%, 100% {
        transform: scale(2);
        opacity: 0;
    }
}

/* Fade in on scroll utility */
.fade-in-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Scale in animation */
.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.5s ease, transform 0.5s var(--ease-spring);
}

.scale-in.visible {
    opacity: 1;
    transform: scale(1);
}

/* Slide in from sides */
.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.6s ease, transform 0.6s var(--ease-out-expo);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.6s ease, transform 0.6s var(--ease-out-expo);
}

.slide-in-left.visible,
.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* ============================================
   Interactive Cursor Effects
   ============================================ */

.cursor-pointer-grow {
    cursor: pointer;
    transition: transform var(--animation-fast) ease;
}

.cursor-pointer-grow:active {
    transform: scale(0.97);
}

/* ============================================
   Gradient Text Animation
   ============================================ */

.gradient-text-animate {
    background: linear-gradient(90deg, #b5f433, #268226, #b5f433);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradientText 3s linear infinite;
}

@keyframes gradientText {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* ============================================
   Value Cards Hover States
   ============================================ */

.value-card,
.wc-card,
.hiw-card {
    transition: all var(--animation-slow) var(--ease-out-expo);
}

.value-card:hover,
.wc-card:hover,
.hiw-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

.value-icon,
.wc-icon,
.hiw-icon {
    transition: all var(--animation-normal) var(--ease-spring);
}

.value-card:hover .value-icon,
.wc-card:hover .wc-icon,
.hiw-card:hover .hiw-icon {
    transform: scale(1.1) rotate(5deg);
}

/* ============================================
   Project Cards
   ============================================ */

.project-card {
    transition: all var(--animation-slow) var(--ease-out-expo);
}

.project-card:hover {
    transform: translateY(-12px);
}

.project-card:hover .project-media img {
    transform: scale(1.05);
}

.project-media img {
    transition: transform var(--animation-slow) var(--ease-out-expo);
}

.project-body {
    transition: all var(--animation-normal) ease;
}

.project-card:hover .project-body {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

/* ============================================
   CTA Section Animations
   ============================================ */

.upper-footer,
.join-cta-section,
.final-cta {
    position: relative;
    overflow: hidden;
}

.upper-footer::before,
.join-cta-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
    animation: floatBubble 15s ease-in-out infinite;
}

@keyframes floatBubble {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-50px, 50px); }
}

/* ============================================
   Chart/Graph Animations
   ============================================ */

.hp-graph svg rect,
.cr-chart .bars span {
    animation: barGrow 1s var(--ease-out-expo) forwards;
    transform-origin: bottom;
    transform: scaleY(0);
}

@keyframes barGrow {
    to { transform: scaleY(1); }
}

/* Staggered bar animation */
.hp-graph svg rect:nth-child(1) { animation-delay: 0.1s; }
.hp-graph svg rect:nth-child(2) { animation-delay: 0.2s; }
.hp-graph svg rect:nth-child(3) { animation-delay: 0.3s; }
.hp-graph svg rect:nth-child(4) { animation-delay: 0.4s; }
.hp-graph svg rect:nth-child(5) { animation-delay: 0.5s; }
.hp-graph svg rect:nth-child(6) { animation-delay: 0.6s; }
.hp-graph svg rect:nth-child(7) { animation-delay: 0.7s; }
.hp-graph svg rect:nth-child(8) { animation-delay: 0.8s; }
.hp-graph svg rect:nth-child(9) { animation-delay: 0.9s; }