/* ==========================================================
   Game presentation feature
   ========================================================== */

.worlds-intro {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: clamp(420px, 44vw, 560px);
    place-items: center;
    overflow: hidden;
    padding: clamp(6rem, 14vw, 11rem) var(--space-4);
    text-align: center;
}

.worlds-intro::before,
.worlds-intro::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
}

.worlds-intro::before {
    inset: 0;
    background:
        linear-gradient(to bottom, var(--color-background), transparent 28%, transparent 72%, #0c0f15),
        radial-gradient(circle at 50% 42%, rgb(214 183 122 / 9%), transparent 32rem);
}

.worlds-intro::after {
    width: min(80vw, 44rem);
    aspect-ratio: 1;
    border: 1px solid rgb(214 183 122 / 12%);
    border-radius: 50%;
}

.worlds-intro__content {
    display: grid;
    justify-items: center;
    gap: var(--space-5);
    width: min(100%, 56rem);
}

.worlds-intro__eyebrow {
    color: var(--color-accent);
    font-size: var(--font-size-xs);
    letter-spacing: 0.34em;
    text-transform: uppercase;
}

.worlds-intro__title {
    max-width: 14ch;
    font-size: clamp(2.65rem, 7vw, 6.4rem);
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.worlds-intro__text {
    max-width: 42rem;
    color: var(--color-text-muted);
    font-size: var(--font-size-lg);
    text-wrap: balance;
}

.game-showcase {
    --game-accent: #e2b637;
    --game-showcase-height: clamp(360px, 38vw, 480px);
    position: relative;
    isolation: isolate;
    min-height: var(--game-showcase-height);
    overflow: hidden;
    background: #090b0f;
}

.game-showcase::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(90deg, rgb(6 8 11 / 97%) 0%, rgb(6 8 11 / 89%) 31%, rgb(6 8 11 / 48%) 53%, rgb(6 8 11 / 8%) 78%),
        linear-gradient(to bottom, #0c0f15 0%, transparent 16%, transparent 82%, #0c0f15 100%);
}

.game-showcase__scene {
    position: absolute;
    z-index: -2;
    inset: 0;
    overflow: hidden;
    background: #101217;
}

.game-showcase__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 65% 20%;
    filter: saturate(.86) contrast(1.04) brightness(.83);
    transform: scale(1);
}

.game-showcase__inner {
    display: grid;
    min-height: var(--game-showcase-height);
    align-items: center;
    padding-block: clamp(4.5rem, 8vw, 7rem);
}

.game-showcase__content {
    display: grid;
    justify-items: start;
    gap: var(--space-4);
    width: min(100%, 34rem);
    padding: clamp(1rem, 2vw, 1.75rem);
    border-left: 1px solid rgb(226 182 55 / 38%);
    background: linear-gradient(90deg, rgb(8 10 14 / 58%), transparent);
    backdrop-filter: blur(1.5px);
}

.game-showcase__index {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--game-accent);
    font-size: var(--font-size-xs);
    letter-spacing: 0.27em;
    text-transform: uppercase;
}

.game-showcase__index::before {
    content: "";
    width: 2.5rem;
    height: 1px;
    background: currentColor;
}

.game-showcase__title {
    max-width: 12ch;
    font-size: clamp(2.75rem, 5.6vw, 5.8rem);
    letter-spacing: -0.05em;
    text-wrap: balance;
}

.game-showcase__tagline {
    max-width: 29rem;
    color: #f4e7bc;
    font-family: var(--font-title);
    font-size: clamp(1.2rem, 1.65vw, 1.55rem);
    font-style: italic;
    line-height: 1.35;
    text-wrap: balance;
}

.game-showcase__description {
    max-width: 32rem;
    color: #d1d3d8;
    font-size: var(--font-size-base);
    text-wrap: pretty;
}

.game-showcase__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    color: #abb0b9;
    font-size: var(--font-size-xs);
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.game-showcase__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding-block: .45rem;
    border-bottom: 1px solid rgb(226 182 55 / 65%);
    color: #f5e8bd;
    font-size: var(--font-size-sm);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    transition: color var(--transition), border-color var(--transition);
}

.game-showcase__link::after {
    content: "→";
    font-size: 1.15em;
    transition: transform var(--transition-fast);
}

.game-showcase__link:hover {
    border-color: var(--game-accent);
    color: var(--game-accent);
}

.game-showcase__link:hover::after {
    transform: translateX(0.25rem);
}

.game-showcase__next {
    position: absolute;
    right: clamp(1rem, 4vw, 4rem);
    bottom: clamp(1.5rem, 4vw, 3.5rem);
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    color: rgb(242 238 229 / 52%);
    font-size: var(--font-size-xs);
    letter-spacing: 0.17em;
    text-transform: uppercase;
}

.game-showcase__next::after {
    content: "";
    width: 3rem;
    height: 1px;
    background: linear-gradient(90deg, currentColor, transparent);
}

@media (min-width: 1000px) {
    .game-showcase__image {
        transform: scale(1.06) translateX(-3.5%);
        transform-origin: center;
    }
}

@media (max-width: 760px) {
    .worlds-intro {
        min-height: clamp(420px, 44vw, 560px);
    }

    .game-showcase {
        --game-showcase-height: clamp(400px, 70vw, 480px);
    }

    .game-showcase::before {
        background:
            linear-gradient(to bottom, rgb(8 10 14 / 10%) 0%, rgb(8 10 14 / 36%) 37%, rgb(8 10 14 / 96%) 62%, #080a0e 100%);
    }

    .game-showcase__scene {
        inset: 0 0 48%;
    }

    .game-showcase__image {
        object-position: 65% 20%;
        filter: saturate(.88) contrast(1.03) brightness(.88);
        transform: none;
    }

    .game-showcase__inner {
        align-items: end;
        padding-top: 38svh;
        padding-bottom: 4.5rem;
    }

    .game-showcase__content {
        padding: 1.25rem 0 0 1rem;
        border-left-color: rgb(226 182 55 / 46%);
        background: none;
        backdrop-filter: none;
    }

    .game-showcase__title {
        max-width: 12ch;
        font-size: clamp(2.9rem, 14vw, 4.8rem);
    }

    .game-showcase__next {
        right: auto;
        left: var(--space-4);
    }
}