/* ── 04 Projects — see sections/04-projects/brief.md ──
   Figma 1:1070 title · slides 1:1091…1:1103 (1144h full-bleed) · controls 1:1025/1:1026 BELOW the image, right
   Entry motion from get_motion_context: left = −200px / 1.46s, right = +580px / 0.82s, top = −152px / 0.88s, ease-out */

.projects {
    background: var(--skin-canvas);
    padding-top: calc(39 * var(--u));
    padding-bottom: calc(56 * var(--u));
}
.projects__title { text-align: center; font-weight: 600; }

.projects__slides {
    position: relative;
    height: calc(1144 * var(--u));
    margin-top: calc(51 * var(--u));
    overflow: hidden;
    background: #ddd;
}
.projects__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    z-index: 0;
}
.projects__slide.is-active  { opacity: 1; visibility: visible; z-index: 2; }
.projects__slide.is-leaving { opacity: 1; visibility: visible; z-index: 1; }
.projects__slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Per-direction entry, values from the Figma motion data */
.projects__slide[data-enter="left"]  { --from-x: calc(-200 * var(--u)); --from-y: 0px; --enter-dur: 1.46s; }
.projects__slide[data-enter="right"] { --from-x: calc(580 * var(--u));  --from-y: 0px; --enter-dur: .82s; }
.projects__slide[data-enter="top"]   { --from-x: 0px; --from-y: calc(-152 * var(--u)); --enter-dur: .88s; }
.projects__slide.is-entering { animation: project-enter var(--enter-dur, 1s) ease-out both; }
@keyframes project-enter {
    from { opacity: 0; translate: var(--from-x, 0px) var(--from-y, 0px); }
    to   { opacity: 1; translate: 0 0; }
}

/* Slide titles — position differs per slide */
.projects__name {
    position: absolute;
    font-size: var(--fs-display);
    font-weight: 700;
    line-height: 1;
    color: var(--skin-white);
    text-transform: lowercase;
}
.projects__name--semibold    { font-weight: 600; }
.projects__name--bottom-left { left: calc(69 * var(--u));  bottom: calc(40 * var(--u)); }
.projects__name--top-left    { left: calc(120 * var(--u)); top: calc(44 * var(--u)); }
.projects__name--top-right   { right: calc(118 * var(--u)); top: calc(63 * var(--u)); }

/* Controls row: "<  view more  >" right-aligned 18px below the image (right edge x1886) */
.projects__controls {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: calc(4 * var(--u));
    margin-top: calc(18 * var(--u));
    padding-right: calc(34 * var(--u));
    font-size: var(--fs-body);
    line-height: 1;
}
.projects__arrow {
    padding: 0 2px;
    font: inherit;
    line-height: 1;
    color: var(--skin-black);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color .2s ease;
}
.projects__arrow:hover, .projects__more:hover { color: var(--skin-coral); }
.projects__more { transition: color .2s ease; }