/* =========================================================
   COMPETITIONS
   ========================================================= */

.competitions {
    position: relative;
    overflow: hidden;

    background: var(--color-surface);
}

.competitions__container {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

    align-items: center;

    gap: var(--space-20);

    width: min(
        calc(100% - (2 * var(--container-padding-mobile))),
        var(--container-max-width)
    );

    min-height: 760px;

    margin-inline: auto;
}


/* =========================================================
   CONTENT
   ========================================================= */

.competitions__content {
    position: relative;
    z-index: var(--z-content);

    max-width: 600px;
}

.competitions__eyebrow {
    display: inline-block;

    margin-bottom: var(--space-4);

    color: var(--color-primary);

    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);

    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.competitions__title {
    max-width: 700px;

    color: var(--color-text-primary);

    font-size: var(--font-size-h1);

    letter-spacing: -0.05em;
}

.competitions__title span {
    display: block;

    color: var(--color-primary);
}

.competitions__description {
    max-width: 580px;

    margin-top: var(--space-6);

    color: var(--color-text-secondary);

    font-size: var(--font-size-lg);

    line-height: var(--line-height-relaxed);
}


/* =========================================================
   HIGHLIGHTS
   ========================================================= */

.competitions__highlights {
    display: flex;

    align-items: center;

    gap: var(--space-12);

    margin-top: var(--space-10);

    padding-top: var(--space-8);

    border-top:
        var(--border-width-thin)
        solid
        var(--color-border);
}

.competitions__highlight {
    display: flex;
    flex-direction: column;

    gap: var(--space-1);
}

.competitions__highlight-number {
    color: var(--color-text-primary);

    font-family: var(--font-heading);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-bold);

    letter-spacing: -0.04em;
}

.competitions__highlight-label {
    color: var(--color-text-muted);

    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);

    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.competitions__button {
    margin-top: var(--space-8);
}


/* =========================================================
   VISUAL
   ========================================================= */

.competitions__visual {
    position: relative;

    display: grid;
    place-items: center;

    width: 100%;
    min-height: 620px;

    isolation: isolate;
}


/* =========================================================
   BACKGROUND GRID
   ========================================================= */

.competitions__visual-grid {
    position: absolute;
    inset: 5%;

    z-index: -2;

    opacity: 0.45;

    background-image:
        linear-gradient(
            var(--color-border) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            var(--color-border) 1px,
            transparent 1px
        );

    background-size: 48px 48px;

    mask-image:
        radial-gradient(
            circle at center,
            black 0%,
            transparent 70%
        );

    -webkit-mask-image:
        radial-gradient(
            circle at center,
            black 0%,
            transparent 70%
        );
}


/* =========================================================
   ORBIT
   ========================================================= */

.competitions__trajectory {
    position: absolute;

    inset: 0;

    display: grid;
    place-items: center;

    pointer-events: none;
}

.competitions__trajectory-svg {
    width: 82%;
    height: 82%;

    overflow: visible;
}

.competitions__orbit {
    fill: none;

    stroke: var(--color-line);

    stroke-width: 1.5;

    stroke-dasharray: 5 8;

    vector-effect: non-scaling-stroke;

    transform-origin: center;

    transform: rotate(-18deg);
}


/* =========================================================
   PLANET
   ========================================================= */

.competitions__planet {
    position: relative;

    display: grid;
    place-items: center;

    width: clamp(240px, 30vw, 390px);
    aspect-ratio: 1;

    border-radius: var(--radius-full);

    /*
     * Temporary visual layer.
     * This will eventually be replaced by the
     * generated 3D planet.
     */

    background:
        radial-gradient(
            circle at 35% 30%,
            color-mix(
                in srgb,
                var(--color-cyan) 35%,
                transparent
            ),
            transparent 28%
        ),
        radial-gradient(
            circle at 50% 50%,
            color-mix(
                in srgb,
                var(--color-primary) 16%,
                var(--color-surface)
            ),
            var(--color-surface)
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-primary) 35%,
            var(--color-border)
        );

    box-shadow:
        0 0 0 1px
        color-mix(
            in srgb,
            var(--color-primary) 8%,
            transparent
        ),
        0 0 70px
        color-mix(
            in srgb,
            var(--color-primary) 15%,
            transparent
        );

    overflow: hidden;

    z-index: var(--z-content);

    /*
     * The 3D implementation will live inside
     * this exact container.
     */
}


/* =========================================================
   PLANET PLACEHOLDER
   ========================================================= */

.competitions__planet-placeholder {
    position: absolute;

    inset: 8%;

    border:
        1px solid
        color-mix(
            in srgb,
            var(--color-cyan) 25%,
            transparent
        );

    border-radius: var(--radius-full);

    overflow: hidden;

    opacity: 0.7;
}

.competitions__planet-placeholder::before,
.competitions__planet-placeholder::after {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;
}

.competitions__planet-placeholder::before {
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0,
            transparent 28px,
            color-mix(
                in srgb,
                var(--color-cyan) 12%,
                transparent
            ) 29px,
            transparent 30px
        );

    transform: rotate(-12deg) scale(1.2);
}

.competitions__planet-placeholder::after {
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 28px,
            color-mix(
                in srgb,
                var(--color-primary) 10%,
                transparent
            ) 29px,
            transparent 30px
        );

    transform: rotate(12deg) scale(1.2);
}

.competitions__planet-placeholder span {
    position: absolute;

    top: 25%;
    left: 30%;

    width: 18px;
    height: 18px;

    border-radius: var(--radius-full);

    background: var(--color-cyan);

    box-shadow: var(--glow-cyan);
}


/* =========================================================
   LOCATIONS
   ========================================================= */

.competitions__location {
    position: absolute;

    display: flex;
    align-items: center;

    gap: var(--space-2);

    padding:
        var(--space-2)
        var(--space-3);

    border:
        var(--border-width-thin)
        solid
        var(--color-border);

    border-radius: var(--radius-full);

    background: color-mix(
        in srgb,
        var(--color-surface) 88%,
        transparent
    );

    backdrop-filter: blur(8px);

    -webkit-backdrop-filter: blur(8px);

    color: var(--color-text-secondary);

    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);

    box-shadow: var(--shadow-sm);

    z-index: var(--z-content);
}

.competitions__location-node {
    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: var(--radius-full);

    background: var(--color-primary);

    box-shadow: var(--glow-primary);
}

.competitions__location--mexico {
    top: 28%;
    left: 4%;
}

.competitions__location--world {
    right: 3%;
    bottom: 27%;
}

.competitions__location--world .competitions__location-node {
    background: var(--color-green);
}

.competitions__planet {
    position: relative;
    width: min(100%, 520px);
    aspect-ratio: 1;
}

#planet-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* =========================================================
   LARGE SCREENS
   ========================================================= */

@media (min-width: 1280px) {

    .competitions__container {
        width: min(
            calc(100% - (2 * var(--container-padding-desktop))),
            var(--container-wide-width)
        );

        gap: var(--space-24);

        min-height: 820px;
    }

    .competitions__visual {
        min-height: 680px;
    }

    .competitions__planet {
        width: 400px;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1023px) {

    .competitions__container {
        grid-template-columns: 1fr 1fr;

        gap: var(--space-8);

        width: min(
            calc(100% - (2 * var(--container-padding-tablet))),
            var(--container-max-width)
        );
    }

    .competitions__visual {
        min-height: 520px;
    }

    .competitions__planet {
        width: clamp(220px, 32vw, 320px);
    }

    .competitions__location {
        font-size: 0.7rem;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .competitions__container {
        display: flex;
        flex-direction: column;

        align-items: stretch;

        gap: var(--space-12);

        width: min(
            calc(100% - (2 * var(--container-padding-mobile))),
            var(--container-max-width)
        );

        min-height: auto;
    }

    .competitions__content {
        max-width: none;
    }

    .competitions__title {
        font-size: var(--font-size-h2);
    }

    .competitions__description {
        font-size: var(--font-size-md);
    }

    .competitions__highlights {
        gap: var(--space-8);
    }

    .competitions__visual {
        min-height: 430px;
    }

    .competitions__visual-grid {
        inset: 0;
    }

    .competitions__planet {
        width: min(72vw, 300px);
    }

    .competitions__trajectory-svg {
        width: 100%;
        height: 100%;
    }

    .competitions__location--mexico {
        top: 18%;
        left: 0;
    }

    .competitions__location--world {
        right: 0;
        bottom: 18%;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .competitions__orbit {
        transform: rotate(-18deg);
    }

}