/* Author/creator: nattapat2871 (https://nattapat2871.me) */
/* Final HeroUI v2 polish layer for NamLauncher public pages. */

:root {
  --polish-radius-sm: var(--heroui-v2-radius-small, 8px);
  --polish-radius-md: var(--heroui-v2-radius-medium, 12px);
  --polish-radius-lg: max(var(--heroui-v2-radius-large, 14px), 16px);
  --polish-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --polish-line: color-mix(in oklab, var(--heroui-v2-divider, var(--line)) 72%, transparent);
  --polish-card-shadow:
    0 1px 2px color-mix(in oklab, var(--background, transparent) 38%, transparent),
    0 12px 30px color-mix(in oklab, var(--background, transparent) 52%, transparent),
    0 28px 68px color-mix(in oklab, var(--background, transparent) 34%, transparent);
  --polish-float-shadow: var(--heroui-v2-shadow-large, var(--shadow));
}

html { scroll-padding-top: calc(var(--header-height, 72px) + 24px); }
body { line-height: 1.62; text-rendering: optimizeLegibility; }
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p, li) { text-wrap: pretty; }
:where(.section-intro, .hero-text, .history-hero > p, .install-hero > p, .legal-hero > p, .not-found-body) { max-width: 70ch; }
:where(.section-intro, .feature-card p, .proof-card p, .compare-card p, .partner-card p, .download-section p, .history-hero > p, .gallery-caption, .legal-card p, .legal-card li, .install-platform p, .install-faq-item p, .not-found-body, .hero-metrics p) { font-size: max(0.875rem, 1em); }
:where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])) { cursor: pointer; }
:where(a, button, summary, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible { outline: 2px solid var(--heroui-v2-focus, var(--focus)); outline-offset: 3px; }

:where(.button, .site-nav a, .language-switcher button, .mobile-menu-toggle, .back-to-top, .page-visit-counter, .microsoft-store-badge-button, .carousel-arrow, .carousel-dot, .footer-socials a, .source-actions a) {
  transition: color 180ms var(--polish-ease), background-color 180ms var(--polish-ease), border-color 180ms var(--polish-ease), opacity 180ms var(--polish-ease), transform 180ms var(--polish-ease);
}

:where(.card, .feature-card, .proof-card, .compare-card, .upgrade-card, .creator-card, .activity-card, .partner-card, .install-platform, .install-flow-card, .install-after, .install-help, .legal-card, .changelog-entry, .screenshot-window, .source-card) {
  border: 1px solid var(--polish-line);
  border-radius: var(--polish-radius-lg);
  background: linear-gradient(145deg, color-mix(in oklab, var(--heroui-v2-content1, var(--surface)) 96%, var(--accent)), var(--heroui-v2-content1, var(--surface)) 42%), var(--heroui-v2-content1, var(--surface));
  box-shadow: var(--polish-card-shadow);
  transition: color 200ms var(--polish-ease), background-color 200ms var(--polish-ease), border-color 200ms var(--polish-ease), opacity 200ms var(--polish-ease), transform 200ms var(--polish-ease);
}

@media (hover: hover) and (pointer: fine) {
  :where(.card, .feature-card, .proof-card, .compare-card, .upgrade-card, .creator-card, .activity-card, .partner-card, .install-platform, .install-flow-card, .install-after, .install-help, .legal-card, .source-card):hover,
  :where(.button, .site-nav a, .language-switcher button, .mobile-menu-toggle, .back-to-top, .page-visit-counter, .microsoft-store-badge-button, .carousel-arrow, .footer-socials a, .source-actions a):hover { transform: translateY(-2px); }
}

:where(.button, .site-nav a, .language-switcher button, .mobile-menu-toggle, .back-to-top, .page-visit-counter, .microsoft-store-badge-button, .carousel-arrow, .footer-socials a, .source-actions a):active { transform: scale(0.98); }

body .site-header {
  border: 1px solid var(--polish-line);
  border-radius: var(--polish-radius-lg);
  background: color-mix(in oklab, var(--heroui-v2-content1, var(--overlay)) 80%, transparent);
  box-shadow: var(--polish-float-shadow);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  transition: background-color 200ms var(--polish-ease), border-color 200ms var(--polish-ease), opacity 200ms var(--polish-ease), transform 200ms var(--polish-ease);
}

.site-nav a { position: relative; border-radius: var(--polish-radius-md); }
.site-nav a::after {
  position: absolute;
  right: 10px;
  bottom: 3px;
  left: 10px;
  height: 2px;
  border-radius: 999px;
  background: var(--heroui-v2-primary, var(--accent));
  content: "";
  opacity: 0;
  transform: scaleX(0.35);
  transform-origin: center;
  transition: opacity 180ms var(--polish-ease), transform 180ms var(--polish-ease);
}
.site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a[aria-current="page"]::after { opacity: 1; transform: scaleX(1); }
.site-nav a[aria-current="page"] { background: color-mix(in oklab, var(--heroui-v2-primary, var(--accent)) 14%, transparent); color: var(--heroui-v2-content1-foreground, var(--foreground)); }

.page-visit-counter, .back-to-top, .download-menu {
  border-color: var(--polish-line);
  border-radius: var(--polish-radius-md);
  background: color-mix(in oklab, var(--heroui-v2-content1, var(--surface)) 88%, transparent);
  box-shadow: var(--polish-float-shadow);
  backdrop-filter: blur(14px) saturate(135%);
  -webkit-backdrop-filter: blur(14px) saturate(135%);
}

/* Whole regions stay readable; only individual targets reveal after JS opts in. */
.motion-ready .section > *,
.motion-ready :is(.history-hero, .history-board, .install-hero, .platform-jump, .install-platform, .install-after, .install-faq, .install-help, .legal-hero, .legal-quick-nav, .legal-grid, .legal-reader-shell),
.motion-ready [data-motion] { opacity: 1; transform: none; }
.motion-ready [data-motion] { transition: none; }
.js-reveal-ready [data-motion]:not(.is-visible) { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 440ms var(--polish-ease) var(--motion-delay, 0ms), transform 480ms var(--polish-ease) var(--motion-delay, 0ms); }
.js-reveal-ready [data-motion="fade-down"]:not(.is-visible) { transform: translate3d(0, -14px, 0); }
.js-reveal-ready [data-motion="fade-left"]:not(.is-visible) { transform: translate3d(14px, 0, 0); }
.js-reveal-ready [data-motion="fade-right"]:not(.is-visible) { transform: translate3d(-14px, 0, 0); }
.js-reveal-ready [data-motion="zoom-in"]:not(.is-visible), .js-reveal-ready [data-motion="zoom-in-up"]:not(.is-visible) { transform: translate3d(0, 12px, 0) scale(0.98); }
.js-reveal-ready [data-motion].is-visible { opacity: 1; transform: none; }

.site-tooltip {
  position: fixed;
  z-index: 1000;
  max-width: min(280px, calc(100vw - 16px));
  border: 1px solid var(--polish-line);
  border-radius: var(--polish-radius-md);
  padding: 7px 10px;
  background: var(--heroui-v2-content1, var(--overlay));
  box-shadow: var(--heroui-v2-shadow-medium, var(--shadow-card));
  color: var(--heroui-v2-content1-foreground, var(--foreground));
  font-size: var(--heroui-v2-font-tiny, 0.75rem);
  font-weight: 600;
  line-height: 1.45;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.97);
  transform-origin: center bottom;
}
.site-tooltip[hidden] { display: none; }
/* The JS tooltip replaces the legacy CSS ::after tooltip on pointer devices; never show both. */
.js-tooltips [data-tooltip]:not([data-tooltip=""])::after { content: none !important; }
.site-tooltip.is-open { opacity: 1; transform: scale(1); transition: opacity 150ms var(--polish-ease), transform 150ms var(--polish-ease); }
.site-tooltip[data-placement="bottom"] { transform-origin: center top; }
.site-tooltip__arrow { position: absolute; left: var(--tooltip-arrow-left, 50%); width: 8px; height: 8px; border-right: 1px solid var(--polish-line); border-bottom: 1px solid var(--polish-line); background: inherit; transform: translateX(-50%) rotate(45deg); }
.site-tooltip[data-placement="top"] .site-tooltip__arrow { bottom: -5px; }
.site-tooltip[data-placement="bottom"] .site-tooltip__arrow { top: -5px; transform: translateX(-50%) rotate(225deg); }

.source-hero p, .source-card p, .source-note, .source-footer { font-size: max(0.875rem, 1em); }
.source-card { padding: 24px; }
.source-actions a { border-radius: var(--polish-radius-sm); }

@media (prefers-reduced-motion: reduce) {
  .js-reveal-ready [data-motion], .js-reveal-ready [data-motion]:not(.is-visible), .js-reveal-ready [data-motion].is-visible { opacity: 1 !important; transform: none !important; transition: none !important; }
  :where(.card, .button, .site-nav a, .source-card):hover, :where(.card, .button, .site-nav a, .source-card):active { transform: none !important; }
  .site-tooltip.is-open { transition: none; }
}