/* ===============================================
 MODERN ANIMATIONS & UI ENHANCEMENTS
 Midas Portal - Public Website
 =============================================== */

/* === SMOOTH SCROLLING === */
html{
 scroll-behavior:smooth;
}

/* === KEYFRAME ANIMATIONS === */

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

@keyframes fadeInDown{
 from{
 opacity:0;
 transform:translateY(-30px);
 }
 to{
 opacity:1;
 transform:translateY(0);
 }
}

@keyframes fadeIn{
 from{
 opacity:0;
 }
 to{
 opacity:1;
 }
}

@keyframes slideInLeft{
 from{
 opacity:0;
 transform:translateX(-50px);
 }
 to{
 opacity:1;
 transform:translateX(0);
 }
}

@keyframes slideInRight{
 from{
 opacity:0;
 transform:translateX(50px);
 }
 to{
 opacity:1;
 transform:translateX(0);
 }
}

@keyframes scaleIn{
 from{
 opacity:0;
 transform:scale(0.9);
 }
 to{
 opacity:1;
 transform:scale(1);
 }
}

@keyframes pulse{
 0%, 100%{
 transform:scale(1);
 }
 50%{
 transform:scale(1.05);
 }
}

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

@keyframes shimmer{
 0%{
 background-position:-1000px 0;
 }
 100%{
 background-position:1000px 0;
 }
}

@keyframes float{
 0%, 100%{
 transform:translateY(0px);
 }
 50%{
 transform:translateY(-20px);
 }
}

@keyframes glow{
 0%, 100%{
 box-shadow:0 0 5px rgba(23, 182, 182, 0.5);
 }
 50%{
 box-shadow:0 0 20px rgba(23, 182, 182, 0.8), 0 0 30px rgba(23, 182, 182, 0.6);
 }
}

/* === ANIMATION UTILITY CLASSES === */

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

.animate-fade-in-down{
 animation:fadeInDown 0.6s ease-out forwards;
}

.animate-fade-in{
 animation:fadeIn 0.8s ease-out forwards;
}

.animate-slide-in-left{
 animation:slideInLeft 0.6s ease-out forwards;
}

.animate-slide-in-right{
 animation:slideInRight 0.6s ease-out forwards;
}

.animate-scale-in{
 animation:scaleIn 0.5s ease-out forwards;
}

.animate-pulse{
 animation:pulse 2s ease-in-out infinite;
}

.animate-bounce{
 animation:bounce 2s ease-in-out infinite;
}

.animate-float{
 animation:float 3s ease-in-out infinite;
}

.animate-glow{
 animation:glow 2s ease-in-out infinite;
}

/* Animation delays */
.delay-100{ animation-delay:0.1s;}
.delay-200{ animation-delay:0.2s;}
.delay-300{ animation-delay:0.3s;}
.delay-400{ animation-delay:0.4s;}
.delay-500{ animation-delay:0.5s;}
.delay-600{ animation-delay:0.6s;}
.delay-700{ animation-delay:0.7s;}
.delay-800{ animation-delay:0.8s;}

/* === HOVER EFFECTS === */

.hover-lift{
 transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hover-lift:hover{
 transform:translateY(-8px);
 box-shadow:0 20px 40px rgba(0, 0, 0, 0.15) !important;
}

.hover-scale{
 transition:transform 0.3s ease;
}

.hover-scale:hover{
 transform:scale(1.05);
}

.hover-glow{
 transition:all 0.3s ease;
}

.hover-glow:hover{
 box-shadow:0 0 20px rgba(23, 182, 182, 0.4), 0 0 40px rgba(23, 182, 182, 0.2);
}

.hover-shine{
 position:relative;
 overflow:hidden;
}

.hover-shine::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;
}

.hover-shine:hover::before{
 left:100%;
}

.hover-shadow{
 transition:box-shadow 0.3s ease;
}

.hover-shadow:hover{
 box-shadow:0 10px 30px rgba(0, 0, 0, 0.2);
}

/* === GRADIENT BACKGROUNDS === */

.gradient-primary{
 background:linear-gradient(135deg, #17b6b6 0%, #13918e 100%);
}

.gradient-success{
 background:linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.gradient-purple{
 background:linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.gradient-orange{
 background:linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.gradient-animated{
 background:linear-gradient(-45deg, #17b6b6, #13918e, #4dd4d4, #17b6b6);
 background-size:400% 400%;
 animation:gradientShift 15s ease infinite;
}

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

/* === GLASSMORPHISM === */

.glass-card{
 background:rgba(255, 255, 255, 0.1);
 backdrop-filter:blur(10px);
 -webkit-backdrop-filter:blur(10px);
 border:1px solid rgba(255, 255, 255, 0.2);
 box-shadow:0 8px 32px rgba(0, 0, 0, 0.1);
}

.glass-card-dark{
 background:rgba(0, 0, 0, 0.2);
 backdrop-filter:blur(10px);
 -webkit-backdrop-filter:blur(10px);
 border:1px solid rgba(255, 255, 255, 0.1);
}

/* === MODERN CARDS === */

.modern-card{
 background:white;
 border-radius:20px;
 padding:2rem;
 box-shadow:0 4px 6px rgba(0, 0, 0, 0.07);
 transition:all 0.3s ease;
 border:1px solid rgba(0, 0, 0, 0.05);
}

.modern-card:hover{
 transform:translateY(-5px);
 box-shadow:0 12px 24px rgba(0, 0, 0, 0.12);
}

.modern-card-gradient{
 position:relative;
 overflow:hidden;
}

.modern-card-gradient::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:4px;
 background:linear-gradient(90deg, #17b6b6, #4dd4d4, #17b6b6);
}

/* === ENHANCED BUTTONS === */

.btn-modern{
 position:relative;
 padding:14px 32px;
 font-weight:600;
 border-radius:12px;
 transition:all 0.3s ease;
 overflow:hidden;
 border:none;
 box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn-modern::before{
 content:'';
 position:absolute;
 top:50%;
 left:50%;
 width:0;
 height:0;
 border-radius:50%;
 background:rgba(255, 255, 255, 0.2);
 transform:translate(-50%, -50%);
 transition:width 0.6s, height 0.6s;
}

.btn-modern:hover::before{
 width:300px;
 height:300px;
}

.btn-modern:hover{
 transform:translateY(-2px);
 box-shadow:0 8px 20px rgba(0, 0, 0, 0.2);
}

.btn-modern:active{
 transform:translateY(0);
}

.btn-gradient{
 background:linear-gradient(135deg, #17b6b6 0%, #13918e 100%);
 color:white;
 border:none;
}

.btn-gradient:hover{
 background:linear-gradient(135deg, #13918e 0%, #0f706e 100%);
 color:white;
}

.btn-outline-modern{
 background:transparent;
 border:2px solid currentColor;
 position:relative;
 overflow:hidden;
 transition:all 0.3s ease;
}

.btn-outline-modern::before{
 content:'';
 position:absolute;
 top:0;
 left:-100%;
 width:100%;
 height:100%;
 background:currentColor;
 transition:left 0.3s ease;
 z-index:-1;
}

.btn-outline-modern:hover::before{
 left:0;
}

.btn-outline-modern:hover{
 color:white !important;
}

/* === SECTION STYLING === */

.section-modern{
 padding:100px 0;
 position:relative;
 overflow:hidden;
}

.section-header{
 text-align:center;
 margin-bottom:60px;
}

.section-header h2{
 font-size:3rem;
 font-weight:800;
 margin-bottom:1rem;
 color:#2d3748;
}

.section-header p{
 font-size:1.125rem;
 color:#4a5568;
 max-width:700px;
 margin:0 auto;
 line-height:1.8;
}

/* === BACKGROUND PATTERNS === */

.bg-pattern-dots{
 background-image:radial-gradient(circle, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
 background-size:20px 20px;
}

.bg-pattern-grid{
 background-image:
 linear-gradient(rgba(0, 0, 0, 0.03) 1px, transparent 1px),
 linear-gradient(90deg, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
 background-size:40px 40px;
}

/* === ICON CONTAINERS === */

.icon-box{
 width:80px;
 height:80px;
 border-radius:20px;
 display:flex !important;
 align-items:center;
 justify-content:center;
 font-size:2rem;
 margin-bottom:1.5rem;
 position:relative;
 transition:all 0.3s ease;
 flex-shrink:0;
}

.icon-box i{
 display:block;
 line-height:1;
}

.icon-box::before{
 content:'';
 position:absolute;
 inset:-3px;
 border-radius:20px;
 background:linear-gradient(135deg, #17b6b6, #13918e);
 opacity:0;
 transition:opacity 0.3s ease;
 z-index:0;
}

.icon-box:hover::before{
 opacity:1;
}

.icon-box:hover{
 transform:scale(1.1) rotate(5deg);
}

/* === LOADING SPINNER === */

.loading-spinner{
 width:50px;
 height:50px;
 border:4px solid rgba(23, 182, 182, 0.1);
 border-top-color:#17b6b6;
 border-radius:50%;
 animation:spin 1s linear infinite;
}

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

/* === PROGRESS BARS === */

.progress-modern{
 height:8px;
 border-radius:10px;
 background:rgba(23, 182, 182, 0.1);
 overflow:hidden;
}

.progress-modern-bar{
 height:100%;
 background:linear-gradient(90deg, #17b6b6, #13918e);
 border-radius:10px;
 transition:width 0.6s ease;
}

/* === TESTIMONIAL CARDS === */

.testimonial-card{
 background:white;
 padding:2rem;
 border-radius:20px;
 box-shadow:0 4px 20px rgba(0, 0, 0, 0.08);
 position:relative;
 transition:all 0.3s ease;
}

.testimonial-card::before{
 content:'"';
 position:absolute;
 top:-20px;
 left:20px;
 font-size:100px;
 color:rgba(23, 182, 182, 0.1);
 font-family:Georgia, serif;
 line-height:1;
}

.testimonial-card:hover{
 transform:translateY(-5px);
 box-shadow:0 8px 30px rgba(0, 0, 0, 0.12);
}

/* === BADGES === */

.badge-modern{
 padding:8px 16px;
 border-radius:20px;
 font-weight:600;
 font-size:0.875rem;
 display:inline-flex;
 align-items:center;
 gap:6px;
}

.badge-gradient{
 background:linear-gradient(135deg, #17b6b6, #13918e);
 color:white;
}

/* === RESPONSIVE IMPROVEMENTS === */

@media (max-width:768px){
 .section-modern{
 padding:60px 0;
 }

 .section-header h2{
 font-size:2rem;
 }

 .section-header p{
 font-size:1rem;
 }

 .icon-box{
 width:60px;
 height:60px;
 font-size:1.5rem;
 }
}

/* === SCROLL REVEAL === */

.scroll-reveal{
 opacity:0;
 transform:translateY(30px);
 transition:all 0.6s ease;
}

.scroll-reveal.revealed{
 opacity:1;
 transform:translateY(0);
}

/* === IMAGE OVERLAYS === */

.image-overlay{
 position:relative;
 overflow:hidden;
}

.image-overlay::after{
 content:'';
 position:absolute;
 inset:0;
 background:linear-gradient(135deg, rgba(23, 182, 182, 0.8), rgba(19, 145, 142, 0.8));
 opacity:0;
 transition:opacity 0.3s ease;
}

.image-overlay:hover::after{
 opacity:1;
}

/* === STATS COUNTERS === */

.stat-number{
 font-size:3rem;
 font-weight:800;
 color:white;
}

/* === FEATURE GRID === */

.feature-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
 gap:2rem;
}

/* === CALL TO ACTION === */

.cta-modern{
 background:linear-gradient(135deg, #17b6b6 0%, #13918e 100%);
 padding:80px 0;
 position:relative;
 overflow:hidden;
}

.cta-modern::before{
 content:'';
 position:absolute;
 top:10%;
 right:10%;
 width:80px;
 height:80px;
 background:rgba(255, 255, 255, 0.1);
 border-radius:50%;
 animation:float 6s ease-in-out infinite;
}

.cta-modern::after{
 content:'';
 position:absolute;
 bottom:15%;
 left:8%;
 width:60px;
 height:60px;
 background:rgba(255, 255, 255, 0.1);
 border-radius:50%;
 animation:float 8s ease-in-out infinite;
}

/* === HERO SECTION === */
.hero-section{
 background:linear-gradient(135deg, #17b6b6 0%, #13918e 100%);
 padding:80px 0;
}