/*
 * Internal pages add a Home link that the homepage does not show.
 * This subtle entrance calls attention to that contextual change.
 */
.context-home-link {
    isolation: isolate;
    position: relative;
}

@media (max-width: 640px) {
    main.pt-32 {
        padding-top: 5.25rem !important;
    }
}

@media (max-width: 767px) {
    nav[data-context-nav="internal"]#navbar {
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    nav[data-context-nav="internal"] #mobile-menu .context-home-link::after {
        display: none;
    }
}

.context-home-link::after {
    background: linear-gradient(90deg, rgba(127, 29, 29, 0.18), rgba(239, 68, 68, 0.08));
    border: 1px solid rgba(248, 113, 113, 0.24);
    border-radius: 9999px;
    box-shadow: 0 0 22px rgba(220, 38, 38, 0.18);
    content: "";
    inset: -0.45rem -0.7rem;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    transform: scaleX(0.74);
    transform-origin: left center;
    z-index: -1;
}

@media (prefers-reduced-motion: no-preference) {
    nav[data-context-nav="internal"].context-nav-from-home .context-nav-list > a {
        transform-origin: left center;
    }

    nav[data-context-nav="internal"].context-nav-from-home .context-nav-list .context-home-link {
        animation: context-home-enter 680ms cubic-bezier(0.22, 1, 0.36, 1) 90ms both;
    }

    nav[data-context-nav="internal"].context-nav-from-home .context-nav-list > a:not(.context-home-link) {
        animation: context-nav-settle 560ms cubic-bezier(0.22, 1, 0.36, 1) 150ms both;
    }

    nav[data-context-nav="internal"].context-nav-from-home .context-home-link::after {
        animation: context-home-glow 1100ms cubic-bezier(0.22, 1, 0.36, 1) 120ms both;
    }

    nav[data-context-nav="internal"].context-nav-from-home #mobile-menu:not(.hidden) .context-mobile-list .context-home-link {
        animation: context-mobile-home-enter 440ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }
}

@media (prefers-reduced-motion: reduce) {
    .context-home-link::after {
        display: none;
    }
}

@keyframes context-home-enter {
    0% {
        filter: blur(2px);
        opacity: 0;
        transform: translateX(-0.75rem);
    }
    60% {
        filter: blur(0);
        opacity: 1;
        transform: translateX(0.12rem);
    }
    100% {
        filter: blur(0);
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes context-nav-settle {
    0% {
        opacity: 0.86;
        transform: translateX(-0.32rem);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes context-home-glow {
    0% {
        opacity: 0;
        transform: scaleX(0.64);
    }
    24% {
        opacity: 1;
        transform: scaleX(1.04);
    }
    100% {
        opacity: 0;
        transform: scaleX(1);
    }
}

@keyframes context-mobile-home-enter {
    0% {
        opacity: 0;
        transform: translateY(-0.35rem);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}