/* ==========================================================================
   SITE POLISH — final cascade layer (johnontabor.com)
   Loaded last on every public page. Unifies motion, modals, cards, and UX.
   ========================================================================== */

:root {
    --accent: #4d8dff;
    --accent-dim: #2f6bff;
    --accent-glow: rgba(77, 141, 255, 0.28);
    --accent-muted: rgba(77, 141, 255, 0.14);
    --accent-ring: rgba(77, 141, 255, 0.14);
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
    --dur-fast: 0.15s;
    --dur-med: 0.22s;
    --dur-slow: 0.32s;
}

/* ── Global UX ── */
::selection {
    background: rgba(77, 141, 255, 0.35);
    color: #fff;
}

:focus { outline: none; }

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

body.polish-modal-open {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Page enter (kit pages — opacity only; never transform body or fixed modals break) ── */
html.polish-ready body.page-footer {
    animation: polishPageIn var(--dur-slow) var(--ease-out) both;
}

@keyframes polishPageIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Shared motion keyframes ── */
@keyframes polishFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes polishSlideUp {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes polishSlideDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes polishScaleIn {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes polishToastIn {
    from { opacity: 0; transform: translateX(-50%) translateY(16px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@keyframes polishCookieIn {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Inline / hero links ── */
.hero p a,
.inline-link,
.text-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid rgba(77, 141, 255, 0.35);
    transition: color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

.hero p a:hover,
.inline-link:hover,
.text-link:hover {
    color: #6ba8ff;
    border-bottom-color: rgba(77, 141, 255, 0.65);
}

/* ── Hero stagger (kit pages) ── */
html.polish-ready body.page-footer .hero h1,
html.polish-ready body.mp-page .mp-hero h1 {
    animation: polishSlideDown var(--dur-slow) var(--ease-out) 0.04s both;
}

html.polish-ready body.page-footer .hero p,
html.polish-ready body.mp-page .mp-hero p {
    animation: polishFadeIn var(--dur-slow) var(--ease-out) 0.1s both;
}

/* ── Buttons — active press feedback ── */
.btn-primary:active:not(:disabled),
.btn-ghost:active:not(:disabled),
.kit-creator-link:active:not(:disabled),
.mp-tab:active,
.mp-chip:active,
.filter-chip:active,
.bar-item:active {
    transform: scale(0.97);
    transition-duration: 0.08s;
}

/* ── Cards — unified hover lift ── */
.card,
.item-card,
.mp-card {
    transition:
        transform var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) ease,
        box-shadow var(--dur-fast) ease;
}

.grid.kit-grid .card:hover,
.item-card:hover,
.mp-card:hover {
    transform: translateY(-3px);
}

/* Kit creator slots */
.slot {
    transition:
        border-color var(--dur-fast) ease,
        background var(--dur-fast) ease,
        transform var(--dur-fast) var(--ease-out),
        box-shadow var(--dur-fast) ease;
}

.slot:hover:not(.disabled) {
    transform: translateY(-1px);
}

/* ── Site header nav polish ── */
.site-nav a {
    transition: color var(--dur-fast) ease, background var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}

.site-nav a.active {
    box-shadow: inset 0 0 0 1px rgba(77, 141, 255, 0.25);
}

/* ── Randomizer pill nav (index only) ── */
body.randomizer-page .site-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 0 auto 16px;
    padding: 8px;
    background: rgba(13, 18, 30, 0.66);
    border: 1px solid rgba(77, 141, 255, 0.18);
    border-radius: 14px;
    backdrop-filter: blur(10px) saturate(130%);
}

body.randomizer-page .site-nav-link {
    color: #b8c4d4;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid transparent;
    transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease, color var(--dur-fast) ease;
    white-space: nowrap;
}

body.randomizer-page .site-nav-link:hover {
    background: var(--accent-muted);
    border-color: rgba(77, 141, 255, 0.4);
    color: #fff;
}

body.randomizer-page .site-nav-link.active {
    background: linear-gradient(135deg, var(--accent), var(--accent-dim));
    color: #fff;
    box-shadow: 0 6px 16px -8px var(--accent-glow);
}

@media (max-width: 600px) {
    body.randomizer-page .site-nav-link {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* ── Modals — kit-page pattern ── */
.modal-bg {
    z-index: 0;
}

.modal-panel {
    z-index: 1;
}

.modal.open .modal-bg {
    animation: polishFadeIn var(--dur-med) ease;
    backdrop-filter: blur(4px);
}

.modal.open .modal-panel {
    animation: polishSlideUp var(--dur-med) var(--ease-out);
}

.modal-close {
    transition:
        color var(--dur-fast) ease,
        border-color var(--dur-fast) ease,
        transform var(--dur-fast) var(--ease-spring),
        background var(--dur-fast) ease;
}

/* ── Index modals (share, donation, leaderboard) ── */
.share-modal.polish-open,
.donation-modal.polish-open,
.leaderboard-modal.polish-open {
    animation: polishFadeIn var(--dur-med) ease;
    backdrop-filter: blur(6px);
}

.share-modal.polish-open .share-modal-content,
.donation-modal.polish-open .donation-modal-content,
.leaderboard-modal.polish-open .leaderboard-modal-content {
    animation: polishScaleIn var(--dur-med) var(--ease-out);
    border-width: 1px !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 40px 90px -34px rgba(0, 0, 0, 0.92) !important;
}

.share-modal-close,
.donation-modal-close,
.leaderboard-modal-close {
    transition:
        color var(--dur-fast) ease,
        border-color var(--dur-fast) ease,
        background var(--dur-fast) ease,
        transform var(--dur-fast) var(--ease-spring);
}

/* Settings drawer (index) */
.settings-menu.active {
    animation: polishSlideUp var(--dur-med) var(--ease-out);
}

.settings-overlay.active {
    animation: polishFadeIn var(--dur-med) ease;
    backdrop-filter: blur(4px);
}

/* Casino rules panel */
.casino-rules.show {
    animation: polishSlideUp var(--dur-med) var(--ease-out);
}

.casino-rules-overlay.show {
    animation: polishFadeIn var(--dur-med) ease;
    backdrop-filter: blur(4px);
}

/* ── Loading spinner ── */
.spin {
    border-color: rgba(77, 141, 255, 0.15);
    border-top-color: var(--accent);
}

#loading {
    animation: polishFadeIn var(--dur-fast) ease;
    backdrop-filter: blur(10px);
}

/* ── Toast ── */
#toast {
    border-width: 1px;
    border-radius: 12px;
    box-shadow: 0 12px 40px -12px rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(8px);
    transition:
        opacity var(--dur-med) var(--ease-out),
        transform var(--dur-med) var(--ease-out);
}

#toast.show {
    animation: polishToastIn var(--dur-med) var(--ease-out);
}

/* ── Cookie consent ── */
.cookie-consent {
    transform: translateY(100%);
    opacity: 0;
}

.cookie-consent.polish-enter {
    animation: polishCookieIn var(--dur-slow) var(--ease-out) forwards;
}

/* ── Filter bar chips ── */
.filter-bar .bar-item,
.filter-chip,
.chip,
.kit-tag,
.mp-chip {
    transition:
        background var(--dur-fast) ease,
        border-color var(--dur-fast) ease,
        color var(--dur-fast) ease,
        transform var(--dur-fast) ease;
}

.filter-menu {
    animation: polishSlideDown var(--dur-fast) var(--ease-out);
}

/* ── Empty states ── */
.empty-state,
.mp-empty {
    animation: polishFadeIn var(--dur-slow) var(--ease-out) 0.15s both;
}

/* ── Footer link hover ── */
.seo-footer a {
    transition: color var(--dur-fast) ease;
}

.seo-footer a:hover {
    color: #c5d4e8;
}

/* ── Feedback widget ── */
.gtf-panel.open {
    animation: polishSlideUp var(--dur-med) var(--ease-out);
}

.gtf-btn {
    transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) ease;
}

.gtf-btn:hover {
    transform: scale(1.05);
}

/* ── Recent list items ── */
.recent-list .item,
.recent-page .item {
    transition: background var(--dur-fast) ease, border-color var(--dur-fast) ease;
}

/* ── Sitemap tool cards ── */
.sitemap-link {
    transition:
        transform var(--dur-fast) var(--ease-out),
        border-color var(--dur-fast) ease,
        background var(--dur-fast) ease;
}

.sitemap-link:hover {
    transform: translateY(-2px);
}

/* ── Marketplace tabs ── */
.mp-tab {
    transition:
        background var(--dur-fast) ease,
        color var(--dur-fast) ease,
        box-shadow var(--dur-fast) ease;
}

.mp-tabs {
    transition: box-shadow var(--dur-fast) ease;
}

/* ── Vote / stat pills ── */
.vote-pill,
.stat-pill,
.vote-btn {
    transition:
        background var(--dur-fast) ease,
        border-color var(--dur-fast) ease,
        transform var(--dur-fast) ease;
}

.vote-btn:active {
    transform: scale(0.96);
}