/* =========================================================
   CODERN
   Performance Optimization
   ========================================================= */

/* ---------------------------------------------------------
   Prevent accidental horizontal overflow
   --------------------------------------------------------- */

html {
  overflow-x: clip;
}

body {
  overflow-x: clip;
}


/* ---------------------------------------------------------
   Image Rendering
   --------------------------------------------------------- */

img,
picture,
video,
canvas {
  max-width: 100%;
}

img {
  height: auto;
}


/* ---------------------------------------------------------
   Content Visibility
   --------------------------------------------------------- */

/*
 * Allows the browser to skip rendering large sections that
 * are far outside the viewport.
 *
 * The intrinsic size prevents major layout jumps.
 */

.site-main > section:not(.hero-section) {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}


/* ---------------------------------------------------------
   Paint Containment
   --------------------------------------------------------- */

.glass-card,
.service-card,
.portfolio-card,
.pricing-card,
.process-card,
.achievement-card {
  contain: layout paint;
}


/* ---------------------------------------------------------
   Animation Performance
   --------------------------------------------------------- */

[data-reveal],
[data-animate],
.reveal {
  backface-visibility: hidden;
}


/* ---------------------------------------------------------
   Fixed Visual Systems
   --------------------------------------------------------- */

.particle-background,
.custom-cursor,
.cursor-ring,
.cursor-dot,
.scroll-to-top {
  contain: layout paint;
}


/* ---------------------------------------------------------
   Decorative Effects
   --------------------------------------------------------- */

.hero-section::before,
.hero-section::after,
.site-footer::before,
.site-footer::after {
  pointer-events: none;
}


/* ---------------------------------------------------------
   Loading State
   --------------------------------------------------------- */

html.codern-loading {
  overflow: hidden;
}


/* ---------------------------------------------------------
   Reduced Motion
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-animate],
  .reveal {
    transform: none !important;
    opacity: 1 !important;
  }
}


/* ---------------------------------------------------------
   Mobile Performance
   --------------------------------------------------------- */

@media (max-width: 768px) {
  /*
   * Expensive backdrop filters can be particularly costly
   * on mobile GPUs.
   *
   * Keep the visual style but reduce unnecessary blur.
   */

  .glass-card {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .particle-background {
    opacity: 0.22;
  }
}


/* ---------------------------------------------------------
   Small Mobile
   --------------------------------------------------------- */

@media (max-width: 480px) {
  .glass-card {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }
}


/* ---------------------------------------------------------
   Print
   --------------------------------------------------------- */

@media print {
  .particle-background,
  .custom-cursor,
  .cursor-ring,
  .cursor-dot,
  .scroll-to-top {
    display: none !important;
  }

  * {
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
  }
}