/* /Pages/Career.razor.rz.scp.css */
/* Progressive enhancement: only in browsers that understand CSS scroll-driven
   animations tied to an element's own scroll visibility (animation-timeline: view(),
   Chrome/Edge 115+) do timeline entries expand into place as they scroll into view.
   Elsewhere every entry is simply visible at full size, no animation. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .career-timeline[b-xbbjsrbgia]  .mud-timeline-item-content {
            transform-origin: left center;
            animation-name: timeline-item-expand-b-xbbjsrbgia;
            animation-timing-function: linear;
            animation-fill-mode: both;
            animation-timeline: view();
            animation-range: cover 0% cover 35%;
        }

        @keyframes timeline-item-expand-b-xbbjsrbgia {
            from {
                opacity: 0;
                transform: scale(0.4) translateY(60px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
    }
}
/* /Pages/Home.razor.rz.scp.css */
.hero-stack[b-c39bfvbqdy] {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 24px;
}

.hero-photo[b-c39bfvbqdy] {
    --hero-photo-size: 160px;
    --hero-photo-size-shrunk: 56px;

    width: var(--hero-photo-size);
    height: var(--hero-photo-size);
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(var(--mud-palette-text-primary-rgb), 0.12);
}

/* Progressive enhancement: only in browsers that understand CSS scroll-driven
   animations (Chrome/Edge 115+) does the photo become sticky and shrink.
   Elsewhere .hero-photo above is the whole story: a normal, full-size,
   statically-positioned circular image that scrolls away with the hero. */
@supports (animation-timeline: scroll()) {
    .hero-photo[b-c39bfvbqdy] {
        position: sticky;
        top: calc(var(--mud-appbar-height, 64px) + 16px);
        z-index: 1;
    }

    @media (prefers-reduced-motion: no-preference) {
        .hero-photo[b-c39bfvbqdy] {
            animation-name: hero-photo-shrink-b-c39bfvbqdy;
            animation-timing-function: linear;
            animation-fill-mode: both;
            animation-timeline: scroll(root);
            animation-range: 0px 250px;
        }

        @keyframes hero-photo-shrink-b-c39bfvbqdy {
            from {
                width: var(--hero-photo-size);
                height: var(--hero-photo-size);
            }
            to {
                width: var(--hero-photo-size-shrunk);
                height: var(--hero-photo-size-shrunk);
            }
        }
    }
}

@media (max-width: 599.98px) {
    .hero-stack[b-c39bfvbqdy] {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .hero-photo[b-c39bfvbqdy] {
        --hero-photo-size: 120px;
        --hero-photo-size-shrunk: 48px;
    }
}
/* /Pages/Projects.razor.rz.scp.css */
/* Progressive enhancement: only in browsers that understand CSS scroll-driven
   animations tied to an element's own scroll visibility (animation-timeline: view(),
   Chrome/Edge 115+) do project cards fade/scale into place as they scroll into view.
   Elsewhere every card is simply visible at full size, no animation. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .projects-grid[b-fjv7iql1f8]  .mud-card {
            transform-origin: center;
            animation-name: project-card-reveal-b-fjv7iql1f8;
            animation-timing-function: linear;
            animation-fill-mode: both;
            animation-timeline: view();
            animation-range: cover 0% cover 35%;
        }

        @keyframes project-card-reveal-b-fjv7iql1f8 {
            from {
                opacity: 0;
                transform: scale(0.85) translateY(40px);
            }
            to {
                opacity: 1;
                transform: scale(1) translateY(0);
            }
        }
    }
}