/* ============================================
   FULLSCREEN MAP — "Our Projects" scroll-driven reveal
   The mask clips the text; the inner span starts shifted
   100% below and rises as scroll progress drives it to 0%.
   ============================================ */

.fullscreen-map__title {
    /* Make sure the title hugs the inline mask on its right-aligned line */
    display: block;
}

.fullscreen-map__title-mask {
    display: inline-block;
    /* No overflow clipping here — the map (z-index: 5) clips the bottom for us,
       and removing the top clip lets the inner text translate past its natural
       resting position so it travels noticeably further upward. */
    overflow: visible;
    line-height: inherit;
    padding-bottom: 0;
    vertical-align: bottom;
}

/* === Anchor the headline to the map below ===
   Slide the title group down by the gap that sits between the header and the
   map (header padding-bottom + margin-bottom in main.css), then push the map
   above it in stacking order. The map's top edge becomes the line the text
   rises out of as the scroll-driven translateY runs from 100% to 0%. */
.fullscreen-map__title-group {
    position: relative;
    z-index: 0;
    transform: translateY(calc(var(--space-8) + var(--space-6)));
    /* Override the main.css gap (var(--space-4)) — the title now travels up
       past its natural top, and this extra gap keeps the eyebrow clear. */
    gap: var(--space-10);
}

.fullscreen-map__card {
    position: relative;
    z-index: 5;
}

.fullscreen-map__title-text {
    display: inline-block;
    transform: translate3d(0, 100%, 0);
    will-change: transform;
}

/* Eyebrow rises with the same mask trick, but staggered later in JS */
.fullscreen-map__eyebrow-mask {
    display: inline-block;
    overflow: hidden;
    line-height: inherit;
    padding-bottom: 0.25em;
    vertical-align: bottom;
}

.fullscreen-map__eyebrow-text {
    display: inline-block;
    transform: translate3d(0, 110%, 0);
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .fullscreen-map__title-text,
    .fullscreen-map__eyebrow-text {
        transform: none;
    }
}