/* =========================================================
   ReadThisAloud - V6 SHARED UI + PERFORMANCE
   2026-08-25
   - Shared button hover/current-page state
   - Below-the-fold rendering optimization
   - Reduced-motion safeguards
========================================================= */

/* Shared interactive transition */
a.btn,
button.btn,
.nvr-nav-pill,
.nvr-buy-pill,
.cookie-btn,
.back-to-top,
.nvr-hamburger,
.voice-preview-btn,
.voice-load-more {
  transition:
    color 0.2s ease,
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

/* Approved universal hover/focus treatment */
a.btn:hover,
a.btn:focus-visible,
button.btn:hover,
button.btn:focus-visible,
.nvr-nav-pill:hover,
.nvr-nav-pill:focus-visible,
.nvr-buy-pill:hover,
.nvr-buy-pill:focus-visible,
.cookie-btn:hover,
.cookie-btn:focus-visible,
.back-to-top:hover,
.back-to-top:focus-visible,
.nvr-hamburger:hover,
.nvr-hamburger:focus-visible,
.voice-preview-btn:hover,
.voice-preview-btn:focus-visible,
.voice-load-more:hover,
.voice-load-more:focus-visible {
  color: #ffffff !important;
  background: linear-gradient(135deg,#0c7088 0%,#0b5f82 42%,#104d80 72%,#123d6d 100%) !important;
  border-color: rgba(91,230,255,0.95) !important;
  box-shadow:
    -10px 10px 24px rgba(0,0,0,0.46),
    -4px 6px 14px rgba(0,0,0,0.28),
    0 0 26px rgba(32,240,255,0.24),
    inset 0 1px 0 rgba(255,255,255,0.18) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.72), 0 0 8px rgba(255,255,255,0.10);
  transform: translateY(-1px);
}

.nvr-hamburger:hover span,
.nvr-hamburger:focus-visible span { background:#ffffff !important; }

/* Permanent current-page treatment. Keep V5 behavior exactly. */
#nvrSiteHeader a.nvr-nav-pill.nvr-active-page,
#nvrSiteHeader a.nvr-nav-pill.nvr-active-page:link,
#nvrSiteHeader a.nvr-nav-pill.nvr-active-page:visited,
#nvrSiteHeader a.nvr-nav-pill.nvr-active-page:hover,
#nvrSiteHeader a.nvr-nav-pill.nvr-active-page:focus,
#nvrSiteHeader a.nvr-nav-pill.nvr-active-page:focus-visible,
#nvrSiteHeader a.nvr-nav-pill.nvr-active-page:active {
  color: #ffffff !important;
  background-color: #0b5f82 !important;
  background-image: linear-gradient(135deg,#0c7088 0%,#0b5f82 42%,#104d80 72%,#123d6d 100%) !important;
  border: 1px solid rgba(91,230,255,0.98) !important;
  box-shadow:
    -10px 10px 24px rgba(0,0,0,0.46),
    -4px 6px 14px rgba(0,0,0,0.28),
    0 0 32px rgba(32,240,255,0.34),
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 0 18px rgba(32,240,255,0.10) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.72), 0 0 8px rgba(255,255,255,0.12) !important;
  transform: translateY(-2px) !important;
  opacity: 1 !important;
  filter: brightness(1.06) saturate(1.08) !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: default !important;
}

/* Home keeps the same layered gradient, but avoids fixed-background repaint cost. */
.nvr-home-v6 {
  background-attachment: scroll !important;
}

/*
   Render the first/hero section immediately. Defer expensive layout/paint
   for sections farther down the document until they approach the viewport.
*/
.home-page > section:not(:first-child),
.about-page > section:not(:first-child),
.contact-page > section:not(:first-child),
.demo-page > section:not(:first-child),
.faq-page > section:not(:first-child),
.features-page > section:not(:first-child),
.pricing-page > section:not(:first-child),
.privacy-page > section:not(:first-child),
.refund-page > section:not(:first-child),
.security-page > section:not(:first-child),
.support-page > section:not(:first-child),
.requirements-page > section:not(:first-child),
.terms-page > section:not(:first-child),
.legal-page > section:not(:first-child),
.voices-page > section:not(:first-child) {
  content-visibility: auto;
  contain-intrinsic-size: auto 850px;
}

/* Avoid expensive hover translation on touch devices. */
@media (hover:none), (pointer:coarse) {
  a.btn:hover,
  button.btn:hover,
  .nvr-nav-pill:hover,
  .nvr-buy-pill:hover,
  .cookie-btn:hover,
  .back-to-top:hover,
  .nvr-hamburger:hover,
  .voice-preview-btn:hover,
  .voice-load-more:hover { transform:none; }

  #nvrSiteHeader a.nvr-nav-pill.nvr-active-page { transform:translateY(-2px) !important; }
}

@media (prefers-reduced-motion: reduce) {
  a.btn, button.btn, .nvr-nav-pill, .nvr-buy-pill, .cookie-btn,
  .back-to-top, .nvr-hamburger, .voice-preview-btn, .voice-load-more {
    transition:none !important;
  }
}