/* Responsive baseline for the site.
   320px: minimum supported viewport width. Below that, scaling or overflow is acceptable.
   <576px: mobile-first stacked layouts.
   >=576px: single-row layout when content supports it.
   >=992px: same layout, capped at 960px instead of using a distinct desktop composition. */

html, body {
    min-width: 320px;
}

/* Brand aliases for global use. */
:root, [data-bs-theme="vibe"] {

    /* Palette. */
    --vici-pink: #FF4D9E;
    --vici-cyan: #00FFFF;
    --vici-purple: #8A5BFF;
    --vici-teal: #1DE9B6;

    /* RGB for alpha utilities. */
    --vici-pink-rgb: 255, 77, 158;
    --vici-cyan-rgb: 0, 255, 255;
    --vici-purple-rgb: 138, 91, 255;
    --vici-teal-rgb: 29, 233, 182;
    --vici-surface-dark: #0F1634;
    --vici-cyan-shadow-dark: #063a4f;

    --vici-brand-surface-gradient: linear-gradient(90deg, var(--vici-pink), var(--vici-purple), var(--vici-cyan));

    --vici-text-strong: #fff;
    --vici-text-on-brand-muted: rgba(255, 255, 255, .8);
    --vici-text-on-brand-emphasis: rgba(255, 255, 255, .95);
    --vici-border-on-brand-subtle: rgba(255, 255, 255, .2);

    --vici-overlay-dark-strong: rgba(0, 0, 0, 0.4);
    --vici-shadow-dark-subtle: rgba(0, 0, 0, .1);
    --vici-shadow-dark-medium: rgba(0, 0, 0, .25);
}

/* Prevent 'widows' in headings. */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

/* Background image. */
#bg-fixed {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(var(--vici-overlay-dark-strong), var(--vici-overlay-dark-strong)),
    url("images/background-3.png") center/cover no-repeat;
}

/* Clamp to the standard 960px from 'lg' and up. */
@media (min-width: 992px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl, .container-xxl {
        max-width: 960px;
    }
}

/* Navbar. */
.vici-navbar {
    background: var(--vici-brand-surface-gradient);
    border-bottom: 1px solid var(--vici-border-on-brand-subtle);

    /* Override navbar-dark colors. */
    --bs-navbar-color: var(--vici-text-on-brand-muted);
    --bs-navbar-hover-color: var(--vici-text-strong);
    --bs-navbar-active-color: var(--vici-text-strong);
    --bs-navbar-brand-color: var(--vici-text-on-brand-emphasis);
    --bs-navbar-brand-hover-color: var(--vici-text-strong);

    /* Brighter hamburger. */
    --bs-navbar-toggler-border-color: var(--vici-text-on-brand-muted);
    --bs-navbar-toggler-focus-width: 1;
}

/* Improve legibility over bright backgrounds. */
.vici-navbar .nav-link {
    text-shadow: 0 1px 2px var(--vici-shadow-dark-subtle);
}

/* Footer. */
.vici-footer {
    color: var(--vici-text-on-brand-muted);
    background: var(--vici-brand-surface-gradient);
    border-top: 1px solid var(--vici-border-on-brand-subtle);
}

/* Links. */
.vici-footer a {
    text-decoration: none;
    color: var(--vici-text-on-brand-muted);
}

.vici-footer a:hover {
    text-decoration: underline;
}

/* Keep legal links aligned with the neon palette on dark panels. */
.vici-disclaimer-link {
    color: var(--vici-cyan);
    text-decoration-color: rgba(var(--vici-cyan-rgb), .6);
}

.vici-disclaimer-link:hover {
    color: var(--vici-pink);
    text-decoration-color: rgba(var(--vici-pink-rgb), .7);
}

/* Logo wordmark. */
.vici-logo-wordmark {
    font-weight: 800;
    letter-spacing: .02em;
    color: var(--vici-cyan);
    text-shadow: 0 1px 0 var(--vici-cyan-shadow-dark), 0 -1px 0 var(--vici-cyan-shadow-dark), 1px 0 0 var(--vici-cyan-shadow-dark), -1px 0 0 var(--vici-cyan-shadow-dark), 1px 1px 0 var(--vici-cyan-shadow-dark), 1px -1px 0 var(--vici-cyan-shadow-dark), -1px 1px 0 var(--vici-cyan-shadow-dark), -1px -1px 0 var(--vici-cyan-shadow-dark), 0 0 8px rgba(var(--vici-cyan-rgb), .35), 0 0 14px rgba(var(--vici-cyan-rgb), .25);
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .6));
}

/* Sections. */
.section-panel {
    background: transparent;
    border-radius: 1rem;
}

.section-panel.panel-vibe {
    position: relative;
    box-shadow: 0 0 14px rgba(var(--vici-cyan-rgb), .45), 0 0 36px rgba(var(--vici-cyan-rgb), .28), 0 0 72px rgba(var(--vici-pink-rgb), .22);
}

.section-panel.panel-vibe::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    padding: 3px;
    background: linear-gradient(135deg, var(--vici-cyan), var(--vici-pink));
    mask-image: linear-gradient(var(--vici-text-strong), var(--vici-text-strong)), linear-gradient(var(--vici-text-strong), var(--vici-text-strong));
    mask-origin: content-box, border-box;
    mask-clip: content-box, border-box;
    mask-composite: exclude;
}

.section-panel.panel-vibe::after {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(42% 48% at 18% 22%, rgba(var(--vici-cyan-rgb), .35), transparent 70%), radial-gradient(42% 48% at 82% 78%, rgba(var(--vici-pink-rgb), .28), transparent 70%);
    filter: blur(24px);
}

/* Section title. */
.vici-title {
    font-weight: 800;
    background: linear-gradient(90deg, var(--vici-cyan), var(--vici-pink));
    background-clip: text;
    color: transparent;
}

/* Neon cards. */
.card.neon-card {
    position: relative;
    z-index: 0;
    border: 2px solid transparent;
    border-radius: 1rem;
    background: linear-gradient(var(--vici-surface-dark), var(--vici-surface-dark)) padding-box, linear-gradient(135deg, var(--vici-cyan), var(--vici-pink)) border-box;
    box-shadow: 0 0 12px rgba(var(--vici-cyan-rgb), .85), 0 0 28px rgba(var(--vici-cyan-rgb), .55), 0 0 60px rgba(var(--vici-pink-rgb), .45), inset 0 0 24px rgba(var(--vici-cyan-rgb), .25);
}

.card.neon-card::before {
    content: "";
    position: absolute;
    inset: -18px;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(42% 48% at 18% 22%, rgba(var(--vici-cyan-rgb), .45), transparent 70%), radial-gradient(42% 48% at 82% 78%, rgba(var(--vici-pink-rgb), .35), transparent 70%);
    filter: blur(24px);
}

/* Gradient text. */
.vici-text-gradient {
    background-image: var(--vici-grad, linear-gradient(90deg, var(--vici-teal), var(--vici-cyan)));
    background-clip: text;
    color: transparent;
    text-shadow: 0 1px 2px var(--vici-shadow-dark-medium);
}

/* Preset gradients. */
.vici-grad-teal-cyan {
    --vici-grad: linear-gradient(90deg, var(--vici-teal), var(--vici-cyan));
}

.vici-grad-cyan-purple {
    --vici-grad: linear-gradient(90deg, var(--vici-cyan), var(--vici-purple));
}

.vici-grad-pink-purple {
    --vici-grad: linear-gradient(90deg, var(--vici-pink), var(--vici-purple));
}

.vici-grad-cyan-pink {
    --vici-grad: linear-gradient(90deg, var(--vici-cyan), var(--vici-pink));
}

/* Roadmap. */
.vici-phase {
    width: 3.5rem;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vici-text-strong);
    border: 4px solid transparent;
    background: linear-gradient(var(--vici-surface-dark), var(--vici-surface-dark)) padding-box, linear-gradient(135deg, var(--vici-cyan), var(--vici-pink)) border-box;
    box-shadow: 0 0 10px rgba(var(--vici-cyan-rgb), .45), 0 0 22px rgba(var(--vici-pink-rgb), .25);
}

.vici-phase span {
    font-size: 1.875rem;
    line-height: 1;
}

.vici-phase-strong {
    border-width: 4px;
    background: linear-gradient(var(--vici-surface-dark), var(--vici-surface-dark)) padding-box, linear-gradient(135deg, var(--vici-teal), var(--vici-cyan)) border-box;
    box-shadow: 0 0 14px rgba(var(--vici-cyan-rgb), .70), 0 0 34px rgba(var(--vici-pink-rgb), .35), inset 0 0 16px rgba(var(--vici-cyan-rgb), .25);
}

/* Countdown. */
.vici-countdown-grid {
    --cd-tile-w: clamp(36px, 8vw, 48px);
    --cd-tile-h: clamp(50px, 11vw, 64px);
    --cd-tile-fs: clamp(1.25rem, 3vw, 1.75rem);
    --cd-gap: 1rem;

    display: grid;
    grid-template-columns: repeat(2, auto);
    justify-content: center;
    gap: var(--cd-gap);
}

@media (min-width: 576px) {
    .vici-countdown-grid {
        --cd-gap: 1.5rem;
        grid-template-columns: repeat(4, auto);
    }

    .vici-countdown-unit:not(:last-child)::after {
        content: ":";
        position: absolute;
        left: calc(100% + var(--cd-gap) / 2);
        transform: translateX(-50%);
        top: 0;
        height: var(--cd-tile-h);
        display: flex;
        align-items: center;
        font-size: var(--cd-tile-fs);
        font-weight: 700;
        color: rgba(255, 255, 255, 0.3);
    }
}

.vici-countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    position: relative;
}

.vici-countdown-digits {
    display: flex;
    gap: 0.25rem;
}

.vici-countdown-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.vici-countdown-digit {
    width: var(--cd-tile-w);
    height: var(--cd-tile-h);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--cd-tile-fs);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--vici-text-strong);
    border-radius: .5rem;
    border: 2px solid transparent;
    background: linear-gradient(var(--vici-surface-dark), var(--vici-surface-dark)) padding-box, linear-gradient(135deg, var(--vici-cyan), var(--vici-pink)) border-box;
    box-shadow: 0 0 10px rgba(var(--vici-cyan-rgb), .5), 0 0 24px rgba(var(--vici-pink-rgb), .25), inset 0 0 14px rgba(var(--vici-cyan-rgb), .15);
}

.vici-countdown-date {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.72);
}

.vici-join-flow {
    max-width: 52rem;
}

.vici-join-support {
    font-size: 0.98rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.76);
}

.vici-join-item {
    position: relative;
}

.vici-join-item:not(:last-child) {
    margin-bottom: 1.5rem;
}

.vici-join-marker-wrap {
    width: 3.5rem;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
}

.vici-join-phase {
    width: 3.5rem;
    border-width: 4px;
}

.vici-join-item:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 4.5rem;
    right: 0;
    bottom: -0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.vici-prose p {
    margin-bottom: 0;
    line-height: 1.65;
    text-wrap: pretty;
}

.vici-prose p + p {
    margin-top: 1.5rem;
}

@media (min-width: 576px) {
    .vici-prose p {
        line-height: 1.75;
    }
}

.text-justify {
    text-align: justify;
    text-align-last: left;
    hyphens: none;
    word-break: normal;
    overflow-wrap: normal;
}

/* Audit table. */
.vici-audit-table,
.vici-audit-table th,
.vici-audit-table td {
    background: transparent;
    --bs-table-bg: transparent;
    --bs-table-color: #fff;
    --bs-table-color-state: #fff;
    color: #fff;
}

.vici-audit-table thead tr {
    border-bottom: 1px solid rgba(var(--vici-cyan-rgb), .25);
}

.vici-audit-table tbody tr + tr {
    border-top: 1px solid rgba(var(--vici-cyan-rgb), .12);
}
