/*
|--------------------------------------------------------------------------
| What You Leave With
|--------------------------------------------------------------------------
*/

.artifacts-showcase {
    position: relative;
    isolation: isolate;

    padding:
        clamp(7rem, 12vw, 12rem)
        clamp(1.25rem, 5vw, 5rem);

    background:
        radial-gradient(
            circle at 50% 25%,
            rgba(255, 101, 0, 0.06),
            transparent 42%
        ),
        #080706;
}

.artifacts-showcase__inner {
    width: min(var(--content-width), 100%);
    margin: 0 auto;
}

.artifacts-showcase__header {
    width: min(62rem, 100%);
    margin: 0 auto;
    text-align: center;
}

.artifacts-showcase__header h2 {
    margin: 0;

    color: var(--color-forged-ivory);

    font-family: var(--font-display);
    font-size: clamp(3rem, 7.5vw, 7rem);
    font-weight: 500;
    line-height: 0.96;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.artifacts-showcase__header > p:last-child {
    width: min(44rem, 100%);

    margin:
        2rem
        auto
        0;

    color: var(--color-ash);

    font-size: clamp(1.05rem, 2vw, 1.3rem);
    text-wrap: balance;
}

.artifacts-showcase__workbench {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(0, 1fr));

    gap: 1rem;

    margin-top: clamp(4rem, 8vw, 7rem);
}

.artifact-card {
    position: relative;
    overflow: hidden;

    grid-column: span 2;

    min-height: 20rem;

    padding:
        clamp(1.5rem, 3vw, 2.25rem);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.032),
            transparent 42%
        ),
        linear-gradient(
            to bottom right,
            rgba(18, 16, 14, 0.96),
            rgba(7, 7, 7, 0.98)
        );

    border:
        1px solid
        rgba(213, 164, 79, 0.19);

    border-radius: 0.35rem;

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.035),
        0 1.5rem 4rem
        rgba(0, 0, 0, 0.28);

    transition:
        border-color 320ms ease,
        transform 320ms ease,
        box-shadow 320ms ease;
}

.artifact-card:nth-child(4) {
    grid-column: 2 / span 2;
}

.artifact-card:hover {
    transform: translateY(-0.35rem);

    border-color:
        rgba(255, 138, 25, 0.45);

    box-shadow:
        inset 0 1px 0
        rgba(255, 255, 255, 0.045),
        0 1.8rem 5rem
        rgba(0, 0, 0, 0.38),
        0 0 2rem
        rgba(255, 101, 0, 0.055);
}

.artifact-card::after {
    content: "";

    position: absolute;
    top: -40%;
    right: -35%;

    width: 15rem;
    height: 15rem;

    opacity: 0.1;

    background:
        radial-gradient(
            circle,
            var(--color-ember),
            transparent 68%
        );

    pointer-events: none;
}

.artifact-card__number {
    margin: 0 0 4rem;

    color: var(--color-molten);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.25em;
}

.artifact-card h3 {
    margin: 0;

    color: var(--color-forged-ivory);

    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3vw, 2.65rem);
    font-weight: 500;
    line-height: 1.02;
    text-wrap: balance;
}

.artifact-card__line {
    display: block;

    width: 4rem;
    height: 1px;

    margin: 1.4rem 0;

    background:
        linear-gradient(
            to right,
            var(--color-molten),
            transparent
        );

    box-shadow:
        0 0 0.7rem
        rgba(255, 101, 0, 0.42);
}

.artifact-card > p:last-child {
    margin: 0;

    color: var(--color-ash);
    line-height: 1.65;
}

.artifacts-showcase__closing {
    width: min(60rem, 100%);

    margin:
        clamp(6rem, 10vw, 10rem)
        auto
        0;

    color: var(--color-forged-ivory);

    font-family: var(--font-display);
    font-size: clamp(2.4rem, 5.5vw, 5rem);
    line-height: 1;
    text-align: center;
    text-wrap: balance;
}

/*
|--------------------------------------------------------------------------
| Beta invitation
|--------------------------------------------------------------------------
*/

.beta-invitation {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    padding:
        clamp(8rem, 14vw, 14rem)
        clamp(1.25rem, 5vw, 5rem);

    background: #030303;
    border-top: 1px solid var(--color-border);
}

.beta-invitation__glow {
    position: absolute;
    left: 50%;
    bottom: -30rem;
    z-index: -1;

    width: min(82rem, 130vw);
    height: 52rem;

    opacity: 0.55;

    background:
        radial-gradient(
            ellipse,
            rgba(255, 87, 0, 0.25),
            rgba(255, 87, 0, 0.055) 42%,
            transparent 72%
        );

    transform: translateX(-50%);

    animation:
        beta-glow-breathe
        14s
        ease-in-out
        infinite;
}

.beta-invitation__inner {
    width: min(68rem, 100%);
    margin: 0 auto;
}

.beta-invitation__header {
    width: min(58rem, 100%);
    margin: 0 auto;
    text-align: center;
}

.beta-invitation__mark {
    width: min(10rem, 34vw);
    height: auto;

    margin:
        0
        auto
        2rem;

    border-radius: 50%;

    filter:
        drop-shadow(
            0 0 1.5rem
            rgba(255, 101, 0, 0.34)
        );
}

.beta-invitation__header h2 {
    margin: 0;

    color: var(--color-forged-ivory);

    font-family: var(--font-display);
    font-size: clamp(3.5rem, 9vw, 8rem);
    font-weight: 500;
    line-height: 0.9;
    letter-spacing: -0.045em;
    text-wrap: balance;
}

.beta-invitation__header > p:last-child {
    width: min(44rem, 100%);

    margin:
        2rem
        auto
        0;

    color: var(--color-tempered-steel);

    font-size: clamp(1.05rem, 2vw, 1.3rem);
    text-wrap: balance;
}

.beta-invitation__notice {
    display: grid;
    gap: 0.3rem;

    width: min(48rem, 100%);

    margin:
        3rem
        auto
        0;

    padding: 1rem 1.25rem;

    border-radius: 0.3rem;
    text-align: center;
}

.beta-invitation__notice--success {
    color: #c8efca;
    background: rgba(25, 84, 39, 0.28);
    border: 1px solid rgba(90, 194, 105, 0.35);
}

.beta-invitation__notice--error {
    color: #ffd2ca;
    background: rgba(105, 26, 20, 0.28);
    border: 1px solid rgba(220, 81, 66, 0.35);
}

/*
|--------------------------------------------------------------------------
| Beta form
|--------------------------------------------------------------------------
*/

.beta-form {
    position: relative;

    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 1.25rem;

    margin-top: clamp(3.5rem, 7vw, 6rem);

    padding:
        clamp(1.5rem, 4vw, 3rem);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            transparent 40%
        ),
        rgba(10, 10, 10, 0.9);

    border:
        1px solid
        rgba(213, 164, 79, 0.2);

    border-radius: 0.4rem;

    box-shadow:
        0 2rem 6rem
        rgba(0, 0, 0, 0.35);
}

.beta-form__field {
    display: grid;
    gap: 0.6rem;
}

.beta-form__field--wide {
    grid-column: 1 / -1;
}

.beta-form label {
    color: var(--color-tempered-steel);

    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.beta-form input[type="text"],
.beta-form input[type="email"],
.beta-form textarea {
    width: 100%;

    color: var(--color-forged-ivory);
    background: rgba(3, 3, 3, 0.76);

    border:
        1px solid
        rgba(213, 164, 79, 0.2);

    border-radius: 0.25rem;

    outline: none;

    transition:
        border-color 220ms ease,
        box-shadow 220ms ease;
}

.beta-form input[type="text"],
.beta-form input[type="email"] {
    min-height: 3.35rem;
    padding: 0 1rem;
}

.beta-form textarea {
    min-height: 8rem;

    padding: 0.9rem 1rem;
    resize: vertical;
}

.beta-form input:focus,
.beta-form textarea:focus {
    border-color:
        rgba(255, 138, 25, 0.66);

    box-shadow:
        0 0 0 3px
        rgba(255, 101, 0, 0.09);
}

.beta-form__consent {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;

    color: var(--color-ash) !important;

    font-size: 0.8rem !important;
    font-weight: 500 !important;
    letter-spacing: normal !important;
    line-height: 1.5;
    text-transform: none !important;
}

.beta-form__consent input {
    margin-top: 0.25rem;
    accent-color: var(--color-molten);
}

.beta-form__actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;

    margin-top: 0.75rem;
}

.beta-form__actions p {
    margin: 0;

    color: var(--color-muted);
    font-size: 0.82rem;
}

.beta-form__trap {
    position: absolute !important;
    left: -10000px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;
}

/*
|--------------------------------------------------------------------------
| Scroll reveal
|--------------------------------------------------------------------------
*/

[data-site-reveal] {
    opacity: 0;

    transform:
        translateY(2rem)
        scale(0.99);

    filter: blur(0.2rem);

    transition:
        opacity 1s ease,
        transform 1.25s
        cubic-bezier(0.22, 1, 0.36, 1),
        filter 1s ease;
}

[data-site-reveal].is-visible {
    opacity: 1;
    transform: none;
    filter: none;
}

@keyframes beta-glow-breathe {
    0%,
    100% {
        opacity: 0.42;

        transform:
            translateX(-50%)
            scale(0.94);
    }

    55% {
        opacity: 0.72;

        transform:
            translateX(-50%)
            scale(1.04);
    }
}

/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 62rem) {
    .artifacts-showcase__workbench {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .artifact-card,
    .artifact-card:nth-child(4) {
        grid-column: auto;
    }

    .artifact-card:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 42rem) {
    .artifacts-showcase__workbench,
    .beta-form {
        grid-template-columns: 1fr;
    }

    .artifact-card,
    .artifact-card:last-child,
    .beta-form__field--wide {
        grid-column: auto;
    }

    .artifact-card {
        min-height: auto;
    }

    .artifact-card__number {
        margin-bottom: 2.5rem;
    }

    .beta-form__actions {
        display: grid;
    }

    .beta-form__actions .button {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-site-reveal] {
        opacity: 1;
        transform: none;
        filter: none;
    }
}