/* Full-screen slideshow with a card on top - homepage and /minecraft/. See includes/slideshow.php. */

.hero {
    position: relative; isolation: isolate;
    display: grid; place-items: center;
    min-height: calc(100svh - var(--header-h)); padding: 24px 16px;
    overflow: hidden; background: var(--sunken);
}

.hero-stage { position: absolute; inset: 0; z-index: -1; }
.hero-stage img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0;
    /* the one slow fade on the site: swapping a whole photo in under 200ms reads as a flash */
    transition: opacity 0.5s ease-in-out;
}
.hero-stage img.on { opacity: 1; }

.hero-card {
    max-width: 640px; padding: 20px 24px; text-align: center;
    background: rgb(32 32 32 / .72); border: 1px solid rgb(255 255 255 / .08); border-radius: var(--radius-lg);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    color: var(--text);
}
.hero-card h1 { margin: 0 0 6px; font-size: clamp(26px, 5vw, 42px); font-weight: 700; line-height: 1.15; }
.hero-card p { margin: 0; font-size: clamp(15px, 2.2vw, 18px); line-height: 1.45; }

.hero-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.hero-links a {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px;
    background: var(--btn2); border: 1px solid var(--line-strong); border-radius: 999px;
    color: var(--text); font-size: 14px; font-weight: 500; text-decoration: none;
    transition: background var(--fast), border-color var(--fast);
}
.hero-links a:hover { background: var(--btn2-hover); border-color: var(--accent); }
.hero-links a:active { transform: translateY(1px); }

@media (prefers-reduced-motion: reduce) {
    .hero-stage img { transition: none; }
}

/* homepage: the slideshow fills the window between header and footer, no scroll; cover + bottom anchor crops the top */
body.home { display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; }
.home .hero { flex: 1 1 0; min-height: 0; }
.home .hero-stage img { object-position: center bottom; }
.home .site-footer { margin-top: 0; }