/* ============================================
   3D SPATIAL EXPERIENCE - ENHANCED STYLES
   Fixed: Content visible by default
   ============================================ */

/* Particle Canvas */
#particles{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1;opacity:0.5;}

/* Hero Reveal */
.hero-reveal{position:absolute;right:5%;top:50%;transform:translateY(-50%);width:180px;height:280px;overflow:hidden;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,0.15);z-index:2;}
.reveal-before,.reveal-after{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#f8fafc,#e2e8f0);}
.reveal-before svg,.reveal-after svg{width:140px;height:210px;}
.reveal-after{clip-path:inset(0 100% 0 0);transition:clip-path 0.1s ease-out;}
.reveal-slider{position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(to bottom,#10b981,#34d399);cursor:ew-resize;box-shadow:0 0 20px rgba(16,185,129,0.5);}
.reveal-slider::before{content:'↔';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:36px;height:36px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 4px 15px rgba(0,0,0,0.2);}
@media(max-width:1200px){.hero-reveal{display:none;}}

/* Floating Assets */
@keyframes floaty{0%,100%{transform:translateY(0) rotate(0deg);}25%{transform:translateY(-15px) rotate(3deg);}50%{transform:translateY(-8px) rotate(0deg);}75%{transform:translateY(-20px) rotate(-3deg);}}
.float-asset{will-change:transform;}

/* Progress Bar */
.progress-wrap{position:fixed;left:15px;top:50%;transform:translateY(-50%);z-index:1000;display:flex;flex-direction:column;align-items:center;gap:12px;}
.progress-bar{width:5px;height:180px;background:rgba(0,0,0,0.08);border-radius:3px;overflow:hidden;}
.progress-fill{width:100%;height:0%;background:linear-gradient(to bottom,#10b981,#34d399,#059669);border-radius:3px;transition:height 0.1s ease-out;box-shadow:0 0 8px rgba(16,185,129,0.4);}
.badges{display:flex;flex-direction:column;gap:8px;}
.badge{width:36px;height:36px;background:white;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 4px 12px rgba(0,0,0,0.1);cursor:pointer;transition:all 0.3s ease;border:2px solid transparent;opacity:0.5;}
.badge:hover{transform:scale(1.15);box-shadow:0 6px 18px rgba(16,185,129,0.25);}
.badge.active{border-color:#10b981;opacity:1;animation:badgeGlow 2s ease-in-out infinite;}
@keyframes badgeGlow{0%,100%{box-shadow:0 0 5px rgba(16,185,129,0.4);}50%{box-shadow:0 0 15px rgba(16,185,129,0.7);}}
@media(max-width:768px){.progress-wrap{display:none;}}

/* Ripple Effect */
@keyframes ripple{to{transform:scale(25);opacity:0;}}

/* Light Rays */
.light-rays{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.l-ray{position:absolute;width:200%;height:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);opacity:0;}
.l1{top:35%;left:-50%;transform:rotate(-10deg);}.l2{top:65%;left:-50%;transform:rotate(8deg);}
section.in-view .l1{animation:raySweep 2.5s ease-out 0.3s;}
section.in-view .l2{animation:raySweep 2.5s ease-out 0.6s;}
@keyframes raySweep{0%{transform:translateX(-100%) rotate(var(--r,0deg));opacity:0;}20%{opacity:0.5;}80%{opacity:0.2;}100%{transform:translateX(100%) rotate(var(--r,0deg));opacity:0;}}

/* Glassmorphism Cards */
.glass-card{background:rgba(255,255,255,0.85)!important;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,0.5)!important;box-shadow:0 10px 40px rgba(0,0,0,0.08),0 2px 8px rgba(0,0,0,0.04),inset 0 1px 0 rgba(255,255,255,0.8)!important;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);transform-style:preserve-3d;}
.glass-card:hover{box-shadow:0 25px 60px rgba(0,0,0,0.12),0 10px 20px rgba(0,0,0,0.08),inset 0 1px 0 rgba(255,255,255,0.9)!important;border-color:rgba(16,185,129,0.3)!important;}

/* Living Core */
.living-core{position:absolute;left:8%;top:50%;transform:translateY(-50%);width:120px;height:120px;z-index:0;}
.core-orb{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:50px;height:50px;background:radial-gradient(circle at 30% 30%,#34d399,#10b981,#059669);border-radius:50%;box-shadow:0 0 30px rgba(16,185,129,0.6),0 0 60px rgba(16,185,129,0.4),inset -8px -8px 16px rgba(0,0,0,0.2);animation:corePulse 2.5s ease-in-out infinite;}
.core-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:2px solid;border-radius:50%;opacity:0.3;}
.r1{width:80px;height:80px;border-color:rgba(16,185,129,0.5);animation:ringExpand 2.5s ease-out infinite;}
.r2{width:110px;height:110px;border-color:rgba(52,211,153,0.3);animation:ringExpand 2.5s ease-out infinite 0.8s;}
.r3{width:140px;height:140px;border-color:rgba(245,158,11,0.2);animation:ringExpand 2.5s ease-out infinite 1.6s;}
@keyframes corePulse{0%,100%{transform:translate(-50%,-50%) scale(1);box-shadow:0 0 30px rgba(16,185,129,0.6),0 0 60px rgba(16,185,129,0.4);}50%{transform:translate(-50%,-50%) scale(1.1);box-shadow:0 0 45px rgba(16,185,129,0.8),0 0 90px rgba(16,185,129,0.5);}}
@keyframes ringExpand{0%{transform:translate(-50%,-50%) scale(0.8);opacity:0.5;}100%{transform:translate(-50%,-50%) scale(1.4);opacity:0;}}
@media(max-width:1200px){.living-core{display:none;}}

/* Volumetric Light */
.vol-light{position:fixed;width:350px;height:350px;background:radial-gradient(circle,rgba(16,185,129,0.12) 0%,transparent 70%);border-radius:50%;pointer-events:none;z-index:0;transition:all 0.3s ease-out;filter:blur(30px);}

/* Chat Bubble */
.chat-3d{position:fixed;right:25px;bottom:90px;z-index:10000;}
.chat-btn{width:55px;height:55px;background:linear-gradient(135deg,#10b981,#059669);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer;box-shadow:0 8px 25px rgba(16,185,129,0.4),0 0 0 3px rgba(255,255,255,0.2),inset 0 -4px 8px rgba(0,0,0,0.1);transition:all 0.3s ease;animation:chatFloat 3s ease-in-out infinite;}
.chat-btn:hover{transform:scale(1.1) translateY(-4px);box-shadow:0 12px 35px rgba(16,185,129,0.5),0 0 0 3px rgba(255,255,255,0.3);}
.chat-panel{position:absolute;right:0;bottom:70px;width:300px;height:380px;background:white;border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,0.2),0 0 0 1px rgba(0,0,0,0.05);transform:scale(0) translateY(15px);transform-origin:bottom right;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);overflow:hidden;opacity:0;}
.chat-panel.open{transform:scale(1) translateY(0);opacity:1;}
.chat-h{background:linear-gradient(135deg,#10b981,#059669);color:white;padding:12px 18px;display:flex;justify-content:space-between;align-items:center;font-weight:600;}
.chat-x{background:none;border:none;color:white;font-size:22px;cursor:pointer;line-height:1;}
.chat-m{padding:18px;height:260px;overflow-y:auto;}
.chat-msg{background:#f1f5f9;padding:10px 14px;border-radius:14px;margin-bottom:8px;font-size:13px;max-width:85%;line-height:1.5;}
.chat-msg.bot{background:linear-gradient(135deg,#f0fdf4,#dcfce7);border-bottom-left-radius:4px;}
.chat-i{display:flex;padding:12px;border-top:1px solid #e2e8f0;gap:8px;}
.chat-i input{flex:1;padding:8px 14px;border:1px solid #e2e8f0;border-radius:18px;outline:none;font-size:13px;}
.chat-i button{padding:8px 16px;background:#10b981;color:white;border:none;border-radius:18px;cursor:pointer;font-size:13px;font-weight:600;}
@keyframes chatFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-8px);}}
@media(max-width:768px){.chat-3d{right:12px;bottom:75px;}.chat-panel{width:calc(100vw - 24px);right:-12px;}}

/* Enhanced Button Effects */
.btn,.hero-cta,.btn-product-cta{position:relative;overflow:hidden;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);}
.btn::before,.hero-cta::before,.btn-product-cta::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transition:left 0.5s ease;}
.btn:hover::before,.hero-cta:hover::before,.btn-product-cta:hover::before{left:100%;}
.btn:hover,.hero-cta:hover,.btn-product-cta:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(16,185,129,0.4);}
.btn:active,.hero-cta:active,.btn-product-cta:active{transform:translateY(-1px) scale(0.98);}

/* Card Hover Enhancements */
.pillar-card,.problem-card,.testimonial-card,.product-pillar-card{transition:all 0.4s cubic-bezier(0.4,0,0.2,1);}
.pillar-card:hover,.problem-card:hover,.testimonial-card:hover{transform:translateY(-10px);}

/* FIXED: Section Transitions - Content visible by default */
section{opacity:1;transform:translateY(0);transition:all 0.8s cubic-bezier(0.4,0,0.2,1);}
section.animate-on-scroll{opacity:0;transform:translateY(30px);}
section.animate-on-scroll.visible{opacity:1;transform:translateY(0);}

/* Stats Counter Animation */
.stat-number{font-variant-numeric:tabular-nums;}

/* Enhanced Scrollbar */
::-webkit-scrollbar{width:8px;}
::-webkit-scrollbar-track{background:#f1f5f9;}
::-webkit-scrollbar-thumb{background:linear-gradient(to bottom,#10b981,#059669);border-radius:4px;}
::-webkit-scrollbar-thumb:hover{background:#059669;}

/* Selection Color */
::selection{background:rgba(16,185,129,0.25);color:#0f172a;}

/* Focus States */
a:focus,button:focus,input:focus{outline:2px solid rgba(16,185,129,0.5);outline-offset:2px;}

/* Reduced Motion */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;}}

/* ============================================
   ENHANCED ANIMATIONS
   ============================================ */

/* Fade In Up Animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in-up { animation: fadeInUp 0.8s ease-out forwards; }

/* Fade In Left/Right */
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}
.fade-in-left { animation: fadeInLeft 0.8s ease-out forwards; }
.fade-in-right { animation: fadeInRight 0.8s ease-out forwards; }

/* Scale In Animation */
@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}
.scale-in { animation: scaleIn 0.6s ease-out forwards; }

/* Stagger Animation Delays */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }

/* Pulse Glow Animation */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 40px rgba(16, 185, 129, 0.7); }
}
.pulse-glow { animation: pulseGlow 2s ease-in-out infinite; }

/* Shimmer Effect */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.shimmer {
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

/* Bounce Animation */
@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.bounce { animation: bounce 2s ease-in-out infinite; }

/* Rotate Animation */
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.rotate-slow { animation: rotate 20s linear infinite; }

/* Gradient Border Animation */
@keyframes gradientBorder {
    0%, 100% { border-color: #10b981; }
    50% { border-color: #f59e0b; }
}
.gradient-border { animation: gradientBorder 3s ease-in-out infinite; }