/* ==========================================================================
   VN5.site — custom styles layered on top of Tailwind
   Deep organic palette · premium motion · glassmorphism accents
   ========================================================================== */

:root {
    --ink-900: #08110e;
    --ink-700: #102d25;
    --bronze-400: #c9a266;
    --bronze-300: #d9bc8a;
    --cream-100: #fbf6ec;
    --ease-out-expo: cubic-bezier(.16,1,.3,1);
}

* { -webkit-tap-highlight-color: transparent; }

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

body {
    background:
        radial-gradient(900px 600px at 80% -10%, rgba(179,135,74,0.05), transparent 70%),
        radial-gradient(700px 500px at -10% 110%, rgba(31,77,64,0.10), transparent 70%),
        var(--ink-900);
    background-attachment: fixed;
}

/* -- Typography -------------------------------------------- */
.font-display { font-family: 'Fraunces', ui-serif, Georgia, serif; letter-spacing: -0.01em; }
.font-mono    { font-family: 'JetBrains Mono', ui-monospace, monospace; }

h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

/* -- Custom scrollbar ------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #2c6353, #173d33);
    border-radius: 999px;
    border: 2px solid var(--ink-900);
}
::-webkit-scrollbar-thumb:hover { background: #b3874a; }

::selection { background: rgba(201,162,102,.35); color: #fff; }

/* -- Reveal-on-scroll ------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo);
    will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal][data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal][data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal][data-reveal-delay="3"] { transition-delay: .24s; }
[data-reveal][data-reveal-delay="4"] { transition-delay: .32s; }

/* -- Aurora background blobs ------------------------------ */
@keyframes aurora {
    0%, 100% { transform: translate3d(0,0,0) scale(1); }
    50%      { transform: translate3d(40px,-30px,0) scale(1.08); }
}
.animate-aurora-slow   { animation: aurora 22s var(--ease-out-expo) infinite; }
.animate-aurora-slower { animation: aurora 32s var(--ease-out-expo) infinite reverse; }

/* -- Shimmer underline on links --------------------------- */
.link-underline { position: relative; }
.link-underline::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 100%; height: 1px;
    background: linear-gradient(90deg, var(--bronze-400), transparent);
    transform: scaleX(0); transform-origin: left;
    transition: transform .4s var(--ease-out-expo);
}
.link-underline:hover::after { transform: scaleX(1); }

/* -- Calculator card hover lift --------------------------- */
.calc-card {
    transition: transform .4s var(--ease-out-expo), box-shadow .4s var(--ease-out-expo), border-color .4s var(--ease-out-expo);
}
.calc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px -10px rgba(8,17,14,.55), 0 0 0 1px rgba(201,162,102,.30) inset;
}

/* -- Glass panel ------------------------------------------ */
.glass {
    background: linear-gradient(180deg, rgba(16,45,37,.65), rgba(12,31,26,.85));
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(201,162,102,.16);
}

/* -- Prose for article bodies ----------------------------- */
.prose-vn5 {
    color: #ede2c5;
    font-size: 1.0625rem;
    line-height: 1.78;
}
.prose-vn5 p { margin-bottom: 1.35rem; }
.prose-vn5 p:last-child { margin-bottom: 0; }
.prose-vn5 h2 {
    font-family: 'Fraunces', serif;
    color: #fbf6ec;
    font-size: 1.875rem;
    line-height: 1.2;
    font-weight: 600;
    margin: 2.4rem 0 1rem;
    letter-spacing: -0.01em;
}
.prose-vn5 h3 {
    font-family: 'Fraunces', serif;
    color: #d9bc8a;
    font-size: 1.3125rem;
    font-weight: 600;
    margin: 1.8rem 0 .75rem;
}
.prose-vn5 ul, .prose-vn5 ol { margin: 0 0 1.35rem 1.25rem; }
.prose-vn5 ul li { list-style: disc; margin-bottom: .5rem; }
.prose-vn5 ol li { list-style: decimal; margin-bottom: .5rem; }
.prose-vn5 strong { color: #fbf6ec; font-weight: 600; }
.prose-vn5 em { color: #d9bc8a; }
.prose-vn5 a { color: #c9a266; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.prose-vn5 a:hover { color: #d9bc8a; }
.prose-vn5 blockquote {
    border-left: 3px solid #b3874a;
    padding: .25rem 0 .25rem 1.25rem;
    margin: 1.5rem 0;
    color: #d9bc8a;
    font-style: italic;
}
.prose-vn5 code {
    font-family: 'JetBrains Mono', monospace;
    background: rgba(201,162,102,.10);
    color: #d9bc8a;
    padding: .12rem .4rem;
    border-radius: .25rem;
    font-size: .92em;
}
.prose-vn5 table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: .95rem;
}
.prose-vn5 table th, .prose-vn5 table td {
    border: 1px solid rgba(201,162,102,.18);
    padding: .65rem .8rem;
    text-align: left;
}
.prose-vn5 table th {
    background: rgba(179,135,74,.10);
    color: #fbf6ec;
    font-weight: 600;
}
.prose-vn5 table tr:nth-child(even) td {
    background: rgba(12,31,26,.45);
}

/* -- Calculator form controls ----------------------------- */
.vn5-input {
    width: 100%;
    background: rgba(8,17,14,.55);
    border: 1px solid rgba(201,162,102,.18);
    color: #fbf6ec;
    padding: .7rem .9rem;
    border-radius: .5rem;
    transition: border-color .2s, box-shadow .2s, background .2s;
    font-variant-numeric: tabular-nums;
}
.vn5-input:focus {
    outline: none;
    border-color: rgba(201,162,102,.55);
    box-shadow: 0 0 0 3px rgba(201,162,102,.18);
    background: rgba(8,17,14,.75);
}
.vn5-input::placeholder { color: rgba(251,246,236,.35); }

.vn5-label {
    display: block;
    font-size: .8125rem;
    font-weight: 500;
    color: #d9bc8a;
    margin-bottom: .35rem;
    letter-spacing: .01em;
}

.vn5-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: linear-gradient(135deg, #b3874a, #7a5a2e);
    color: #08110e;
    font-weight: 600;
    padding: .8rem 1.4rem;
    border-radius: .55rem;
    transition: transform .25s var(--ease-out-expo), box-shadow .25s, filter .25s;
    box-shadow: 0 6px 18px -4px rgba(179,135,74,.45), inset 0 1px 0 rgba(255,255,255,.18);
    border: 1px solid rgba(217,188,138,.35);
}
.vn5-btn:hover { transform: translateY(-1px); filter: brightness(1.07); }
.vn5-btn:active { transform: translateY(0); }

.vn5-btn-ghost {
    display: inline-flex; align-items: center; gap: .4rem;
    background: transparent;
    color: #d9bc8a;
    border: 1px solid rgba(201,162,102,.30);
    padding: .55rem 1rem;
    border-radius: .55rem;
    font-weight: 500;
    transition: background .2s, color .2s, border-color .2s;
}
.vn5-btn-ghost:hover { background: rgba(201,162,102,.10); color: #fbf6ec; border-color: rgba(201,162,102,.55); }

/* -- Result card ----------------------------------------- */
.result-card {
    background: linear-gradient(160deg, rgba(16,45,37,.85), rgba(8,17,14,.92));
    border: 1px solid rgba(201,162,102,.25);
    border-radius: 1rem;
    padding: 1.5rem 1.75rem;
    position: relative;
    overflow: hidden;
}
.result-card::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 20% 0%, rgba(201,162,102,.10), transparent 50%);
    pointer-events: none;
}

/* -- Number tick animation ------------------------------- */
.num-tick {
    display: inline-block;
    transition: opacity .25s;
}

/* -- Badges ---------------------------------------------- */
.badge {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .25rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(201,162,102,.25);
    background: rgba(201,162,102,.06);
    color: #d9bc8a;
}

/* -- TOC for articles ------------------------------------ */
.toc-link {
    display: block;
    padding: .35rem .85rem;
    border-left: 2px solid transparent;
    color: rgba(237,226,197,.7);
    font-size: .875rem;
    transition: border-color .2s, color .2s, background .2s;
}
.toc-link:hover, .toc-link.is-active {
    border-left-color: #c9a266;
    color: #fbf6ec;
    background: rgba(201,162,102,.05);
}

/* -- Hero animated underline ----------------------------- */
.hero-underline {
    background: linear-gradient(90deg, #c9a266, #b3874a 60%, transparent);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shimmer 6s linear infinite;
}
@keyframes shimmer {
    0% { background-position: 0% 0%; }
    100% { background-position: -200% 0%; }
}

/* -- Search results -------------------------------------- */
.search-result {
    padding: .55rem .85rem;
    border-radius: .45rem;
    transition: background .15s;
}
.search-result:hover { background: rgba(201,162,102,.08); cursor: pointer; }
.search-result mark { background: rgba(201,162,102,.30); color: inherit; padding: 0 .15rem; border-radius: .2rem; }

/* -- Focus ring ------------------------------------------ */
:focus-visible {
    outline: 2px solid #c9a266;
    outline-offset: 2px;
    border-radius: 4px;
}

/* -- Print ------------------------------------------------ */
@media print {
    header, footer, .no-print { display: none !important; }
    body { background: white; color: black; }
}