/* Performance Optimization CSS */

/* Critical CSS */
:root {
  --primary-color: #1a5f7a;
  --secondary-color: #57c5b6;
  --accent-color: #159895;
  --light-color: #dafffb;
  --dark-color: #002b36;
  --text-color: #333;
  --light-text: #f8f8f8;
  --section-padding: 80px 0;
  --transition: all 0.3s ease;
}

/* Font display optimization */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/montserrat/v25/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXo.woff2) format('woff2');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/playfairdisplay/v30/nuFvD-vYSZviVYUb_rj3ij__anPXJzDwcbmjWBN2PKeiunDXbtM.woff2) format('woff2');
}

/* Content-visibility for off-screen content */
.features,
.differentiators,
.investment,
.financial,
.contact,
footer {
  content-visibility: auto;
  contain-intrinsic-size: 1px 1000px; /* Approximate size placeholder */
}

/* Reduce paint operations */
.feature-card,
.diff-item,
.investment-card,
.chart-container {
  will-change: transform;
  backface-visibility: hidden;
}

/* Optimize animations */
@media (prefers-reduced-motion: no-preference) {
  .optimized-animation {
    transition-property: transform, opacity;
    will-change: transform, opacity;
  }
}

/* Reduce layout shifts */
.hero-content,
.section-header,
.features-grid,
.diff-container,
.investment-structure,
.financial-charts-grid,
.contact-container,
.footer-container {
  min-height: 0vw; /* Prevent CLS */
}

/* Image aspect ratio placeholders */
.image-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Lazy loading styles */
.lazy-image {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lazy-image.loaded {
  opacity: 1;
}

.lazy-placeholder {
  background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
  background-size: 200% 100%;
  animation: 1.5s shine linear infinite;
}

@keyframes shine {
  to {
    background-position-x: -200%;
  }
}

/* Optimize icon loading */
.icon-placeholder {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: #f0f0f0;
  border-radius: 50%;
}

/* Optimize web fonts */
.wf-loading {
  visibility: hidden;
}

.wf-active, .wf-inactive {
  visibility: visible;
}

/* Optimize CSS selectors */
[class^="feature-"],
[class^="diff-"],
[class^="investment-"] {
  box-sizing: border-box;
}

/* Reduce repaints for fixed elements */
.fixed-element {
  transform: translateZ(0);
}

/* Optimize box-shadows */
.optimized-shadow {
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.optimized-shadow:hover {
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Optimize gradients */
.optimized-gradient {
  background-image: linear-gradient(to right, var(--primary-color), var(--accent-color));
}

/* Optimize transitions */
.optimized-transition {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Optimize SVG rendering */
.optimized-svg {
  shape-rendering: geometricPrecision;
}

/* Optimize filter effects */
.optimized-filter {
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.1));
}

/* Optimize background images */
.optimized-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Optimize text rendering */
.optimized-text {
  text-rendering: optimizeSpeed;
}

/* Optimize transforms */
.optimized-transform {
  transform: translate3d(0, 0, 0);
}

/* Optimize opacity changes */
.optimized-opacity {
  opacity: 0.99; /* Prevents full repaint in some browsers */
}

/* Optimize position fixed elements */
.optimized-fixed {
  position: fixed;
  transform: translateZ(0);
}

/* Optimize scrolling */
.optimized-scroll {
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
}

/* Optimize for print */
@media print {
  * {
    transition: none !important;
    animation: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
}