/* =======================================================
   Swammers Maps
   style.css
======================================================= */

@font-face {
    font-family: "Minecrafter-Alt";
    src: url("fonts/Minecrafter.Alt.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Minecrafter-Reg";
    src: url("fonts/Minecrafter.Reg.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Minecraft";
    src: url("fonts/Minecraft.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {

    --background: #f5f5f5;

    --surface: #ffffff;

    --text: #202124;

    --text-light: #666;

    --primary: #2ea3ff;

    --primary-hover: #1787dd;

    --online: #2fb95d;

    --upcoming: #8c8c8c;

    --shadow: 0 18px 45px rgba(0,0,0,.14);

    --transition: .35s ease;

}

html {

    scroll-behavior: smooth;

}

body {

    font-family: "Inter", sans-serif;

    background: var(--background);

    color: var(--text);

    opacity: 0;

    transition: opacity .7s ease;

}

body.loaded {

    opacity: 1;

}

/* ===========================
        Header
=========================== */

header {

    width: 100%;

    background: white;

    border-bottom: 1px solid #ececec;

}

.logo {

    width: min(1300px, 92%);

    margin: auto;

    padding: 26px 0;

}

.logo h1 {
    font-family: "Minecrafter-Reg", sans-serif;

    font-size: 2rem;

    font-weight: 700;

}

.logo p {
    font-family: "Minecraft", sans-serif;

    color: var(--text-light);

    margin-top: 6px;

}

/* ===========================
          Hero
=========================== */

.hero {

    width: min(1300px, 92%);

    margin: 40px auto;

    position: relative;

}

.hero-image {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 7;

    overflow: hidden;

    border-radius: 20px;

    box-shadow: var(--shadow);

    background: #111;

}

/* Hero Images */

.hero-slide {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    object-fit: cover;

    opacity: 0;

    transition: opacity 1.2s ease;

}

.hero-slide.active {

    opacity: 1;

}

/* Dark Overlay */

.overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            rgba(0,0,0,.15),
            rgba(0,0,0,.65)
        );

    z-index: 5;

}

/* Hero Content */

.hero-content {

    position: absolute;

    left: 60px;

    bottom: 55px;

    max-width: 620px;

    z-index: 20;

    color: white;

}

.hero-content h2 {

    font-size: clamp(2.3rem,5vw,4.2rem);

    margin: 15px 0;

    text-shadow: 0 3px 15px rgba(0,0,0,.35);

}

.hero-content p {

    line-height: 1.8;

    font-size: 1.1rem;

    color: rgba(255,255,255,.88);

}

.status {

    display: inline-block;

    padding: 8px 18px;

    border-radius: 999px;

    font-size: .85rem;

    font-weight: 700;

    letter-spacing: .08em;

    text-transform: uppercase;

}

.status.online {

    background: var(--online);

}

.status.upcoming {

    background: var(--upcoming);

}

/* Buttons */

.hero-buttons {

    margin-top: 35px;

    display: flex;

    gap: 18px;

    flex-wrap: wrap;

}

.hero-buttons a {

    text-decoration: none;

    transition: var(--transition);

}

.primary-button {

    background: var(--primary);

    color: white;

    padding: 16px 34px;

    border-radius: 12px;

    font-weight: 600;

}

.primary-button:hover {

    background: var(--primary-hover);

    transform: translateY(-3px);

}

.secondary-button {

    color: white;

    padding: 16px 34px;

    border-radius: 12px;

    border: 2px solid rgba(255,255,255,.55);

    backdrop-filter: blur(10px);

}

.secondary-button:hover {

    background: rgba(255,255,255,.14);

}

/* ===========================
      Server Grid
=========================== */

.server-grid {

    width: min(1300px,92%);

    margin: auto;

    display: grid;

    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));

    gap: 28px;

    padding-bottom: 80px;

}

/* Cards */

.server-card {

    background: white;

    border-radius: 18px;

    overflow: hidden;

    box-shadow: var(--shadow);

    cursor: pointer;

    transition: var(--transition);

    user-select: none;

}

.server-card:hover {

    transform: translateY(-8px);

}

.server-card.active {

    outline: 3px solid var(--primary);

}

.server-card img {

    width: 100%;

    aspect-ratio: 16/9;

    object-fit: cover;

    display: block;

}

.server-info {

    padding: 24px;

}

.server-info h3 {

    margin-top: 15px;

    font-size: 1.45rem;

}

.server-info p {

    margin-top: 10px;

    color: var(--text-light);

    line-height: 1.7;

}

.server-status {

    display: inline-block;

    padding: 6px 14px;

    border-radius: 999px;

    font-size: .78rem;

    font-weight: 700;

    color: white;

}

.server-status.online {

    background: var(--online);

}

.server-status.upcoming {

    background: var(--upcoming);

}

/* ===========================
      Animations
=========================== */

.hero-image.changing {

    animation: heroChange .4s ease;

}

@keyframes heroChange {

    0% {

        transform: scale(1);

        opacity: 1;

    }

    50% {

        transform: scale(1.02);

        opacity: .45;

    }

    100% {

        transform: scale(1);

        opacity: 1;

    }

}

.server-card {

    animation: cardAppear .5s ease;

}

@keyframes cardAppear {

    from {

        opacity: 0;

        transform: translateY(25px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/* ===========================
        Footer
=========================== */

footer {

    text-align: center;

    padding: 40px;

    color: var(--text-light);

}

/* ===========================
      Responsive
=========================== */

@media (max-width: 900px) {

    .hero-content {

        left: 35px;

        bottom: 35px;

        right: 35px;

    }

}

@media (max-width: 700px) {

    .hero {

        width: 100%;

        margin-top: 0;

    }

    .hero-image {

        border-radius: 0;

        aspect-ratio: 4/3;

    }

    .hero-content {

        left: 22px;

        bottom: 22px;

        right: 22px;

    }

    .hero-content h2 {

        font-size: 2.2rem;

    }

    .hero-content p {

        font-size: 1rem;

    }

    .hero-buttons {

        flex-direction: column;

        align-items: stretch;

    }

    .hero-buttons a {

        text-align: center;

    }

}