/*
  main.css: Project custom styles for Alta-invest
  - Contains all custom CSS for layout, effects, and components
  - Used by index.html (see <link rel="stylesheet" href="main.css">)
  - Tailwind CSS is loaded via CDN for utility classes
*/

/* Custom: preserve 16:9 aspect ratio for charts */
.aspect-16\/9 {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 9 / 16 = 0.5625 */
}
.aspect-16\/9 > canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

:root {
  --brand-sky: #38bdf8; /* Sky blue brand color - Tailwind sky-400 */
  --primary-teal: #14b8a6; /* Tailwind teal-500 */
  --primary-cyan: #06b6d4; /* Tailwind cyan-500 */
  --primary-purple: #8b5cf6; /* Tailwind violet-500 */
  --primary-orange: #f97316; /* Tailwind orange-500 */
  --text-dark: #1e293b; /* Tailwind slate-800 */
  --text-light: #64748b; /* Tailwind slate-500 */
  --bg-main: #f0f9ff; /* Light sky blue background - Tailwind sky-50 */
  --bg-card: rgba(255,255,255,0.7);
  --font-main: 'Inter', sans-serif;
}

body, html {
  background: var(--bg-main);
  color: var(--text-dark);
  font-family: var(--font-main);
  scroll-behavior: smooth;
}

.gradient-bg {
  background: linear-gradient(135deg, var(--brand-sky) 0%, #e0f2fe 50%, #f3e8ff 100%);
}

.glass-morphism {
  background: var(--bg-card);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(56, 189, 248, 0.18); /* subtle sky blue border */
}

nav, .nav-scrolled {
  background: rgba(240, 249, 255, 0.85); /* --bg-main with opacity */
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.07);
  backdrop-filter: blur(12px); 
  -webkit-backdrop-filter: blur(12px);
}

/* Mobile nav menu slide-in animation */
#nav-mobile-menu {
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), opacity 0.4s;
  transform: translateY(-20px);
  opacity: 0;
}
#nav-mobile-menu:not(.hidden) {
  transform: translateY(0);
  opacity: 1;
}

/* Active nav link underline */
nav a.active, nav a[aria-current="page"] {
  border-bottom: 2px solid var(--primary-teal);
  color: var(--primary-teal) !important;
  font-weight: 600;
}

/* Hero section: more vertical padding on large screens */
#hero {
  padding-top: 6rem; /* Adjust if needed based on fixed nav height */
  padding-bottom: 6rem;
}
@media (min-width: 768px) {
  #hero {
    padding-top: 8rem; /* Further increased padding */
    padding-bottom: 8rem;
  }
}

/* Hero CTA button: glowing animated border */
.hero-cta-glow {
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); /* Corresponds to Tailwind yellow-400 */
  animation: cta-glow 2s infinite alternate;
}
@keyframes cta-glow {
  0% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0.7); }
  100% { box-shadow: 0 0 24px 8px rgba(255, 193, 7, 0.25); }
}

/* Hero background: animated SVG wave */
#hero::after {
  content: '';
  display: block;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 80px; /* Wave height */
  background: url('data:image/svg+xml;utf8,<svg width="100%25" height="80" viewBox="0 0 1440 80" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 40 Q360 80 720 40 T1440 40 V80 H0Z" fill="%23f0f9ff"/></svg>') no-repeat bottom center/cover;
  z-index: 0;
  opacity: 0.7;
}
#hero { position: relative; z-index: 1; } /* Ensure hero content is above wave */

/* Card consistency: padding, border-radius, shadow */
.card-hover, .feature-card, .interactive-card, .bg-white.rounded-lg.shadow, .glass-morphism, .chart-card {
  border-radius: 1.25rem !important; /* More pronounced rounding */
  padding: 1.5rem !important; /* Adjusted padding */
  box-shadow: 0 8px 32px rgba(56,189,248,0.10);
}
@media (min-width: 768px) {
  .card-hover, .feature-card, .interactive-card, .bg-white.rounded-lg.shadow, .glass-morphism, .chart-card {
    padding: 2rem !important;
  }
}

/* Card hover: color shift and icon animation */
.card-hover:hover, .feature-card:hover, .interactive-card:hover {
  background: linear-gradient(135deg, var(--brand-sky) 0%, #e0f2fe 100%); /* Adjusted gradient */
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 20px 40px rgba(56,189,248,0.15);
}
.feature-card:hover .feature-icon, .interactive-card:hover .feature-icon {
  animation: icon-bounce 0.6s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes icon-bounce {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.25) rotate(8deg); }
}

/* Reduce particle opacity and speed for background particles */
.particle {
  position: absolute; /* Ensure particles are positioned within their container */
  width: 5px;
  height: 5px;
  background: var(--primary-cyan); /* Use a theme color */
  border-radius: 50%;
  opacity: 0.2; /* Further reduced opacity */
  animation: float-particle 12s infinite ease-in-out; /* Slower animation */
  pointer-events: none; /* Ensure particles don't interfere with interactions */
}
@keyframes float-particle {
  0%, 100% { transform: translateY(0px) translateX(0px) scale(1); }
  25% { transform: translateY(-15px) translateX(10px) scale(1.1); }
  50% { transform: translateY(5px) translateX(-5px) scale(0.95); }
  75% { transform: translateY(-10px) translateX(5px) scale(1.05); }
}


/* Section divider: subtle gradient fade */
.section-divider {
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--brand-sky), transparent);
  margin: 2.5rem 0;
}

/* Chart containers: card background and border */
.chart-card {
  background: #fff; /* White background for charts */
  border: 1px solid #e0f2fe; /* Light blue border */
}

/* Footer: more padding and social icon hover already present */
footer {
  padding-top: 3rem !important;
  padding-bottom: 3rem !important;
  background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-cyan) 100%) !important; /* Updated gradient */
  color: #fff !important;
}

/* Modal fade-in/out animation and close icon */
#contact-modal {
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out;
  opacity: 0;
  visibility: hidden; /* Use visibility for better accessibility */
}
#contact-modal.active { /* Changed from :not(.hidden) to .active for JS control */
  opacity: 1;
  visibility: visible;
}
#contact-modal > div { /* Target the inner modal content for transform */
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}
#contact-modal.active > div {
   transform: scale(1) !important; /* Ensure scale is applied */
   opacity: 1 !important; /* Ensure opacity is applied */
}

#contact-modal .close-modal {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  color: var(--text-light);
  cursor: pointer;
  background: none;
  border: none;
  z-index: 10;
  transition: color 0.2s, transform 0.2s;
}
#contact-modal .close-modal:hover {
  color: var(--primary-orange);
  transform: rotate(90deg);
}


.floating-animation {
  animation: floating 6s ease-in-out infinite;
}
@keyframes floating {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-15px); } /* Slightly less float */
}

.pulse-glow {
  animation: pulse-glow 2.5s infinite ease-in-out; /* Smoother pulse */
}
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 15px rgba(6, 182, 212, 0.25); } /* Adjusted shadow */
  50% { box-shadow: 0 0 30px rgba(6, 182, 212, 0.5); }
}

.timeline-line {
  background: linear-gradient(to bottom, var(--brand-sky), var(--primary-cyan), var(--primary-purple));
}

.text-gradient {
  background: linear-gradient(135deg, var(--primary-teal), var(--primary-cyan), var(--primary-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  /* text-fill-color: transparent; /* Standard property */
}

.interactive-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent); /* Slightly more visible sheen */
  transition: left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smoother transition */
}
.interactive-card:hover::before {
  left: 100%;
}

.progress-bar {
  background: linear-gradient(90deg, var(--brand-sky), var(--primary-cyan));
  width: 0%;
  transition: width 2s cubic-bezier(0.4,0,0.2,1); /* Keep existing transition */
}
.animate-progress { /* This class might be redundant if width is set by JS directly */
  width: 75%; /* Target width for progress */
}

.bounce-in {
  animation: bounceIn 0.8s ease-out;
}
@keyframes bounceIn {
  0% { transform: scale(0.3); opacity: 0; }
  50% { transform: scale(1.05); opacity: 0.7; }
  70% { transform: scale(0.9); opacity: 0.9; }
  100% { transform: scale(1); opacity: 1; }
}

.typewriter {
  overflow: hidden;
  border-right: .15em solid var(--primary-teal);
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: .05em;
  animation: typing 3.5s steps(40, end) 0.5s 1 normal both, /* Added delay and fill mode */
             blink-caret .75s step-end infinite;
}
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: var(--primary-teal); }
}


/* Cursor trail particle effect from JS */
@keyframes cursorTrailParticle {
  0% { transform: scale(1.2) translateY(0px); opacity: 0.7; } /* Start slightly larger */
  100% { transform: scale(0) translateY(25px); opacity: 0; } /* Move further, fade out */
}


/* Interactive motion: nav links and buttons */
nav a, .btn, button, .feature-card, .interactive-card {
  transition: color 0.25s, background-color 0.25s, box-shadow 0.3s, transform 0.25s ease-out;
}
nav a:hover, .btn:hover, button:hover {
  /* color: var(--primary-teal) !important; Replaced by specific active styles or general hover */
  transform: translateY(-2px); /* Subtle lift */
}

/* Footer social icon motion */
footer a i {
  transition: color 0.2s, transform 0.2s ease-in-out;
}
footer a:hover i {
  color: var(--brand-sky) !important; /* Sky blue for hover */
  transform: scale(1.25) rotate(-5deg); /* More playful rotation */
}

/* Scroll-to-top button */
#scrollTopBtn {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 100;
  background: linear-gradient(135deg, var(--brand-sky), var(--primary-cyan));
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 48px; /* Tailwind w-12 */
  height: 48px; /* Tailwind h-12 */
  box-shadow: 0 4px 16px rgba(56,189,248,0.25); /* Enhanced shadow */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
  font-size: 1.5rem; /* Tailwind text-2xl */
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(20px); /* Start off-screen */
}
#scrollTopBtn.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
#scrollTopBtn:hover {
    background: linear-gradient(135deg, var(--primary-cyan), var(--primary-teal));
    transform: scale(1.1) translateY(-2px); /* Add slight scale and lift on hover */
}


/* Section entrance animations (AOS fallback) - Ensure AOS is initialized */
[data-aos] {
  transition-property: transform, opacity;
}
[data-aos="fade-up"].aos-animate {
  opacity: 1;
  transform: translateY(0);
}
[data-aos="fade-right"].aos-animate {
  opacity: 1;
  transform: translateX(0);
}
[data-aos="fade-left"].aos-animate {
  opacity: 1;
  transform: translateX(0);
}


/* General CTA Button Style */
.cta-button {
  background: var(--primary-orange); /* Default to orange */
  color: #fff !important; /* Ensure text is white */
  font-weight: 600; /* Tailwind font-semibold */
  border-radius: 0.5rem; /* Tailwind rounded-lg */
  padding: 0.75rem 1.5rem; /* Tailwind px-6 py-3 */
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.2); /* Orange shadow */
  transition: background-color 0.2s, transform 0.18s, box-shadow 0.18s ease-out;
  position: relative;
  overflow: hidden; /* For potential inner effects */
  display: inline-block; /* Ensure it behaves like a button */
  text-align: center;
}
.cta-button:hover, .cta-button:focus {
  background: #fb923c; /* Tailwind orange-400 */
  transform: translateY(-3px) scale(1.03); /* More noticeable hover */
  box-shadow: 0 8px 32px rgba(249, 115, 22, 0.25);
  outline: none;
}
.cta-button:active {
  background: #ea580c; /* Tailwind orange-600 */
  transform: translateY(-1px) scale(0.99);
}

/* Specific Hero CTA button, if different from general .cta-button */
#hero .hero-cta-glow { /* This is the <a> tag */
  background-color: #facc15; /* Tailwind yellow-400 */
  color: var(--primary-teal) !important; /* Tailwind teal-800 based on HTML */
  font-weight: 600;
  border-radius: 0.5rem;
  padding: 0.75rem 2rem;
  transition: background-color 0.2s, transform 0.18s;
}
#hero .hero-cta-glow:hover {
  background-color: #fde047; /* Tailwind yellow-300 */
  transform: translateY(-3px) scale(1.03);
}

/* Placeholder image styling for team section */
.team-placeholder-img {
    background-color: #e0e7ff; /* Light indigo */
    color: var(--primary-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 2rem;
}