/* ═══════════════════════════════════════════════════════════════
   RADIANT OPTIMIZER — PAGE SPEED / SNAPPINESS
   Companion to js/page-speed.js. Load LAST on every page.

   Goal: pages should feel instant, not "slow and ugly".
   This file does NOT change your design language — it only changes
   how fast things appear and how responsive interactions feel.
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────
   1. NO FLASH OF INVISIBLE CONTENT
   If JavaScript is blocked, broken, or just slow, reveal
   elements must never trap the page in an invisible state.
   ─────────────────────────────────────────────── */
.no-js .reveal,
.no-js .fade-in,
.no-js .scroll-reveal {
  opacity: 1 !important;
  transform: none !important;
}

/* Snappier reveal: was 0.7s + up to 0.54s stagger (≈1.2s to settle).
   Now ~0.42s with a much tighter stagger — same feel, way quicker. */
.reveal {
  transition-duration: 0.42s !important;
}
.reveal.d1 { transition-delay: 0.02s !important; }
.reveal.d2 { transition-delay: 0.05s !important; }
.reveal.d3 { transition-delay: 0.08s !important; }
.reveal.d4 { transition-delay: 0.11s !important; }
.reveal.d5 { transition-delay: 0.14s !important; }
.reveal.d6 { transition-delay: 0.17s !important; }
.reveal.d7 { transition-delay: 0.20s !important; }
.reveal.d8 { transition-delay: 0.23s !important; }

/* Shorter travel = reads as faster without losing the motion. */
.reveal:not(.in) {
  transform: translateY(16px);
}

/* ───────────────────────────────────────────────
   2. CHEAPER RENDERING

   ⚠ DO NOT re-add `content-visibility: auto` to page sections.
   It was tried here and it BROKE the layout: the browser skips
   rendering offscreen sections and has to guess their height from
   `contain-intrinsic-size`. Any section taller than that guess
   (e.g. index.html's `.radiant-promo` #pricing block, ~950px)
   gets laid out short, so every section after it lands in the
   wrong place and visibly overlaps.

   These pages are hand-tuned with tall, image-heavy sections of
   wildly varying height, so there is no safe single guess value.
   The real perceived-speed wins are in sections 1, 3 and 4 below.
   ─────────────────────────────────────────────── */

/* Promote only the things that actually animate, so the compositor
   doesn't rebuild layers on every scroll frame. */
.reveal,
.nav-container {
  will-change: opacity, transform;
}
.reveal.in {
  will-change: auto; /* release the layer once it's done */
}

/* ───────────────────────────────────────────────
   3. SNAPPIER INTERACTIONS
   Long 0.3-0.4s transitions read as "laggy". 0.15-0.2s reads
   as "instant" while still looking smooth.
   ─────────────────────────────────────────────── */
.nav-container .nav-tab,
.nav-container .nav-auth-btn,
.nav-container .nav-signup-btn,
.nav-container .nav-login-btn,
.nav-container .nav-dashboard-btn,
.acct-trigger,
.acct-dd-item,
.btn-copy,
.btn-download,
.btn-signout,
.purchase-btn,
.empty-cta,
.discord-btn,
.submit-btn,
.signup-btn {
  transition-duration: 0.16s !important;
}

/* Immediate tactile feedback on press — this alone makes a site
   feel dramatically more responsive. */
.nav-tab:active,
.nav-auth-btn:active,
.nav-dashboard-btn:active,
.acct-trigger:active,
.btn-copy:active,
.btn-download:active,
.btn-signout:active,
.purchase-btn:active,
.empty-cta:active,
.discord-btn:active,
.submit-btn:active,
.signup-btn:active {
  transform: translateY(0) scale(0.985) !important;
  transition-duration: 0.06s !important;
}

/* Kill the 300ms mobile tap delay and the grey flash. */
a, button, [role="button"], input, select, textarea, label {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ───────────────────────────────────────────────
   4. NAVIGATION PROGRESS BAR
   Injected by js/page-speed.js the instant a link is clicked, so
   the user gets feedback immediately instead of a frozen page.
   ─────────────────────────────────────────────── */
.ro-nav-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  width: 0;
  height: 3px;
  pointer-events: none;
  background: linear-gradient(90deg, #2563eb, #3b82f6, #60a5fa);
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.7);
  border-radius: 0 3px 3px 0;
  transition: width 2.4s cubic-bezier(0.1, 0.6, 0.2, 1);
}
.ro-nav-progress.go {
  width: 88%;
}

/* ───────────────────────────────────────────────
   5. STOP INFINITE BACKGROUND ANIMATIONS FROM
      BURNING FRAMES
   Looping glow/float animations run forever and keep the
   compositor busy. Slow them down and let them settle.
   ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .home-banner {
    animation-duration: 6s;
  }
  .download-icon {
    animation-duration: 4s;
  }
}

/* ───────────────────────────────────────────────
   6. STABLE LAYOUT — no scrollbar jump between pages
   A page that scrolls and a page that doesn't were shifting
   the whole layout by ~15px. That reads as "janky".
   ─────────────────────────────────────────────── */
html {
  scrollbar-gutter: stable;
}

/* ───────────────────────────────────────────────
   7. REDUCED MOTION — instant, no animation at all
   ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) and (width: 0px) {
  .reveal,
  .fade-in,
  .scroll-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .ro-nav-progress {
    display: none !important;
  }
}