/* HypeCity — global UX polish layer
 * ===================================
 * Loaded after every page's own <style> to add a coherent set of micro-
 * interactions, focus polish, smooth-scroll behaviour, scroll-driven
 * reveals, and tight hover states. Designed to play nice with the
 * existing Architectural Editorial design tokens (brass/ink/gold).
 *
 * Honours `prefers-reduced-motion: reduce` everywhere — every animation
 * collapses to an instant state for visitors who opt out.
 */

/* === 1. Smooth scroll + anchored sections ============================ */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:is(section, article, [id]) { scroll-margin-top: 88px; }

/* === 2. Selection (subtle brand colour) ============================== */
::selection {
  background: rgba(216, 179, 106, 0.32);
  color: #1F1D1A;
}

/* === 3. Focus rings (brass — never the browser default blue square) === */
:where(a, button, [role="button"], input, textarea, select, summary, [tabindex]):focus {
  outline: none;
}
:where(a, button, [role="button"], input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid #8B6F3D;
  outline-offset: 3px;
  border-radius: 6px;
  transition: outline-offset .12s ease-out;
}

/* === 4. Link underline grow on hover (subtle, brand brass) =========== */
:where(p, li, .section-deck, .hero-sub, .doc-subtitle, .doc-body) a,
a.hc-polish-link {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size .25s cubic-bezier(.4,0,.2,1), color .15s;
  text-decoration: none;
}
:where(p, li, .section-deck, .hero-sub, .doc-subtitle, .doc-body) a:hover,
a.hc-polish-link:hover {
  background-size: 100% 2px;
  color: #8B6F3D;
}

/* === 5. Button micro-interaction (gentle press feedback) ============= */
:where(button, .btn, .btn-primary, .btn-secondary, .nav-cta, .tier-cta) {
  transition: transform .14s cubic-bezier(.34, 1.5, .5, 1),
              box-shadow .14s,
              background .15s,
              color .15s,
              border-color .15s;
}
:where(button:not(:disabled), .btn, .btn-primary, .btn-secondary, .nav-cta, .tier-cta):active {
  transform: translateY(1px) scale(0.985);
}

/* === 6. Section reveal (set by hc-polish.js when in viewport) ======== */
.hc-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .65s cubic-bezier(.22,.8,.36,1), transform .65s cubic-bezier(.22,.8,.36,1);
  will-change: opacity, transform;
}
.hc-reveal--ready { opacity: 1; transform: translateY(0); }
.hc-reveal[data-delay="1"]{ transition-delay: .08s; }
.hc-reveal[data-delay="2"]{ transition-delay: .16s; }
.hc-reveal[data-delay="3"]{ transition-delay: .24s; }
.hc-reveal[data-delay="4"]{ transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) {
  .hc-reveal { opacity: 1; transform: none; transition: none; }
}

/* === 7. Number count-up — final state baseline (set by JS) =========== */
[data-count] { font-variant-numeric: tabular-nums; }

/* === 8. Page fade-in on first paint =================================== */
.hc-page-loading body { opacity: 0; }
body { opacity: 1; transition: opacity .35s ease-out; }
@media (prefers-reduced-motion: reduce) { body { transition: none; } }

/* === 9. Card hover lift (catches .tier-card, .feature-card, etc.) ==== */
:where(.tier-card, .feature-card, .hood-card, article.card, .preview-card) {
  transition: transform .22s cubic-bezier(.22,.8,.36,1), box-shadow .22s;
}
:where(.tier-card, .feature-card, .hood-card, article.card, .preview-card):hover {
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  :where(.tier-card, .feature-card, .hood-card, article.card, .preview-card):hover {
    transform: none;
  }
}

/* === 10. Form-input polish ============================================ */
:where(input[type="text"], input[type="email"], input[type="search"],
       input[type="url"], input[type="number"], input[type="tel"],
       input[type="password"], textarea, select) {
  transition: border-color .15s, box-shadow .15s, background .15s;
}
:where(input[type="text"], input[type="email"], input[type="search"],
       input[type="url"], input[type="number"], input[type="tel"],
       input[type="password"], textarea, select):focus-visible {
  border-color: #8B6F3D !important;
  box-shadow: 0 0 0 3px rgba(139, 111, 61, 0.18);
  outline: none;
}

/* === 11. Skeleton loading shimmer (utility class) ===================== */
.hc-skeleton {
  background: linear-gradient(
    90deg,
    rgba(31,29,26,0.05) 0%,
    rgba(31,29,26,0.10) 50%,
    rgba(31,29,26,0.05) 100%
  );
  background-size: 200% 100%;
  animation: hc-shimmer 1.6s linear infinite;
  border-radius: 6px;
  color: transparent;
  user-select: none;
  pointer-events: none;
}
@keyframes hc-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .hc-skeleton { animation: none; background: rgba(31,29,26,0.08); }
}

/* === 12. Sticky-nav refinements (current-page underline) ============== */
.nav-links a {
  position: relative;
  padding: 6px 0;
}
.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: #8B6F3D;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s cubic-bezier(.22,.8,.36,1);
}
.nav-links a:not(.nav-cta):hover::after,
.nav-links a.hc-current::after { transform: scaleX(1); }
.nav-links a.hc-current {
  color: #1F1D1A !important;
  font-weight: 600;
}

/* === 13. Eyebrow polish (slight letter-spacing + colour) ============= */
.eyebrow, .doc-eyebrow {
  position: relative;
  display: inline-block;
}
.eyebrow::before, .doc-eyebrow::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin-right: 10px;
  opacity: .5;
}

/* === 14. Brass underline grow on hero/section titles (subtle) ======== */
.hero-title em, .section-title em {
  position: relative;
  background-image: linear-gradient(transparent 78%, rgba(216,179,106,0.28) 78%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 0 2px;
  border-radius: 1px;
}

/* === 15. Image / illustration smooth load ============================ */
img { transition: opacity .25s ease-out; }
img[loading="lazy"] { opacity: 0; }
img.hc-loaded, img[data-loaded="1"] { opacity: 1; }

/* === 16. Scrollbar polish (WebKit + Firefox) ========================= */
* { scrollbar-width: thin; scrollbar-color: #BFB6A4 transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #BFB6A4;
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: #8B6F3D; background-clip: padding-box; border: 2px solid transparent; }

/* === 17. Background grid utility for hero accents =================== */
.hc-grid-bg {
  background-image:
    linear-gradient(rgba(31,29,26,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,29,26,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: center center;
}

/* === 18. Tag pill utility ============================================ */
.hc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  background: rgba(216,179,106,0.16);
  border: 1px solid rgba(139,111,61,0.30);
  border-radius: 99px;
  font: 600 11px ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #5E4D2A;
}
.hc-tag .hc-tag__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #4A6B4A;
  animation: hc-blink 2.4s ease-in-out infinite;
}
@keyframes hc-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .hc-tag .hc-tag__dot { animation: none; } }