patx/afterdarklabs
Minify inline stylesheet
Commit b232d81 · patx · 2026-09-07T16:03:27-04:00
Comments
No comments yet.
Diff
diff --git a/docs/index.html b/docs/index.html
index 179afdc..99ac287 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -30,943 +30,7 @@
<link rel="preload" href="https://afterdarklabs.io/fonts/ubuntu-400-latin.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://afterdarklabs.io/fonts/ubuntu-700-latin.woff2" as="font" type="font/woff2" crossorigin>
<style>
- @font-face {
- font-family: 'Ubuntu';
- font-style: normal;
- font-weight: 400;
- font-display: swap;
- src: url('https://afterdarklabs.io/fonts/ubuntu-400-latin.woff2') format('woff2');
- }
-
- @font-face {
- font-family: 'Ubuntu';
- font-style: normal;
- font-weight: 500;
- font-display: swap;
- src: url('https://afterdarklabs.io/fonts/ubuntu-500-latin.woff2') format('woff2');
- }
-
- @font-face {
- font-family: 'Ubuntu';
- font-style: normal;
- font-weight: 700;
- font-display: swap;
- src: url('https://afterdarklabs.io/fonts/ubuntu-700-latin.woff2') format('woff2');
- }
-
- :root {
- --page-bg: #000000;
- --site-nav-height: 5.75rem;
- }
-
- *,
- *::before,
- *::after {
- box-sizing: border-box;
- }
-
- html {
- max-width: 100%;
- overflow-x: hidden;
- overflow-x: clip;
- overscroll-behavior-x: none;
- scroll-behavior: smooth;
- line-height: 1.5;
- -webkit-text-size-adjust: 100%;
- }
-
- @media (min-width: 1024px) {
- :root {
- --site-nav-height: 5.5rem;
- }
-
- html {
- font-size: 125%;
- }
-
- }
-
- body {
- margin: 0;
- max-width: 100%;
- overflow-x: hidden;
- overflow-x: clip;
- overscroll-behavior-x: none;
- background: var(--page-bg);
- color: #fff;
- font-family: 'Ubuntu', system-ui, sans-serif;
- line-height: inherit;
- }
-
- h1,
- h2,
- p {
- margin: 0;
- }
-
- h1,
- h2 {
- font-size: inherit;
- font-weight: inherit;
- }
-
- a {
- color: inherit;
- text-decoration: none;
- }
-
- img,
- svg {
- display: block;
- vertical-align: middle;
- }
-
- img {
- max-width: 100%;
- height: auto;
- }
-
- nav {
- position: fixed;
- top: 0;
- z-index: 50;
- width: 100%;
- background: #000;
- -webkit-backdrop-filter: none !important;
- backdrop-filter: none !important;
- }
-
- .nav-shell {
- width: 100%;
- max-width: 80rem;
- margin-inline: auto;
- padding: 1rem;
- }
-
- .mobile-nav,
- .desktop-nav {
- align-items: center;
- justify-content: space-between;
- }
-
- .mobile-nav {
- display: flex;
- gap: 0.75rem;
- }
-
- .desktop-nav {
- display: none;
- }
-
- .nav-brand {
- display: flex;
- align-items: center;
- color: #fff;
- }
-
- .mobile-nav .nav-brand {
- min-width: 0;
- padding: 0.375rem 0.75rem 0.375rem 0.375rem;
- border-radius: 1rem;
- text-align: left;
- transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
- }
-
- .mobile-nav .nav-brand:hover {
- background: rgba(255, 255, 255, 0.1);
- }
-
- .mobile-nav .nav-brand:focus {
- outline: none;
- }
-
- .mobile-nav .nav-brand:focus-visible {
- outline: 2px solid #fff;
- outline-offset: 2px;
- }
-
- .desktop-nav .nav-brand {
- gap: 0.75rem;
- }
-
- @media (min-width: 640px) {
- .nav-shell {
- padding-inline: 1.5rem;
- }
- }
-
- @media (min-width: 1024px) {
- .nav-shell {
- padding-block: 1.25rem;
- }
-
- .mobile-nav {
- display: none;
- }
-
- .desktop-nav {
- display: flex;
- }
- }
-
- .hero-content {
- position: relative;
- z-index: 2;
- display: grid;
- width: 100%;
- max-width: none;
- justify-items: center;
- gap: 2.5rem;
- margin-inline: auto;
- padding-inline: 0;
- padding-block: 0;
- text-align: center;
- }
-
- #hero {
- position: relative;
- display: flex;
- box-sizing: border-box;
- height: 100svh;
- min-height: 100svh;
- align-items: center;
- overflow: hidden;
- background: var(--page-bg);
- padding-top: var(--site-nav-height);
- padding-bottom: 0;
- }
-
- .nav-brand {
- transform-origin: left center;
- }
-
- .nav-cta {
- display: inline-flex;
- flex-shrink: 0;
- min-height: 3.25rem;
- align-items: center;
- justify-content: center;
- padding: 0.75rem 1.15rem;
- border-radius: 1rem;
- background-color: #000 !important;
- color: #fff !important;
- font-size: clamp(1.05rem, 5vw, 1.3rem);
- font-weight: 600;
- line-height: 1;
- letter-spacing: -0.035em;
- transition:
- color 150ms cubic-bezier(0.4, 0, 0.2, 1),
- background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
- }
-
- .nav-cta:hover,
- .nav-cta:focus-visible {
- background-color: #fff !important;
- color: #000 !important;
- }
-
- .nav-brand-word {
- display: flex;
- gap: 0.22em;
- padding-right: 0.08em;
- font-size: clamp(1.25rem, 5.8vw, 1.7rem);
- font-weight: 600;
- line-height: 0.9;
- letter-spacing: -0.055em;
- white-space: nowrap;
- }
-
- .nav-brand-letter {
- display: inline-block;
- transform-origin: center;
- }
-
- @media (min-width: 1024px) {
- .nav-brand-word {
- font-size: clamp(1.5rem, 2.2vw, 2rem);
- }
-
- .nav-cta {
- min-height: 2.75rem;
- padding: 0.72rem 1.35rem;
- font-size: clamp(1.2rem, 2vw, 1.6rem);
- }
- }
-
- .hero-vignette {
- position: absolute;
- inset: 0;
- background: #000;
- pointer-events: none;
- z-index: 1;
- }
-
- @media (max-width: 767px) {
- #hero {
- --mobile-nav-height: 5.75rem;
- box-sizing: border-box;
- height: var(--mobile-hero-height, 100svh);
- min-height: var(--mobile-hero-height, 100svh);
- align-items: stretch;
- padding-top: var(--mobile-nav-height);
- padding-bottom: 0;
- }
-
- .hero-content {
- align-content: center;
- gap: 0;
- padding-block: clamp(1.25rem, 4svh, 2rem);
- }
-
- .hero-content h1 {
- font-size: clamp(2.75rem, 17vw, 4.5rem);
- font-size: clamp(2.75rem, min(17vw, 9.5svh), 4.5rem);
- }
-
- }
-
- .hero-content h1 {
- display: flex;
- flex-direction: column;
- align-items: center;
- width: max-content;
- padding-right: 0.1em;
- font-size: 31vw;
- font-size: min(31vw, calc((100svh - var(--site-nav-height)) * 0.4));
- font-weight: 700;
- line-height: 0.8;
- letter-spacing: -0.075em;
- }
-
- .hero-letter {
- display: inline-block;
- transform-origin: center;
- }
-
- .hero-word {
- display: block;
- }
-
- .hero-scroll-hint {
- position: absolute;
- bottom: max(1rem, env(safe-area-inset-bottom));
- left: 50%;
- z-index: 3;
- display: inline-flex;
- align-items: center;
- gap: 0.55rem;
- color: #fff;
- font-size: clamp(0.7rem, 1.1vw, 0.85rem);
- font-weight: 500;
- line-height: 1;
- letter-spacing: 0.08em;
- text-decoration: none;
- text-transform: uppercase;
- transform: translateX(-50%);
- transition: opacity 160ms ease;
- }
-
- .hero-scroll-hint::after {
- width: 0.58em;
- height: 0.58em;
- border-right: 0.12em solid currentColor;
- border-bottom: 0.12em solid currentColor;
- content: "";
- animation: hero-scroll-nudge 1.65s cubic-bezier(0.45, 0, 0.2, 1) infinite;
- }
-
- .hero-scroll-hint:hover {
- opacity: 0.68;
- }
-
- .hero-scroll-hint:focus-visible {
- outline: 2px solid #fff;
- outline-offset: 0.4rem;
- }
-
- @keyframes hero-scroll-nudge {
- 0%, 100% { transform: translateY(-0.12rem) rotate(45deg); }
- 50% { transform: translateY(0.2rem) rotate(45deg); }
- }
-
- .work-intro {
- position: relative;
- height: 100svh;
- background: var(--page-bg);
- }
-
- .work-intro:not(.work-intro--closing) {
- height: auto;
- }
-
- .work-intro-stage {
- position: sticky;
- top: var(--site-nav-height);
- z-index: 3;
- display: flex;
- box-sizing: border-box;
- height: calc(100svh - var(--site-nav-height));
- align-items: center;
- overflow: hidden;
- padding: clamp(0.75rem, 1.5vw, 1.25rem) clamp(1.5rem, 5vw, 4rem);
- }
-
- .work-intro:not(.work-intro--closing) .work-intro-stage {
- position: relative;
- top: auto;
- height: auto;
- align-items: flex-start;
- padding-top: 0;
- padding-bottom: 25px;
- }
-
- .work-heading {
- display: flex;
- width: 100%;
- max-width: 78rem;
- flex-wrap: wrap;
- gap: 0 0.2em;
- margin: 0 auto;
- color: #fff;
- font-size: clamp(2.85rem, 8vw, 7rem);
- font-weight: 700;
- line-height: 0.94;
- letter-spacing: -0.065em;
- text-wrap: balance;
- }
-
- #work-heading {
- scroll-margin-top: calc(var(--site-nav-height) + 1rem);
- }
-
- .work-heading-words {
- display: contents;
- }
-
- .work-heading-word {
- display: inline-block;
- }
-
- .work-heading-email {
- color: inherit;
- font-weight: 500;
- text-decoration: none;
- transition: font-weight 160ms ease;
- }
-
- .work-heading-email .bi-send {
- display: inline-block;
- width: 0.9em;
- height: 0.9em;
- vertical-align: -0.06em;
- }
-
- .work-heading-email:hover,
- .work-heading-email:focus-visible {
- font-weight: 700;
- }
-
- .work-heading-email:focus-visible {
- outline: 0.055em solid #fff;
- outline-offset: 0.075em;
- }
-
- .work-intro--closing {
- height: auto;
- min-height: 0;
- }
-
- .work-intro--closing .work-intro-stage {
- position: relative;
- top: auto;
- height: auto;
- align-items: flex-start;
- padding-top: 48px;
- padding-bottom: 56px;
- }
-
- .work-stage {
- box-sizing: border-box;
- padding: clamp(0rem, 0.5vw, 0.5rem) clamp(1rem, 2vw, 2rem);
- }
-
- #work {
- scroll-margin-top: 6rem;
- border-top: 1px solid rgba(255, 255, 255, 0.1);
- background: var(--page-bg);
- }
-
- .work-stage-content {
- width: 100%;
- max-width: none;
- min-width: 0;
- margin-inline: auto;
- }
-
- #work-scroller {
- display: grid;
- grid-template-columns: minmax(0, 1fr);
- gap: clamp(0.3rem, 0.6vw, 0.65rem);
- overflow: visible;
- padding: 0;
- touch-action: pan-y pinch-zoom;
- }
-
- #work-scroller > article {
- position: relative;
- isolation: isolate;
- width: 100%;
- min-width: 0;
- aspect-ratio: 16 / 9;
- overflow: hidden;
- border-radius: 0;
- background: var(--page-bg);
- }
-
- #work-scroller > article > .portfolio-media {
- display: block;
- width: 100%;
- height: 100%;
- border-radius: 0;
- }
-
- #work-scroller > article > .portfolio-media > img {
- width: 100%;
- height: 100%;
- aspect-ratio: auto;
- object-fit: cover;
- transition: transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
- }
-
- #work-scroller > article > .portfolio-details {
- position: absolute;
- inset: 0;
- z-index: 2;
- display: flex;
- box-sizing: border-box;
- align-items: center;
- overflow: hidden;
- padding: clamp(1rem, 2.5vw, 2.75rem);
- background: rgba(0, 0, 0, 0.94);
- opacity: 0;
- clip-path: inset(100% 0 0 0);
- pointer-events: none;
- transform: translate3d(0, 7%, 0) skewY(1.2deg);
- transform-origin: center bottom;
- transition:
- opacity 180ms ease,
- clip-path 480ms cubic-bezier(0.16, 1, 0.3, 1),
- transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
- backdrop-filter: blur(0.35rem);
- }
-
- #work-scroller > article:focus-within > .portfolio-details {
- opacity: 1;
- clip-path: inset(0);
- pointer-events: auto;
- transform: none;
- }
-
- #work-scroller > article:focus-within > .portfolio-media > img {
- transform: scale(1.025);
- }
-
- #work-scroller > article:focus-visible {
- outline: 2px solid #fff;
- outline-offset: -2px;
- }
-
- #work-scroller > article > .portfolio-details > p {
- width: 100%;
- margin: 0;
- color: #fff;
- font-size: var(--portfolio-copy-size, clamp(1.2rem, 3vw, 3.5rem));
- font-weight: 500;
- line-height: 0.98;
- letter-spacing: -0.04em;
- text-wrap: balance;
- }
-
- #work-scroller > article:nth-child(1) { --portfolio-copy-size: clamp(12px, calc(8.165vw - 5.73px), 88px); }
- #work-scroller > article:nth-child(2) { --portfolio-copy-size: clamp(12px, calc(7.715vw - 6.08px), 88px); }
- #work-scroller > article:nth-child(3) { --portfolio-copy-size: clamp(12px, calc(6.816vw - 4.68px), 88px); }
- #work-scroller > article:nth-child(4) { --portfolio-copy-size: clamp(12px, calc(7.715vw - 6.08px), 88px); }
- #work-scroller > article:nth-child(5) { --portfolio-copy-size: clamp(12px, calc(8.015vw - 5.58px), 88px); }
- #work-scroller > article:nth-child(6) { --portfolio-copy-size: clamp(12px, calc(6.779vw - 5.50px), 88px); }
- #work-scroller > article:nth-child(7) { --portfolio-copy-size: clamp(12px, calc(6.816vw - 4.68px), 88px); }
- #work-scroller > article:nth-child(8) { --portfolio-copy-size: clamp(12px, calc(6.779vw - 5.50px), 88px); }
-
- .portfolio-description {
- display: block;
- color: #fff;
- }
-
- .portfolio-name {
- font-weight: 700;
- }
-
- .portfolio-live-link {
- display: inline-flex;
- align-items: baseline;
- gap: 0.18em;
- color: #fff;
- font-weight: 500;
- text-decoration: none;
- text-shadow: 0 0 currentColor;
- transition: text-shadow 160ms ease;
- white-space: nowrap;
- }
-
- .portfolio-live-link svg {
- width: 0.72em;
- height: 0.72em;
- flex: none;
- }
-
- .portfolio-live-link svg path {
- stroke: currentColor;
- stroke-width: 0;
- stroke-linecap: round;
- stroke-linejoin: round;
- paint-order: stroke fill;
- transition: stroke-width 160ms ease;
- }
-
- .portfolio-live-link:hover,
- .portfolio-live-link:focus-visible {
- font-weight: 500;
- text-shadow:
- 0.018em 0 currentColor,
- -0.018em 0 currentColor;
- }
-
- .portfolio-live-link:hover svg path,
- .portfolio-live-link:focus-visible svg path {
- stroke-width: 0.45;
- }
-
- .portfolio-live-link:focus-visible {
- outline: 0.09em solid #fff;
- outline-offset: 0.08em;
- }
-
- @media (min-width: 768px) {
- #work-scroller {
- grid-template-columns: repeat(2, minmax(0, 1fr));
- }
-
- #work-scroller > article:nth-child(1) { --portfolio-copy-size: clamp(12px, calc(3.576vw - 0.87px), 88px); }
- #work-scroller > article:nth-child(2) { --portfolio-copy-size: clamp(12px, calc(3.238vw - 0.77px), 88px); }
- #work-scroller > article:nth-child(3) { --portfolio-copy-size: clamp(12px, calc(2.995vw - 0.70px), 88px); }
- #work-scroller > article:nth-child(4) { --portfolio-copy-size: clamp(12px, calc(3.229vw - 0.80px), 88px); }
- #work-scroller > article:nth-child(5) { --portfolio-copy-size: clamp(12px, calc(3.507vw - 0.73px), 88px); }
- #work-scroller > article:nth-child(6) { --portfolio-copy-size: clamp(12px, calc(2.769vw - 0.57px), 88px); }
- #work-scroller > article:nth-child(7) { --portfolio-copy-size: clamp(12px, calc(3.003vw - 0.76px), 88px); }
- #work-scroller > article:nth-child(8) { --portfolio-copy-size: clamp(12px, calc(2.856vw - 0.63px), 88px); }
- }
-
- @media (min-width: 768px) and (hover: hover) {
- #work-scroller > article:hover > .portfolio-details {
- opacity: 1;
- clip-path: inset(0);
- pointer-events: auto;
- transform: none;
- }
-
- #work-scroller > article:hover > .portfolio-media > img {
- transform: scale(1.025);
- }
- }
-
- @media (hover: none), (pointer: coarse) {
- #work-scroller > article {
- cursor: pointer;
- }
-
- #work-scroller > article > .portfolio-details {
- -webkit-backdrop-filter: none;
- backdrop-filter: none;
- }
- }
-
- @supports (animation-timeline: scroll()) {
- .hero-letter,
- .nav-brand-letter {
- animation-duration: auto;
- animation-fill-mode: both;
- animation-timeline: scroll(root block);
- animation-timing-function: linear;
- animation-range-start: var(--hero-range-start);
- animation-range-end: var(--hero-range-end);
- }
-
- .hero-letter {
- animation-name: hero-letter-out;
- will-change: opacity, filter, transform;
- }
-
- .nav-brand-letter {
- animation-name: nav-letter-in;
- will-change: opacity, filter, transform;
- }
-
- .hero-letter:nth-child(1),
- .nav-brand-letter:nth-child(1) {
- --hero-range-start: 4.5svh;
- --hero-range-end: 31svh;
- }
-
- .hero-letter:nth-child(2),
- .nav-brand-letter:nth-child(2) {
- --hero-range-start: 25svh;
- --hero-range-end: 51.5svh;
- }
-
- .hero-letter:nth-child(3),
- .nav-brand-letter:nth-child(3) {
- --hero-range-start: 45.5svh;
- --hero-range-end: 72svh;
- }
-
- .nav-brand {
- animation-name: nav-brand-enable;
- animation-duration: auto;
- animation-fill-mode: both;
- animation-timeline: scroll(root block);
- animation-timing-function: steps(1, end);
- animation-range: 4.5svh calc(4.5svh + 1px);
- }
-
- .hero-scroll-hint {
- animation-name: scroll-hint-out;
- animation-duration: auto;
- animation-fill-mode: both;
- animation-timeline: scroll(root block);
- animation-timing-function: linear;
- animation-range: 45.5svh 72svh;
- }
-
- .work-intro:not(.work-intro--closing) {
- view-timeline-name: --work-intro;
- view-timeline-axis: block;
- }
-
- .work-intro:not(.work-intro--closing) .work-heading-word {
- animation-name: heading-word-in;
- animation-duration: auto;
- animation-fill-mode: both;
- animation-timeline: --work-intro;
- animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
- animation-range-start: var(--word-range-start);
- animation-range-end: var(--word-range-end);
- transform-origin: left bottom;
- }
-
- .work-intro:not(.work-intro--closing) .work-heading-word:nth-child(1) { --word-range-start: cover 38%; --word-range-end: cover 44%; }
- .work-intro:not(.work-intro--closing) .work-heading-word:nth-child(2) { --word-range-start: cover 39.2%; --word-range-end: cover 45.2%; }
- .work-intro:not(.work-intro--closing) .work-heading-word:nth-child(3) { --word-range-start: cover 40.4%; --word-range-end: cover 46.4%; }
- .work-intro:not(.work-intro--closing) .work-heading-word:nth-child(4) { --word-range-start: cover 41.6%; --word-range-end: cover 47.6%; }
- .work-intro:not(.work-intro--closing) .work-heading-word:nth-child(5) { --word-range-start: cover 42.8%; --word-range-end: cover 48.8%; }
- .work-intro:not(.work-intro--closing) .work-heading-word:nth-child(6) { --word-range-start: cover 44%; --word-range-end: cover 50%; }
- .work-intro:not(.work-intro--closing) .work-heading-word:nth-child(7) { --word-range-start: cover 45.2%; --word-range-end: cover 51.2%; }
- .work-intro:not(.work-intro--closing) .work-heading-word:nth-child(8) { --word-range-start: cover 46.4%; --word-range-end: cover 52.4%; }
- .work-intro:not(.work-intro--closing) .work-heading-word:nth-child(9) { --word-range-start: cover 47.6%; --word-range-end: cover 53.6%; }
- .work-intro:not(.work-intro--closing) .work-heading-word:nth-child(10) { --word-range-start: cover 48.8%; --word-range-end: cover 54.8%; }
- .work-intro:not(.work-intro--closing) .work-heading-word:nth-child(11) { --word-range-start: cover 50%; --word-range-end: cover 56%; }
- .work-intro:not(.work-intro--closing) .work-heading-word:nth-child(12) { --word-range-start: cover 51.2%; --word-range-end: cover 57.2%; }
- .work-intro:not(.work-intro--closing) .work-heading-word:nth-child(13) { --word-range-start: cover 52.4%; --word-range-end: cover 58.4%; }
- .work-intro:not(.work-intro--closing) .work-heading-word:nth-child(14) { --word-range-start: cover 53.6%; --word-range-end: cover 59.6%; }
-
- #work-scroller > article {
- --card-start-blur: 7px;
- --card-mid-blur: 3.5px;
- --card-end-blur: 1.25px;
- animation-name: portfolio-card-in-left;
- animation-duration: auto;
- animation-fill-mode: both;
- animation-timeline: view(block);
- animation-timing-function: linear;
- animation-range: cover 4% cover 45%;
- transform-origin: center bottom;
- }
-
- #work-scroller > article:nth-child(even) {
- animation-name: portfolio-card-in-right;
- }
-
- .work-intro--closing {
- view-timeline-name: --closing-intro;
- view-timeline-axis: block;
- }
-
- .work-intro--closing .work-heading-email,
- .work-intro--closing .work-heading-email > .work-heading-word {
- animation-name: heading-word-in;
- animation-duration: auto;
- animation-fill-mode: both;
- animation-timeline: --closing-intro;
- animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
- animation-range-start: var(--closing-range-start);
- animation-range-end: var(--closing-range-end);
- transform-origin: left bottom;
- }
-
- .work-intro--closing .work-heading-email { --closing-range-start: entry 4%; --closing-range-end: entry 20%; }
- .work-intro--closing .work-heading-email > .work-heading-word:nth-child(1) { --closing-range-start: entry 18%; --closing-range-end: entry 34%; }
- .work-intro--closing .work-heading-email > .work-heading-word:nth-child(2) { --closing-range-start: entry 32%; --closing-range-end: entry 48%; }
- .work-intro--closing .work-heading-email > .work-heading-word:nth-child(3) { --closing-range-start: entry 46%; --closing-range-end: entry 62%; }
- .work-intro--closing .work-heading-email > .work-heading-word:nth-child(4) { --closing-range-start: entry 60%; --closing-range-end: entry 76%; }
- .work-intro--closing .work-heading-email > .work-heading-word:nth-child(5) { --closing-range-start: entry 74%; --closing-range-end: entry 90%; }
- .work-intro--closing .work-heading-email > .work-heading-word:nth-child(6) { --closing-range-start: entry 84%; --closing-range-end: entry 100%; }
-
- @media (orientation: portrait) {
- #work-scroller > article:last-child {
- animation-range-end: cover 30%;
- }
- }
-
- @media (min-width: 768px) and (orientation: portrait) {
- #work-scroller > article:nth-last-child(2) {
- animation-range-end: cover 30%;
- }
- }
- }
-
- @keyframes hero-letter-out {
- 0% { opacity: 1; filter: blur(0); transform: scale(1); }
- 35% { opacity: 0.72; filter: blur(0.005em); transform: scale(0.984); }
- 65% { opacity: 0.28; filter: blur(0.013em); transform: scale(0.961); }
- 100% { opacity: 0; filter: blur(0.018em); transform: scale(0.945); }
- }
-
- @keyframes nav-letter-in {
- 0% {
- opacity: 0;
- filter: blur(0.32rem);
- transform: translate3d(-1.35rem, 0, 0) rotate(-12deg) skewX(-18deg) scale(0.38, 1.28);
- }
- 35% {
- opacity: 0.28;
- filter: blur(0.22rem);
- transform: translate3d(-0.82rem, 0.08rem, 0) rotate(-6deg) skewX(-10deg) scale(0.61, 1.15);
- }
- 65% {
- opacity: 0.72;
- filter: blur(0.09rem);
- transform: translate3d(-0.18rem, -0.04rem, 0) rotate(1.5deg) skewX(2deg) scale(0.9, 1.04);
- }
- 82% {
- opacity: 0.92;
- filter: blur(0.03rem);
- transform: translate3d(0.05rem, 0.02rem, 0) rotate(-0.8deg) skewX(-1deg) scale(1.02, 0.99);
- }
- 100% { opacity: 1; filter: blur(0); transform: none; }
- }
-
- @keyframes nav-brand-enable {
- from { visibility: hidden; pointer-events: none; }
- to { visibility: visible; pointer-events: auto; }
- }
-
- @keyframes scroll-hint-out {
- from { opacity: 1; visibility: visible; pointer-events: auto; }
- to { opacity: 0; visibility: hidden; pointer-events: none; }
- }
-
- @keyframes heading-word-in {
- from {
- opacity: 0;
- filter: blur(0.18em);
- transform: translate3d(0, 0.42em, 0) rotate(1.5deg);
- }
- to { opacity: 1; filter: blur(0); transform: none; }
- }
-
- @keyframes portfolio-card-in-left {
- 0% {
- opacity: 0;
- filter: blur(var(--card-start-blur));
- transform: translate3d(-6vw, 96px, 0) rotate(-5deg) skewY(0deg) scale(0.93, 1.065);
- }
- 50% {
- opacity: 0.82;
- filter: blur(var(--card-mid-blur));
- transform: translate3d(-2vw, 42px, 0) rotate(-1.5deg) skewY(-0.8deg) scale(0.975, 1.025);
- }
- 72% {
- opacity: 1;
- filter: blur(var(--card-end-blur));
- transform: translate3d(0.35vw, 8px, 0) rotate(0.7deg) skewY(0.25deg) scale(1.006, 0.996);
- }
- 100% { opacity: 1; filter: blur(0); transform: none; }
- }
-
- @keyframes portfolio-card-in-right {
- 0% {
- opacity: 0;
- filter: blur(var(--card-start-blur));
- transform: translate3d(6vw, 96px, 0) rotate(5deg) skewY(0deg) scale(0.93, 1.065);
- }
- 50% {
- opacity: 0.82;
- filter: blur(var(--card-mid-blur));
- transform: translate3d(2vw, 42px, 0) rotate(1.5deg) skewY(0.8deg) scale(0.975, 1.025);
- }
- 72% {
- opacity: 1;
- filter: blur(var(--card-end-blur));
- transform: translate3d(-0.35vw, 8px, 0) rotate(-0.7deg) skewY(-0.25deg) scale(1.006, 0.996);
- }
- 100% { opacity: 1; filter: blur(0); transform: none; }
- }
-
- @media (hover: none), (pointer: coarse) {
- #work-scroller > article {
- --card-start-blur: 0px;
- --card-mid-blur: 0px;
- --card-end-blur: 0px;
- }
- }
-
- @media (prefers-reduced-motion: reduce) {
- .nav-brand,
- .nav-brand-letter,
- .hero-letter,
- .hero-scroll-hint,
- .work-heading-word,
- #work-scroller > article {
- animation: none !important;
- opacity: 1;
- filter: none;
- visibility: visible;
- transform: none;
- }
-
- .nav-brand,
- .hero-scroll-hint {
- pointer-events: auto;
- }
-
- .hero-scroll-hint::after {
- animation: none;
- }
-
- .work-intro {
- height: auto;
- }
-
- .work-intro-stage {
- position: relative;
- top: auto;
- height: auto;
- }
-
- #work-scroller > article > .portfolio-media > img,
- #work-scroller > article > .portfolio-details {
- transition: none;
- }
- }
-
+@font-face{font-family:Ubuntu;font-style:normal;font-weight:400;font-display:swap;src:url(https://afterdarklabs.io/fonts/ubuntu-400-latin.woff2)format("woff2")}@font-face{font-family:Ubuntu;font-style:normal;font-weight:500;font-display:swap;src:url(https://afterdarklabs.io/fonts/ubuntu-500-latin.woff2)format("woff2")}@font-face{font-family:Ubuntu;font-style:normal;font-weight:700;font-display:swap;src:url(https://afterdarklabs.io/fonts/ubuntu-700-latin.woff2)format("woff2")}:root{--page-bg:#000;--site-nav-height:5.75rem}*,:before,:after{box-sizing:border-box}html{overscroll-behavior-x:none;scroll-behavior:smooth;-webkit-text-size-adjust:100%;max-width:100%;line-height:1.5;overflow-x:clip}@media (width>=1024px){:root{--site-nav-height:5.5rem}html{font-size:125%}}body{overscroll-behavior-x:none;background:var(--page-bg);color:#fff;max-width:100%;font-family:Ubuntu,system-ui,sans-serif;line-height:inherit;margin:0;overflow-x:clip}h1,h2,p{margin:0}h1,h2{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:none}img,svg{vertical-align:middle;display:block}img{max-width:100%;height:auto}nav{z-index:50;background:#000;width:100%;position:fixed;top:0;backdrop-filter:none!important}.nav-shell{width:100%;max-width:80rem;margin-inline:auto;padding:1rem}.mobile-nav,.desktop-nav{justify-content:space-between;align-items:center}.mobile-nav{gap:.75rem;display:flex}.desktop-nav{display:none}.nav-brand{color:#fff;align-items:center;display:flex}.mobile-nav .nav-brand{text-align:left;border-radius:1rem;min-width:0;padding:.375rem .75rem .375rem .375rem;transition:background-color .15s cubic-bezier(.4,0,.2,1)}.mobile-nav .nav-brand:hover{background:#ffffff1a}.mobile-nav .nav-brand:focus{outline:none}.mobile-nav .nav-brand:focus-visible{outline-offset:2px;outline:2px solid #fff}.desktop-nav .nav-brand{gap:.75rem}@media (width>=640px){.nav-shell{padding-inline:1.5rem}}@media (width>=1024px){.nav-shell{padding-block:1.25rem}.mobile-nav{display:none}.desktop-nav{display:flex}}.hero-content{z-index:2;text-align:center;justify-items:center;gap:2.5rem;width:100%;max-width:none;margin-inline:auto;padding-block:0;padding-inline:0;display:grid;position:relative}#hero{box-sizing:border-box;background:var(--page-bg);height:100svh;min-height:100svh;padding-top:var(--site-nav-height);align-items:center;padding-bottom:0;display:flex;position:relative;overflow:hidden}.nav-brand{transform-origin:0}.nav-cta{letter-spacing:-.035em;border-radius:1rem;flex-shrink:0;justify-content:center;align-items:center;min-height:3.25rem;padding:.75rem 1.15rem;font-size:clamp(1.05rem,5vw,1.3rem);font-weight:600;line-height:1;transition:color .15s cubic-bezier(.4,0,.2,1),background-color .15s cubic-bezier(.4,0,.2,1);display:inline-flex;color:#fff!important;background-color:#000!important}.nav-cta:hover,.nav-cta:focus-visible{color:#000!important;background-color:#fff!important}.nav-brand-word{letter-spacing:-.055em;white-space:nowrap;gap:.22em;padding-right:.08em;font-size:clamp(1.25rem,5.8vw,1.7rem);font-weight:600;line-height:.9;display:flex}.nav-brand-letter{transform-origin:50%;display:inline-block}@media (width>=1024px){.nav-brand-word{font-size:clamp(1.5rem,2.2vw,2rem)}.nav-cta{min-height:2.75rem;padding:.72rem 1.35rem;font-size:clamp(1.2rem,2vw,1.6rem)}}.hero-vignette{pointer-events:none;z-index:1;background:#000;position:absolute;inset:0}@media (width<=767px){#hero{--mobile-nav-height:5.75rem;box-sizing:border-box;height:var(--mobile-hero-height,100svh);min-height:var(--mobile-hero-height,100svh);padding-top:var(--mobile-nav-height);align-items:stretch;padding-bottom:0}.hero-content{align-content:center;gap:0;padding-block:clamp(1.25rem,4svh,2rem)}.hero-content h1{font-size:clamp(2.75rem,min(17vw,9.5svh),4.5rem)}}.hero-content h1{width:max-content;font-size:31vw;font-size:min(31vw, calc((100svh - var(--site-nav-height)) * .4));letter-spacing:-.075em;flex-direction:column;align-items:center;padding-right:.1em;font-weight:700;line-height:.8;display:flex}.hero-letter{transform-origin:50%;display:inline-block}.hero-word{display:block}.hero-scroll-hint{bottom:max(1rem, env(safe-area-inset-bottom));z-index:3;color:#fff;letter-spacing:.08em;text-transform:uppercase;align-items:center;gap:.55rem;font-size:clamp(.7rem,1.1vw,.85rem);font-weight:500;line-height:1;text-decoration:none;transition:opacity .16s;display:inline-flex;position:absolute;left:50%;transform:translate(-50%)}.hero-scroll-hint:after{content:"";border-bottom:.12em solid;border-right:.12em solid;width:.58em;height:.58em;animation:1.65s cubic-bezier(.45,0,.2,1) infinite hero-scroll-nudge}.hero-scroll-hint:hover{opacity:.68}.hero-scroll-hint:focus-visible{outline-offset:.4rem;outline:2px solid #fff}@keyframes hero-scroll-nudge{0%,to{transform:translateY(-.12rem)rotate(45deg)}50%{transform:translateY(.2rem)rotate(45deg)}}.work-intro{background:var(--page-bg);height:100svh;position:relative}.work-intro:not(.work-intro--closing){height:auto}.work-intro-stage{top:var(--site-nav-height);z-index:3;box-sizing:border-box;height:calc(100svh - var(--site-nav-height));align-items:center;padding:clamp(.75rem,1.5vw,1.25rem) clamp(1.5rem,5vw,4rem);display:flex;position:sticky;overflow:hidden}.work-intro:not(.work-intro--closing) .work-intro-stage{align-items:flex-start;height:auto;padding-top:0;padding-bottom:25px;position:relative;top:auto}.work-heading{color:#fff;letter-spacing:-.065em;text-wrap:balance;flex-wrap:wrap;gap:0 .2em;width:100%;max-width:78rem;margin:0 auto;font-size:clamp(2.85rem,8vw,7rem);font-weight:700;line-height:.94;display:flex}#work-heading{scroll-margin-top:calc(var(--site-nav-height) + 1rem)}.work-heading-words{display:contents}.work-heading-word{display:inline-block}.work-heading-email{color:inherit;font-weight:500;text-decoration:none;transition:font-weight .16s}.work-heading-email .bi-send{vertical-align:-.06em;width:.9em;height:.9em;display:inline-block}.work-heading-email:hover,.work-heading-email:focus-visible{font-weight:700}.work-heading-email:focus-visible{outline-offset:.075em;outline:.055em solid #fff}.work-intro--closing{height:auto;min-height:0}.work-intro--closing .work-intro-stage{align-items:flex-start;height:auto;padding-top:48px;padding-bottom:56px;position:relative;top:auto}.work-stage{box-sizing:border-box;padding:clamp(0rem,.5vw,.5rem) clamp(1rem,2vw,2rem)}#work{background:var(--page-bg);border-top:1px solid #ffffff1a;scroll-margin-top:6rem}.work-stage-content{width:100%;min-width:0;max-width:none;margin-inline:auto}#work-scroller{touch-action:pan-y pinch-zoom;grid-template-columns:minmax(0,1fr);gap:clamp(.3rem,.6vw,.65rem);padding:0;display:grid;overflow:visible}#work-scroller>article{isolation:isolate;aspect-ratio:16/9;background:var(--page-bg);border-radius:0;width:100%;min-width:0;position:relative;overflow:hidden}#work-scroller>article>.portfolio-media{border-radius:0;width:100%;height:100%;display:block}#work-scroller>article>.portfolio-media>img{aspect-ratio:auto;object-fit:cover;width:100%;height:100%;transition:transform .6s cubic-bezier(.16,1,.3,1)}#work-scroller>article>.portfolio-details{z-index:2;box-sizing:border-box;opacity:0;clip-path:inset(100% 0 0);pointer-events:none;transform-origin:bottom;backdrop-filter:blur(.35rem);background:#000000f0;align-items:center;padding:clamp(1rem,2.5vw,2.75rem);transition:opacity .18s,clip-path .48s cubic-bezier(.16,1,.3,1),transform .52s cubic-bezier(.16,1,.3,1);display:flex;position:absolute;inset:0;overflow:hidden;transform:translateY(7%)skewY(1.2deg)}#work-scroller>article:focus-within>.portfolio-details{opacity:1;clip-path:inset(0);pointer-events:auto;transform:none}#work-scroller>article:focus-within>.portfolio-media>img{transform:scale(1.025)}#work-scroller>article:focus-visible{outline-offset:-2px;outline:2px solid #fff}#work-scroller>article>.portfolio-details>p{color:#fff;width:100%;font-size:var(--portfolio-copy-size,clamp(1.2rem, 3vw, 3.5rem));letter-spacing:-.04em;text-wrap:balance;margin:0;font-weight:500;line-height:.98}#work-scroller>article:first-child{--portfolio-copy-size:clamp(12px, calc(8.165vw - 5.73px), 88px)}#work-scroller>article:nth-child(2){--portfolio-copy-size:clamp(12px, calc(7.715vw - 6.08px), 88px)}#work-scroller>article:nth-child(3){--portfolio-copy-size:clamp(12px, calc(6.816vw - 4.68px), 88px)}#work-scroller>article:nth-child(4){--portfolio-copy-size:clamp(12px, calc(7.715vw - 6.08px), 88px)}#work-scroller>article:nth-child(5){--portfolio-copy-size:clamp(12px, calc(8.015vw - 5.58px), 88px)}#work-scroller>article:nth-child(6){--portfolio-copy-size:clamp(12px, calc(6.779vw - 5.5px), 88px)}#work-scroller>article:nth-child(7){--portfolio-copy-size:clamp(12px, calc(6.816vw - 4.68px), 88px)}#work-scroller>article:nth-child(8){--portfolio-copy-size:clamp(12px, calc(6.779vw - 5.5px), 88px)}.portfolio-description{color:#fff;display:block}.portfolio-name{font-weight:700}.portfolio-live-link{color:#fff;text-shadow:0 0;white-space:nowrap;align-items:baseline;gap:.18em;font-weight:500;text-decoration:none;transition:text-shadow .16s;display:inline-flex}.portfolio-live-link svg{flex:none;width:.72em;height:.72em}.portfolio-live-link svg path{stroke:currentColor;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;paint-order:stroke fill;transition:stroke-width .16s}.portfolio-live-link:hover,.portfolio-live-link:focus-visible{text-shadow:.018em 0,-.018em 0;font-weight:500}.portfolio-live-link:hover svg path,.portfolio-live-link:focus-visible svg path{stroke-width:.45px}.portfolio-live-link:focus-visible{outline-offset:.08em;outline:.09em solid #fff}@media (width>=768px){#work-scroller{grid-template-columns:repeat(2,minmax(0,1fr))}#work-scroller>article:first-child{--portfolio-copy-size:clamp(12px, calc(3.576vw - .87px), 88px)}#work-scroller>article:nth-child(2){--portfolio-copy-size:clamp(12px, calc(3.238vw - .77px), 88px)}#work-scroller>article:nth-child(3){--portfolio-copy-size:clamp(12px, calc(2.995vw - .7px), 88px)}#work-scroller>article:nth-child(4){--portfolio-copy-size:clamp(12px, calc(3.229vw - .8px), 88px)}#work-scroller>article:nth-child(5){--portfolio-copy-size:clamp(12px, calc(3.507vw - .73px), 88px)}#work-scroller>article:nth-child(6){--portfolio-copy-size:clamp(12px, calc(2.769vw - .57px), 88px)}#work-scroller>article:nth-child(7){--portfolio-copy-size:clamp(12px, calc(3.003vw - .76px), 88px)}#work-scroller>article:nth-child(8){--portfolio-copy-size:clamp(12px, calc(2.856vw - .63px), 88px)}}@media (width>=768px) and (hover:hover){#work-scroller>article:hover>.portfolio-details{opacity:1;clip-path:inset(0);pointer-events:auto;transform:none}#work-scroller>article:hover>.portfolio-media>img{transform:scale(1.025)}}@media (hover:none),(pointer:coarse){#work-scroller>article{cursor:pointer}#work-scroller>article>.portfolio-details{backdrop-filter:none}}@supports (animation-timeline:scroll()){.hero-letter,.nav-brand-letter{animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root);animation-range-start:var(--hero-range-start);animation-range-end:var(--hero-range-end)}.hero-letter{will-change:opacity, filter, transform;animation-name:hero-letter-out}.nav-brand-letter{will-change:opacity, filter, transform;animation-name:nav-letter-in}.hero-letter:first-child,.nav-brand-letter:first-child{--hero-range-start:4.5svh;--hero-range-end:31svh}.hero-letter:nth-child(2),.nav-brand-letter:nth-child(2){--hero-range-start:25svh;--hero-range-end:51.5svh}.hero-letter:nth-child(3),.nav-brand-letter:nth-child(3){--hero-range-start:45.5svh;--hero-range-end:72svh}.nav-brand{animation-name:nav-brand-enable;animation-duration:auto;animation-timing-function:step-end;animation-fill-mode:both;animation-timeline:scroll(root);animation-range:4.5svh calc(4.5svh + 1px)}.hero-scroll-hint{animation-name:scroll-hint-out;animation-duration:auto;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:scroll(root);animation-range:45.5svh 72svh}.work-intro:not(.work-intro--closing){view-timeline-name:--work-intro;view-timeline-axis:block}.work-intro:not(.work-intro--closing) .work-heading-word{animation-name:heading-word-in;animation-duration:auto;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both;animation-timeline:--work-intro;animation-range-start:var(--word-range-start);animation-range-end:var(--word-range-end);transform-origin:0 100%}.work-intro:not(.work-intro--closing) .work-heading-word:first-child{--word-range-start:cover 38%;--word-range-end:cover 44%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(2){--word-range-start:cover 39.2%;--word-range-end:cover 45.2%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(3){--word-range-start:cover 40.4%;--word-range-end:cover 46.4%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(4){--word-range-start:cover 41.6%;--word-range-end:cover 47.6%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(5){--word-range-start:cover 42.8%;--word-range-end:cover 48.8%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(6){--word-range-start:cover 44%;--word-range-end:cover 50%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(7){--word-range-start:cover 45.2%;--word-range-end:cover 51.2%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(8){--word-range-start:cover 46.4%;--word-range-end:cover 52.4%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(9){--word-range-start:cover 47.6%;--word-range-end:cover 53.6%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(10){--word-range-start:cover 48.8%;--word-range-end:cover 54.8%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(11){--word-range-start:cover 50%;--word-range-end:cover 56%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(12){--word-range-start:cover 51.2%;--word-range-end:cover 57.2%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(13){--word-range-start:cover 52.4%;--word-range-end:cover 58.4%}.work-intro:not(.work-intro--closing) .work-heading-word:nth-child(14){--word-range-start:cover 53.6%;--word-range-end:cover 59.6%}#work-scroller>article{--card-start-blur:7px;--card-mid-blur:3.5px;--card-end-blur:1.25px;animation-name:portfolio-card-in-left;animation-duration:auto;transform-origin:bottom;animation-timing-function:linear;animation-fill-mode:both;animation-timeline:view();animation-range:cover 4% cover 45%}#work-scroller>article:nth-child(2n){animation-name:portfolio-card-in-right}.work-intro--closing{view-timeline-name:--closing-intro;view-timeline-axis:block}.work-intro--closing .work-heading-email,.work-intro--closing .work-heading-email>.work-heading-word{animation-name:heading-word-in;animation-duration:auto;animation-timing-function:cubic-bezier(.16,1,.3,1);animation-fill-mode:both;animation-timeline:--closing-intro;animation-range-start:var(--closing-range-start);animation-range-end:var(--closing-range-end);transform-origin:0 100%}.work-intro--closing .work-heading-email{--closing-range-start:entry 4%;--closing-range-end:entry 20%}.work-intro--closing .work-heading-email>.work-heading-word:first-child{--closing-range-start:entry 18%;--closing-range-end:entry 34%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(2){--closing-range-start:entry 32%;--closing-range-end:entry 48%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(3){--closing-range-start:entry 46%;--closing-range-end:entry 62%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(4){--closing-range-start:entry 60%;--closing-range-end:entry 76%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(5){--closing-range-start:entry 74%;--closing-range-end:entry 90%}.work-intro--closing .work-heading-email>.work-heading-word:nth-child(6){--closing-range-start:entry 84%;--closing-range-end:entry 100%}@media (orientation:portrait){#work-scroller>article:last-child{animation-range-end:cover 30%}}@media (width>=768px) and (orientation:portrait){#work-scroller>article:nth-last-child(2){animation-range-end:cover 30%}}}@keyframes hero-letter-out{0%{opacity:1;filter:blur();transform:scale(1)}35%{opacity:.72;filter:blur(.005em);transform:scale(.984)}65%{opacity:.28;filter:blur(.013em);transform:scale(.961)}to{opacity:0;filter:blur(.018em);transform:scale(.945)}}@keyframes nav-letter-in{0%{opacity:0;filter:blur(.32rem);transform:translate(-1.35rem)rotate(-12deg)skew(-18deg)scale(.38,1.28)}35%{opacity:.28;filter:blur(.22rem);transform:translate(-.82rem,.08rem)rotate(-6deg)skew(-10deg)scale(.61,1.15)}65%{opacity:.72;filter:blur(.09rem);transform:translate(-.18rem,-.04rem)rotate(1.5deg)skew(2deg)scale(.9,1.04)}82%{opacity:.92;filter:blur(.03rem);transform:translate(.05rem,.02rem)rotate(-.8deg)skew(-1deg)scale(1.02,.99)}to{opacity:1;filter:blur();transform:none}}@keyframes nav-brand-enable{0%{visibility:hidden;pointer-events:none}to{visibility:visible;pointer-events:auto}}@keyframes scroll-hint-out{0%{opacity:1;visibility:visible;pointer-events:auto}to{opacity:0;visibility:hidden;pointer-events:none}}@keyframes heading-word-in{0%{opacity:0;filter:blur(.18em);transform:translateY(.42em)rotate(1.5deg)}to{opacity:1;filter:blur();transform:none}}@keyframes portfolio-card-in-left{0%{opacity:0;filter:blur(var(--card-start-blur));transform:translate(-6vw,96px)rotate(-5deg)skewY(0)scale(.93,1.065)}50%{opacity:.82;filter:blur(var(--card-mid-blur));transform:translate(-2vw,42px)rotate(-1.5deg)skewY(-.8deg)scale(.975,1.025)}72%{opacity:1;filter:blur(var(--card-end-blur));transform:translate(.35vw,8px)rotate(.7deg)skewY(.25deg)scale(1.006,.996)}to{opacity:1;filter:blur();transform:none}}@keyframes portfolio-card-in-right{0%{opacity:0;filter:blur(var(--card-start-blur));transform:translate(6vw,96px)rotate(5deg)skewY(0)scale(.93,1.065)}50%{opacity:.82;filter:blur(var(--card-mid-blur));transform:translate(2vw,42px)rotate(1.5deg)skewY(.8deg)scale(.975,1.025)}72%{opacity:1;filter:blur(var(--card-end-blur));transform:translate(-.35vw,8px)rotate(-.7deg)skewY(-.25deg)scale(1.006,.996)}to{opacity:1;filter:blur();transform:none}}@media (hover:none),(pointer:coarse){#work-scroller>article{--card-start-blur:0px;--card-mid-blur:0px;--card-end-blur:0px}}@media (prefers-reduced-motion:reduce){.nav-brand,.nav-brand-letter,.hero-letter,.hero-scroll-hint,.work-heading-word,#work-scroller>article{opacity:1;filter:none;visibility:visible;transform:none;animation:none!important}.nav-brand,.hero-scroll-hint{pointer-events:auto}.hero-scroll-hint:after{animation:none}.work-intro{height:auto}.work-intro-stage{height:auto;position:relative;top:auto}#work-scroller>article>.portfolio-media>img,#work-scroller>article>.portfolio-details{transition:none}}
</style>
<script type="application/ld+json">
{