/* Front page. Components and colours live in rp.css - only what this page adds goes here. */

main { overflow-x: clip; } /* the hero's background reaches past the content width - never a sideways scrollbar */

/* Background video: fixed behind everything, with a gradient on top that fades it into the page colour */
.home-video {
    position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
    background: var(--rp-base) url('../assets/video/rust-bg.jpg') left top / cover no-repeat; /* still frame until the video plays */
}
.home-video video { width: 100%; height: 100%; object-fit: cover; object-position: left top; opacity: 0; transition: opacity 800ms ease; }
.home-video video.is-playing { opacity: 1; }
.home-video::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to bottom, #111317a6 0%, #111317d9 55%, var(--rp-base) 100%);
}
@media (prefers-reduced-motion: reduce) { .home-video video { display: none; } }
/* Cards over the video: a touch see-through, like frosted glass */
.home .rp-card, .home-hero-side .rp-card, .home-stats-bar > div { background-color: #171a1fbf; backdrop-filter: blur(6px); }
.home-countdown > div, .home-lead-map, .home-stat { background-color: #1c2027b3; }

/* ---- Hero: big headline + stats on the left, "Next wipe" card and the ReRust card on the right ---- */
.home-hero {
    position: relative; isolation: isolate;
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px 56px; align-items: center;
    max-width: 1340px; padding: 40px 24px 56px;
}

.home-eyebrow { font: 600 13px/1 var(--rp-font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--rp-accent); }
.home-title {
    margin: 20px 0 24px;
    font-size: clamp(44px, 6.4vw, 84px); font-weight: 900; line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase;
    color: var(--rp-white);
}
.home-title span { color: var(--rp-accent); }
.home-lead { max-width: 620px; margin: 0 0 28px; font-size: 18px; line-height: 1.6; color: var(--rp-ink-muted); text-wrap: pretty; }
.home-lead-accent { font-weight: 700; color: var(--rp-accent); }
.home-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }

.home-stats-bar {
    display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 1px; max-width: 640px; margin: 0;
    overflow: hidden; border: 1px solid var(--rp-line); border-radius: var(--rp-radius-lg); background: var(--rp-line);
}
.home-stats-bar > div { padding: 16px 20px; background: var(--rp-panel); }
.home-stats-bar dt { font-size: 13px; color: var(--rp-ink-faint); }
.home-stats-bar dd { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font: 700 26px/1.2 var(--rp-font-mono); color: var(--rp-white); }
.home-stats-bar dd small { font-size: 16px; font-weight: 500; color: var(--rp-ink-faint); }
.home-stats-bar .rp-dot { width: 10px; height: 10px; box-shadow: 0 0 0 4px #22c55e26; }

/* ---- Next wipe card ---- */
.home-hero-side { display: grid; gap: 16px; }
.home-wipe { padding: 24px; box-shadow: 0 24px 60px #0006; }
.home-wipe-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.home-live { display: inline-flex; align-items: center; gap: 6px; font: 12px var(--rp-font-mono); color: var(--rp-ink-faint); }
.home-live img { border-radius: 3px; }
.home-wipe h2 { margin-top: 16px; font-size: 26px; }
.home-wipe-date { margin: 4px 0 20px; color: var(--rp-ink-muted); }
.home-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.home-countdown > div { display: grid; justify-items: center; gap: 4px; padding: 16px 4px; border: 1px solid var(--rp-line); border-radius: var(--rp-radius); background: var(--rp-card); }
.home-countdown strong { font: 700 30px/1 var(--rp-font-mono); font-variant-numeric: tabular-nums; color: var(--rp-accent); }
.home-countdown span { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rp-ink-faint); }
.home-countdown.is-now strong { color: var(--rp-ok-text); }

.home-lead-map {
    display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 12px;
    border: 1px solid var(--rp-line); border-radius: var(--rp-radius); background: var(--rp-card); color: var(--rp-ink);
    transition: border-color var(--rp-ease);
}
.home-lead-map:hover { border-color: var(--rp-line-strong); color: var(--rp-ink); }
.home-lead-map:focus-visible { outline: none; box-shadow: var(--rp-focus); }
.home-lead-map img { width: 88px; height: 88px; flex-shrink: 0; border-radius: var(--rp-radius); object-fit: cover; background: #12404f; }
.home-lead-map-info { display: grid; gap: 4px; flex: 1; min-width: 0; }
.home-lead-map-label { font-size: 12px; color: var(--rp-ink-faint); }
.home-lead-map strong { font-size: 17px; color: var(--rp-white); }
.home-lead-map .rp-mono { font-size: 12px; color: var(--rp-ink-muted); overflow-wrap: anywhere; }
.home-lead-bar { display: block; height: 4px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: var(--rp-raised); }
.home-lead-bar span { display: block; height: 100%; background: var(--rp-accent); }
.home-lead-map > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--rp-ink-faint); transition: transform var(--rp-ease); }
.home-lead-map:hover > svg { transform: translateX(3px); color: var(--rp-ink); }

/* ---- "Powered by ReRust Panel" card ---- */
.home-ad { display: block; padding: 20px; color: var(--rp-ink); }
a.home-ad { transition: border-color var(--rp-ease); }
a.home-ad:hover { border-color: var(--rp-line-strong); color: var(--rp-ink); }
.home-ad-head { display: flex; align-items: center; gap: 14px; }
.home-ad-head img { border-radius: 10px; flex-shrink: 0; }
.home-ad-head > span { display: grid; flex: 1; }
.home-ad-eyebrow { font: 600 11px var(--rp-font-mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--rp-ink-faint); }
.home-ad-head strong { font-size: 20px; font-weight: 800; color: var(--rp-white); }
.home-ad-head strong span { color: var(--rp-accent); }
.home-ad-head > svg { width: 16px; height: 16px; color: var(--rp-ink-faint); }
.home-ad p { margin: 14px 0 0; color: var(--rp-ink-muted); }

@media (max-width: 1100px) {
    .home-hero { grid-template-columns: minmax(0, 1fr); padding-top: 48px; }
    .home-hero-side { max-width: 640px; }
}
@media (max-width: 520px) {
    .home-stats-bar { grid-auto-flow: row; }
    .home-countdown strong { font-size: 24px; }
    .home-lead-map img { width: 64px; height: 64px; }
}

/* Servers on the left (side by side when there are several), the feature cards stacked on the right */
.home { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; align-items: start; max-width: 1340px; padding: 0 24px 56px; scroll-margin-top: 16px; }
.home-servers { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .home { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .home-servers { grid-template-columns: minmax(0, 1fr); } }

/* ---- Server card ---- */
.home-server { padding: 20px; }
.home-server-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.home-server-icon { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--rp-radius); background: var(--rp-accent-soft); color: var(--rp-accent); }
.home-server-icon svg { width: 20px; height: 20px; }
.home-server-head h2 { font-size: 18px; letter-spacing: 0.01em; }
.home-server-sub { margin-top: 2px; font-size: 12px; color: var(--rp-ink-muted); }
.home-server-head .rp-badge { margin-left: auto; text-transform: uppercase; }
.home-badge-active { border: 1px solid #22c55e4d; background: #22c55e1f; color: var(--rp-ok-text); }
.home-badge-soon { border: 1px solid #f59e0b4d; background: #f59e0b1f; color: var(--rp-warn-text); }
.home-badge-offline { border: 1px solid var(--rp-line-strong); background: var(--rp-card); color: var(--rp-ink-faint); }

.home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.home-stats:last-child { margin-bottom: 0; }
.home-stat { display: flex; flex-direction: column-reverse; padding: 16px 12px; border-radius: var(--rp-radius); background: var(--rp-card); text-align: center; }
.home-stat dd { margin: 0; font-size: 20px; font-weight: 700; color: var(--rp-white); overflow-wrap: anywhere; }
.home-stat dt { margin-top: 4px; font-size: 12px; color: var(--rp-ink-faint); }
.home-details { width: 100%; border-color: transparent; }

/* ---- Feature cards (whole card is the link) ---- */
.home-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
@media (min-width: 1101px) { .home-features { grid-template-columns: minmax(0, 1fr); } }
.home-feature { display: block; padding: 20px; color: var(--rp-ink); transition: border-color var(--rp-ease), background-color var(--rp-ease); }
.home-feature:hover { border-color: var(--rp-line-strong); color: var(--rp-ink); }
.home-feature:focus-visible { outline: none; box-shadow: var(--rp-focus); }
.home-feature > svg { width: 20px; height: 20px; color: var(--rp-accent); }
.home-feature h3 { margin: 12px 0 8px; font-size: 18px; font-weight: 700; }
.home-feature p { margin: 0 0 12px; color: var(--rp-ink-muted); }
.home-feature-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--rp-accent); }
.home-feature-link svg { width: 14px; height: 14px; transition: transform var(--rp-ease); }
.home-feature:hover .home-feature-link svg { transform: translateX(3px); }

@media (max-width: 480px) {
    .home-stat { padding: 12px 6px; }
    .home-stat dd { font-size: 16px; }
}