/* =========================================================
   EXPERIENCES
   ========================================================= */

.experiences {
    position: relative;
    overflow: hidden;
    background: var(--color-surface);
}

.experiences__container {
    width: min(
        calc(100% - (2 * var(--container-padding-mobile))),
        var(--container-max-width)
    );
    
    margin-inline: auto;

    padding-block:
        var(--section-padding-mobile);
}


/* =========================================================
   INTRO
   ========================================================= */

.experiences__intro {
    max-width: 760px;
    margin-bottom: var(--space-20);
}

.experiences__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;
}

.experiences__title {
    max-width: 850px;

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

    font-size: var(--font-size-h2);
    letter-spacing: -0.04em;
}

.experiences__title span {
    color: var(--color-primary);
}

.experiences__description {
    max-width: 650px;
    margin-top: var(--space-6);

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

    font-size: var(--font-size-lg);
    line-height: var(--line-height-relaxed);
}


/* =========================================================
   JOURNEY
   ========================================================= */

.experiences__journey {
    position: relative;
    min-height: 1050px;
}


/* =========================================================
   TRAJECTORY
   ========================================================= */

.experiences__trajectory {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

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

.experiences__trajectory-line {
    fill: none;

    stroke: var(--color-line);
    stroke-width: 2;

    stroke-dasharray: 8 10;

    vector-effect: non-scaling-stroke;

    transition:
        stroke var(--transition-normal),
        filter var(--transition-normal);
}


/* =========================================================
   EXPERIENCE ITEM
   ========================================================= */

.experiences__item {
    position: absolute;

    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: center;

    width: min(100%, 720px);

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


/* =========================================================
   POSITIONING
   ========================================================= */

.experiences__item--academy {
    top: 0;
    left: 0;
}

.experiences__item--fest {
    top: 390px;
    right: 0;
}

.experiences__item--camp {
    top: 760px;
    left: 10%;
}


/* =========================================================
   NODE
   ========================================================= */

.experiences__node {
    position: absolute;

    width: 16px;
    height: 16px;

    border: 2px solid var(--color-primary);
    border-radius: var(--radius-full);

    background: var(--color-surface);

    box-shadow:
        0 0 0 5px color-mix(
            in srgb,
            var(--color-primary) 12%,
            transparent
        ),
        var(--glow-primary);

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

.experiences__node span {
    position: absolute;
    inset: 3px;

    border-radius: inherit;

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


/* =========================================================
   NODE POSITIONS
   ========================================================= */

.experiences__item--academy .experiences__node {
    top: 50%;
    right: -8px;

    transform: translateY(-50%);
}

.experiences__item--fest .experiences__node {
    top: 50%;
    left: -8px;

    transform: translateY(-50%);
}

.experiences__item--camp .experiences__node {
    top: 50%;
    right: -8px;

    transform: translateY(-50%);
}


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

.experiences__visual {
    position: relative;

    aspect-ratio: 4 / 3;

    overflow: hidden;

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

    border-radius: var(--radius-2xl);

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

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

    transition:
        transform var(--transition-slow),
        border-color var(--transition-normal),
        box-shadow var(--transition-slow);
}

.experiences__visual:hover {
    transform: translateY(-6px);

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

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


/* =========================================================
   IMAGE PLACEHOLDERS
   ========================================================= */

.experiences__image {
    position: relative;

    display: flex;
    align-items: flex-end;

    width: 100%;
    height: 100%;

    padding: var(--space-6);

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--color-surface-elevated),
            var(--color-surface)
        );
}


/*
 * Temporary visual treatment.
 *
 * These backgrounds will be replaced by real RoboGenius
 * photography/assets once we select the images.
 */

.experiences__image::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

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

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

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    box-shadow:
        0 0 60px
        color-mix(
            in srgb,
            var(--color-primary) 12%,
            transparent
        );
}

.experiences__image::after {
    content: "";

    position: absolute;

    width: 70px;
    height: 70px;

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

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    background: var(--color-primary);

    opacity: 0.12;
}


/* =========================================================
   IMAGE VARIANTS
   ========================================================= */

.experiences__image--academy {
    background:
        linear-gradient(
            135deg,
            var(--color-surface-elevated),
            color-mix(
                in srgb,
                var(--color-primary) 8%,
                var(--color-surface)
            )
        );
}

.experiences__image--fest {
    background:
        linear-gradient(
            135deg,
            var(--color-surface-elevated),
            color-mix(
                in srgb,
                var(--color-yellow) 8%,
                var(--color-surface)
            )
        );
}

.experiences__image--camp {
    background:
        linear-gradient(
            135deg,
            var(--color-surface-elevated),
            color-mix(
                in srgb,
                var(--color-cyan) 8%,
                var(--color-surface)
            )
        );
}

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

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

    font-family: var(--font-heading);
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: var(--font-weight-bold);

    letter-spacing: -0.05em;
}


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

.experiences__content {
    position: relative;
    padding: var(--space-4);
}

.experiences__number {
    display: block;

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

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

    font-family: var(--font-heading);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);

    letter-spacing: 0.08em;
}

.experiences__label {
    display: block;

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

    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;
}

.experiences__name {
    color: var(--color-text-primary);

    font-size: var(--font-size-h3);
    letter-spacing: -0.04em;
}

.experiences__text {
    margin-top: var(--space-4);

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

    font-size: var(--font-size-md);
    line-height: var(--line-height-relaxed);
}

.experiences__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);

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

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

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);

    transition:
        color var(--transition-normal),
        transform var(--transition-normal);
}

.experiences__link span {
    transition: transform var(--transition-fast);
}

.experiences__link:hover {
    color: var(--color-primary);
}

.experiences__link:hover span {
    transform: translateX(4px);
}


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

@media (min-width: 768px) {

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

    .experiences__item {
        gap: var(--space-12);
    }

}


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

@media (max-width: 767px) {

    .experiences__intro {
        margin-bottom: var(--space-12);
    }

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

    .experiences__journey {
        min-height: auto;

        display: flex;
        flex-direction: column;

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

    /*
     * On mobile the trajectory is intentionally removed.
     * The visual narrative becomes vertical.
     */

    .experiences__trajectory {
        display: none;
    }

    .experiences__item,
    .experiences__item--academy,
    .experiences__item--fest,
    .experiences__item--camp {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        display: flex;
        flex-direction: column;

        align-items: stretch;

        width: 100%;

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

    .experiences__node,
    .experiences__item--academy .experiences__node,
    .experiences__item--fest .experiences__node,
    .experiences__item--camp .experiences__node {
        position: absolute;

        top: 0;
        left: 50%;

        right: auto;

        transform: translate(-50%, -50%);
    }

    .experiences__content {
        padding: 0;
    }

    .experiences__visual {
        aspect-ratio: 16 / 10;
    }

}


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

@media (min-width: 1280px) {

    .experiences__journey {
        min-height: 1100px;
    }

    .experiences__item--academy {
        top: 0;
        left: 2%;
    }

    .experiences__item--fest {
        top: 410px;
        right: 2%;
    }

    .experiences__item--camp {
        top: 790px;
        left: 12%;
    }

}


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

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

    .experiences__visual,
    .experiences__link,
    .experiences__link span {
        transition: none;
    }

}