/* ============================================================
   UNFOLDING VALUES — ELEVATION LAYER (elevate.css)
   Additive only. Loads after uv.css + uv-v7.css.
   Purpose: Apple/Stripe-grade polish — depth, focus, motion,
   rhythm — without touching the token layer or page structure.
   ============================================================ */

/* ---------- 1. FOCUS — visible, branded, accessible ---------- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}
:where(a, button):focus:not(:focus-visible) { outline: none; }

/* ---------- 2. NAV — refined depth on scroll ---------- */
.nav { transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base); }
.nav.scrolled, .nav.is-stuck {
  border-bottom-color: var(--gray-200);
  box-shadow: 0 1px 0 rgba(17,33,58,.04), 0 10px 30px -18px rgba(17,33,58,.22);
}
.nav-link { position: relative; }
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-base);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- 3. BUTTONS — premium press + lift ---------- */
.btn { transition: transform var(--t-fast), box-shadow var(--t-base), background var(--t-base), color var(--t-base); will-change: transform; }
.btn-gold, .btn-orange {
  box-shadow: 0 1px 2px rgba(138,109,50,.25), 0 8px 20px -10px rgba(184,149,79,.55);
}
.btn-gold:hover, .btn-orange:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(138,109,50,.28), 0 16px 32px -12px rgba(184,149,79,.62);
}
.btn-gold:active, .btn-orange:active { transform: translateY(0); }
.btn-outline { transition: transform var(--t-fast), border-color var(--t-base), background var(--t-base), color var(--t-base); }
.btn-outline:hover { transform: translateY(-2px); border-color: var(--navy); }
.btn svg { transition: transform var(--t-base); }
.btn:hover svg { transform: translateX(3px); }

/* ---------- 4. CARD ELEVATION — unify depth + hover ---------- */
.who-card, .cs-teaser, .sit, .svc-cell {
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base), background var(--t-base);
}
.who-card, .cs-teaser {
  box-shadow: 0 1px 2px rgba(17,33,58,.04), 0 1px 0 rgba(255,255,255,.7) inset;
}
.who-card:hover, .cs-teaser:hover {
  transform: translateY(-5px);
  box-shadow: 0 1px 2px rgba(17,33,58,.05), 0 24px 48px -20px rgba(17,33,58,.26);
  border-color: var(--gold-light);
}

/* ---------- 5. SECTION RHYTHM ---------- */
/* NOTE: section reveal animation is owned by uv.js / uv-v7.css.
   We intentionally do NOT gate visibility on a JS class here —
   content must remain readable if JS fails. */

/* ---------- 6. STAT STRIP — tabular polish ---------- */
.hp-stat { transition: background var(--t-base); }
.hp-stat:hover { background: var(--cream); }

/* ---------- 7. MARQUEE — soft edge mask ---------- */
.uv-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* ---------- 8. LINKS in prose — gold underline grow ---------- */
.prose a, .cs-body a, .post-body a {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1.5px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size var(--t-base);
}
.prose a:hover, .cs-body a:hover, .post-body a:hover { background-size: 100% 1.5px; }

/* ---------- 9. IMAGE RENDERING + selection refinement ---------- */
img { image-rendering: auto; }
::selection { background: var(--gold); color: var(--navy); }

/* ---------- 10. REDUCED MOTION — honor the setting globally ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal-on, .uvr, .uv-reveal { opacity: 1 !important; transform: none !important; }
}