/**
 * sheremet.dev — scroll & compositor performance
 */

/* ── Scroll performance mode ── */
html.is-scrolling *,
html.is-scrolling *::before,
html.is-scrolling *::after {
  animation-play-state: paused !important;
}

html.is-scrolling nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  background: var(--nav-bg-solid) !important;
}

html.is-scrolling .cursor,
html.is-scrolling .cursor-ring {
  opacity: 0;
  pointer-events: none;
}

/* ── Content visibility for below-fold sections ── */
section:not(#hero) {
  content-visibility: auto;
  contain-intrinsic-size: auto 720px;
}

#hero {
  contain: layout style paint;
}

@media (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .cursor,
  .cursor-ring {
    transition: opacity 0.15s ease;
  }
  .cursor-ring {
    transition: opacity 0.15s ease, border-color 0.12s ease;
  }
}

/* ── Off-screen animation pause ── */
.anim-paused,
.anim-paused * {
  animation-play-state: paused !important;
}

/* ── GPU layers for fixed / animated UI ── */
nav,
.cursor,
.cursor-ring,
.msg-bubble {
  transform: translateZ(0);
}

/* ── Compositor-friendly hovers (transform + opacity only) ── */
.btn-primary:hover,
.pkg-card:hover,
.service-card:hover {
  box-shadow: none;
}

.pkg-card:hover {
  transform: translate3d(0, -4px, 0);
}

/* ── Replace filter-based icon glow with opacity pulse ── */
.icon-glow {
  animation-name: iconGlowOpacity !important;
  filter: none !important;
}

@keyframes iconGlowOpacity {
  0%, 100% { opacity: 0.45; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.04); }
}

/* ── FAQ: avoid max-height layout thrashing ── */
.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  padding: 0 24px !important;
  font-size: 14px;
  color: var(--text2);
  line-height: 1.8;
  overflow: hidden;
  transition: grid-template-rows 0.28s ease, padding 0.28s ease;
}

.faq-a > .faq-a-inner {
  overflow: hidden;
  min-height: 0;
}

.faq-item.open .faq-a {
  grid-template-rows: 1fr;
  padding: 0 24px 20px !important;
}

@media (max-width: 768px) {
  .icon-pulse,
  .icon-pulse-2,
  .icon-pulse-3,
  .icon-glow {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .fade-up { animation: none !important; }
  section:not(#hero) {
    content-visibility: visible;
  }
}