@layer components{.project-list,.project-preview{--project-list-reveal-duration:.9s;--project-list-reveal-ease:var(--ease-expo-out);--project-list-hide-duration:.6s;--project-list-hide-ease:var(--ease-soft-in)}.project-list{--project-list-muted:#c4c4c4;--project-list-bleed:.3em;text-align:center}.project-list-link{padding:0 .08em;display:inline-block;position:relative}.project-list-name{text-transform:uppercase;display:inline-block;position:relative}.project-list-serif,.project-list-sans{white-space:nowrap;display:block}.project-list-serif{font-family:var(--font-serif);color:var(--project-list-muted);clip-path:inset(calc(var(--project-list-bleed) * -1));transition:clip-path var(--project-list-hide-duration) var(--project-list-hide-ease);font-weight:400}.project-list-sans{color:var(--color-foreground);clip-path:inset(calc(100% + var(--project-list-bleed)) calc(var(--project-list-bleed) * -1) calc(var(--project-list-bleed) * -1));transition:clip-path var(--project-list-hide-duration) var(--project-list-hide-ease);position:absolute;top:50%;left:50%;translate:-50% -50%}.project-list-row.is-active .project-list-serif{clip-path:inset(calc(var(--project-list-bleed) * -1) calc(var(--project-list-bleed) * -1) calc(100% + var(--project-list-bleed)));transition:clip-path var(--project-list-reveal-duration) var(--project-list-reveal-ease)}.project-list-row.is-active .project-list-sans{clip-path:inset(calc(var(--project-list-bleed) * -1));transition:clip-path var(--project-list-reveal-duration) var(--project-list-reveal-ease)}.project-preview{z-index:20;aspect-ratio:16/9;pointer-events:none;will-change:transform;width:64vw;position:fixed;top:0;left:0}.project-preview-frame{clip-path:inset(100% 0 0);transition:clip-path var(--project-list-hide-duration) var(--project-list-hide-ease);position:absolute;inset:0;overflow:hidden}.project-preview.is-visible .project-preview-frame{clip-path:inset(0);transition:clip-path var(--project-list-reveal-duration) var(--project-list-reveal-ease)}.project-preview-track{transition:transform 1s var(--ease-expo-out);position:absolute;inset:0}.project-preview-slide{width:100%;height:100%;position:absolute;left:0;overflow:hidden}.project-preview-slide-media{transition:transform 1.2s var(--ease-expo-out);position:absolute;inset:0;transform:scale(1.2)}.project-preview-poster{z-index:1;transition:opacity .4s var(--ease-soft-out);position:absolute;inset:0}.project-preview-poster.is-hidden{opacity:0}.project-preview-slide.is-active .project-preview-slide-media{transform:scale(1)}@media (min-width:768px){.project-preview{aspect-ratio:188/95;width:37.6rem;height:19rem}}@media (prefers-reduced-motion:reduce){.project-list-serif,.project-list-sans,.project-list-row.is-active .project-list-serif,.project-list-row.is-active .project-list-sans,.project-preview-frame,.project-preview.is-visible .project-preview-frame,.project-preview-track,.project-preview-slide-media{transition:none}}@media (max-width:767px){.project-preview{aspect-ratio:2;width:14.6rem}}}