/* 
 * Performance Optimization CSS Additions
 * Add these to your existing style.css or create a separate file
 */

/* =============================================
   WILL-CHANGE OPTIMIZATION
   ============================================= */

/* Apply will-change to frequently animated elements */
.portfolio__item,
.hero__image,
.nav,
.reveal,
.reveal-stagger {
  will-change: transform, opacity;
}

/* Remove will-change after animation completes */
.portfolio__item.is-visible,
.reveal.is-visible,
.reveal-stagger.is-visible {
  will-change: auto;
}


/* =============================================
   CONTAIN PROPERTY FOR LAYOUT OPTIMIZATION
   ============================================= */

/* Isolate layout/paint for portfolio items */
.portfolio__item {
  contain: layout style paint;
}

.portfolio__figure {
  contain: layout paint;
}

/* Contain hero section for better paint performance */
.hero {
  contain: layout;
}


/* =============================================
   CONTENT-VISIBILITY FOR OFF-SCREEN OPTIMIZATION
   ============================================= */

/* Defer rendering of off-screen sections */
.about,
.services,
.featured {
  content-visibility: auto;
  contain-intrinsic-size: auto 800px;
}


/* =============================================
   PORTFOLIO STAGE OPTIMIZATION
   ============================================= */

/* Smooth height transition for "See More" */
.portfolio__viewport {
  transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
}

.portfolio__stage:not(.is-expanded) .portfolio__viewport {
  max-height: 1000px;
}

.portfolio__stage.is-expanded .portfolio__viewport {
  max-height: 10000px;
}

/* GPU acceleration for fade effect */
.portfolio__fade {
  transform: translateZ(0);
  will-change: opacity;
  transition: opacity 0.4s ease;
}


/* =============================================
   IMAGE LOADING OPTIMIZATION
   ============================================= */

/* Blur-up effect for images while loading */
.portfolio__image,
.hero__image,
.featured__image {
  background-color: #1a1a1a;
  transition: opacity 0.3s ease;
}

.portfolio__image[src*=".webp"],
.hero__image[src*=".webp"],
.featured__image[src*=".webp"] {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}


/* =============================================
   REDUCE REPAINT/REFLOW
   ============================================= */

/* Use transform instead of position changes */
.btn:hover {
  transform: translateY(-2px) translateZ(0);
}

.portfolio__item:hover {
  transform: translateY(-4px) translateZ(0);
}

/* Prevent layout shift for images */
.portfolio__figure,
.featured__image-wrap,
.hero__media {
  position: relative;
  overflow: hidden;
}

.portfolio__figure::before,
.featured__image-wrap::before {
  content: '';
  display: block;
  padding-bottom: 125%; /* 4:5 aspect ratio */
}

.portfolio__item--tall .portfolio__figure::before {
  padding-bottom: 150%; /* 2:3 aspect ratio */
}

.portfolio__figure img,
.featured__image-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =============================================
   SMOOTH SCROLL IMPROVEMENTS
   ============================================= */

/* Better scroll behavior */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* Account for fixed nav */
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}


/* =============================================
   FONT LOADING OPTIMIZATION
   ============================================= */

/* Prevent layout shift during font loading */
body {
  font-display: swap;
}

/* Optional: System font stack fallback */
.nav__logo,
.section-title,
.hero__title {
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}


/* =============================================
   HARDWARE ACCELERATION
   ============================================= */

/* Force GPU acceleration for animations */
.marquee__track,
.loader__progress,
.hero__scroll-dot {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}


/* =============================================
   CRITICAL CSS HINT
   ============================================= */

/*
  For production, consider extracting these rules
  into a separate critical.css file:
  
  - Above-the-fold styles (hero, nav)
  - Reset and base styles
  - Layout utilities
  - Critical typography
  
  Inline critical.css in <head> and load
  the rest of CSS asynchronously.
*/