/* ============================================================================
   optimize.css — Performance overrides (loaded last)

   - Slower/removed infinite animations
   - overflow: clip where a scroll container is unnecessary
   - GPU promotion for animated elements
   - Lighter animations on low-refresh-rate and mobile devices
   ============================================================================ */

/* ---------------------------------------------------------------------------
   1. Infinite animations — slower, subtler versions of the effects.css defaults
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .eyebrow-dot {
    animation: pulse-dot var(--duration-infinite-medium) var(--ease-smooth) infinite;
  }

  .contact-glow {
    animation: pulse-glow calc(var(--duration-infinite-medium) * 2) var(--ease-smooth) infinite;
  }

  .hero-grid {
    animation: pan-grid var(--duration-infinite-slow) var(--ease-smooth) infinite alternate;
  }

  /* orbit-two is a redundant dashed circle — skip its rotation */
  .orbit-two {
    animation: none;
  }
}

/* ---------------------------------------------------------------------------
   2. Overflow — clip avoids creating a scroll container
   --------------------------------------------------------------------------- */

.approach-art {
  overflow: clip;
}

.contact-map {
  overflow: clip;
}

/* ---------------------------------------------------------------------------
   3. GPU promotion for elements that animate
   --------------------------------------------------------------------------- */

.hero-copy > *,
.hero-visual,
.service-card,
.approach-art,
.contact-form {
  transform: translateZ(0);
}

/* ---------------------------------------------------------------------------
   4. will-change — only on continuously animated elements
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .visual-core,
  .eyebrow-dot {
    will-change: transform, opacity;
  }

  .visual-orbit {
    will-change: transform;
  }
}

/* ---------------------------------------------------------------------------
   5. Low-refresh-rate devices — disable infinite animations
   --------------------------------------------------------------------------- */

@media (update: slow) {
  .visual-core,
  .visual-orbit,
  .eyebrow-dot,
  .contact-glow,
  .hero-grid {
    animation: none;
  }

  .hero-copy > *,
  .hero-visual,
  .section-heading,
  .service-card,
  .approach-art,
  .approach-copy,
  .contact-copy,
  .contact-details,
  .contact-form {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
  }
}

/* ---------------------------------------------------------------------------
   6. Mobile — reduce animation complexity and blur
   --------------------------------------------------------------------------- */

@media (max-width: 760px) {
  .visual-core,
  .visual-orbit,
  .eyebrow-dot,
  .contact-glow,
  .hero-grid {
    animation: none !important;
  }

  .hero-copy > *,
  .hero-visual,
  .section-heading,
  .service-card,
  .approach-art,
  .approach-copy,
  .contact-copy,
  .contact-details,
  .contact-form {
    animation-duration: var(--duration-fast) !important;
    animation-delay: 0s !important;
  }

  .service-card:hover,
  .button:hover,
  .nav-cta:hover,
  .approach-art:hover,
  .contact-form:hover {
    transform: none !important;
    box-shadow: none !important;
  }

  .site-header,
  .contact-form {
    backdrop-filter: blur(8px) saturate(140%);
    -webkit-backdrop-filter: blur(8px) saturate(140%);
  }
}

/* ---------------------------------------------------------------------------
   7. Contain — layout/style isolation for independent blocks
   --------------------------------------------------------------------------- */

.service-grid,
.trust-inner {
  contain: layout style;
}