/* Opt in before either document paints so supported browsers can animate the
 * handoff instead of showing a blank page between navigations. */
@view-transition {
    navigation: auto;
}

/* Reserve the complete header footprint before the custom element module has
 * downloaded and upgraded. Without this, native page visits paint the main
 * content first, then push it down when the navigation component appears. */
turbo-header:not(:defined) {
    display: block;
    height: 72px;
    background: var(--color-parchment, #f7f5f0);
    border-bottom: 1px solid rgba(14, 15, 12, 0.12);
}

/* Give section rails enough room for multi-word labels. Most marketing pages
 * use a 100px Tailwind grid track, which leaves only 76px after the label's
 * right padding and can crowd labels such as “Open Roles” into the divider. */
@media (min-width: 901px) {
    .rail-section {
        grid-template-columns: clamp(128px, 10vw, 144px) minmax(0, 1fr) !important;
    }

    .rail-col {
        min-width: 0;
        padding-left: 24px;
    }

    .rail-col .rail-label {
        max-width: 100%;
        white-space: normal;
        word-break: normal;
        overflow-wrap: normal;
    }
}

@media (min-width: 768px) {
    turbo-header:not(:defined) { height: 76px; }
}

::view-transition-old(root) {
    animation: 160ms ease-out both turbo-page-out;
}

::view-transition-new(root) {
    animation: 220ms ease-out both turbo-page-in;
}

@keyframes turbo-page-out {
    to { opacity: 0; transform: translateY(-4px); }
}

@keyframes turbo-page-in {
    from { opacity: 0; transform: translateY(5px); }
}

/* Page entrance: keep the shell steady, then bring the first, visible part
 * of the page into place in a short sequence. The selector intentionally
 * stops at the hero so lower sections are never held back off-screen. */
body > turbo-header {
    animation: turbo-shell-in 260ms ease-out both;
}

/* Transform animations on a sticky element can make its compositor layer
 * wobble with Safari's dynamic mobile viewport. The mobile header is already
 * present immediately, so keep that layer stationary. */
@media (max-width: 959px) {
    body > turbo-header { animation: none; }
}

body > main {
    animation: turbo-content-in 420ms cubic-bezier(0.22, 1, 0.36, 1) 50ms both;
}

body > main > :first-child {
    animation: turbo-content-in 440ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
}

body > main > :first-child :is(img, video) {
    animation: turbo-media-in 560ms cubic-bezier(0.22, 1, 0.36, 1) 170ms both;
}

/* Onboarding has a different document structure, so give its initial screen
 * the same calm entrance without affecting later questionnaire states. */
body > .site-logo {
    animation: turbo-shell-in 260ms ease-out both;
}

#mainContent {
    animation: turbo-content-in 420ms cubic-bezier(0.22, 1, 0.36, 1) 80ms both;
}

@keyframes turbo-shell-in {
    from { opacity: 0; transform: translateY(-6px); }
}

@keyframes turbo-content-in {
    from { opacity: 0; transform: translateY(16px); }
}

@keyframes turbo-media-in {
    from { opacity: 0; transform: scale(0.985); }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    body > turbo-header,
    body > main,
    body > main > :first-child,
    body > main > :first-child :is(img, video),
    body > .site-logo,
    #mainContent {
        animation: none;
    }
}

/* Keep the current page present while the next HTML document is fetched. */
.turbo-navigation-pending {
    cursor: progress;
}