/* Additions on top of the original site. */
:root { --mono: ui-monospace, "SF Mono", Menlo, monospace; --ease-out: cubic-bezier(.2,.8,.2,1); --ease-io: cubic-bezier(.76,0,.24,1); --signal: var(--hot); }

/* pixel-fill loader */
.ldr { position: fixed; inset: 0; z-index: 100; background: var(--void); color: #e8ecf0; display: grid; place-items: center;
  clip-path: inset(0 0 0 0); transition: clip-path 1s var(--ease-io); }
.ldr.off { clip-path: inset(0 0 100% 0); }
.ldr-px { width: min(560px, 82vw); display: grid; grid-template-columns: repeat(32, 1fr); gap: 3px; }
.ldr-px i { aspect-ratio: 1; border-radius: 2px; background: rgba(255,255,255,.07); transition: background .15s; }
.ldr-px i.on { background: #e8ecf0; } .ldr-px i.hot { background: var(--hot); }
.ldr-n { position: absolute; right: var(--gutter); bottom: 28px; font: 500 13px/1 var(--mono); }

/* the top bar keeps the name and progress line; the side menu holds the links */
.bar { justify-content: flex-start; }
@media (max-width: 720px) { .wrap { width: auto; margin-left: var(--gutter); margin-right: calc(var(--gutter) + 22px); } }

/* words that ink in as you scroll; <mark> words also get an orange underline */
mark { background: none; color: inherit; }
.iw.hl { background: linear-gradient(var(--hot), var(--hot)) no-repeat 0 94% / 0% .09em; }

/* split-flap beside the Projects heading */
.work-head { align-items: center; }
.flap { display: inline-flex; gap: 5px; font-size: clamp(1.6rem, 3vw, 2.6rem); }
.flap span { width: .82em; height: 1.16em; display: grid; place-items: center; border-radius: .14em; background: var(--void); color: #e8ecf0;
  font: 600 .74em/1 var(--mono); position: relative; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  transition: width .42s var(--ease-out), margin .42s var(--ease-out), opacity .3s; }
.flap span::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(255,255,255,.14); }
.flap span.gap { background: transparent; box-shadow: none; width: .4em; }
.flap span.gap::after { display: none; }
.flap span.new, .flap span.out { width: 0; margin-right: -5px; opacity: 0; }

/* glass slides in the project preview frame */
.px-slides { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; }
.px-stage.has-slides { background: #0c1224; }
.px-stage.has-slides .px-media { visibility: hidden; }

/* contact: flip-disc panel, then the details */
.re-wall { position: relative; width: 100%; aspect-ratio: 4 / 1; border-radius: 18px; overflow: hidden; background: #0c0d0f; box-shadow: 0 0 0 1px rgba(255,255,255,.08); }
.re-wall canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; clip-path: none; background: none; } /* the ride styles clip every canvas in the section */
.ride-end.on > :nth-child(3) { transition-delay: 2.1s; }
.ride-end.on > :nth-child(4) { transition-delay: 2.25s; }
.ride-end.on > :nth-child(5) { transition-delay: 2.4s; }
.re-lede { margin-top: 30px; }
@media (max-width: 720px) { .re-wall { aspect-ratio: 2.2 / 1; } }

/* side menu: a faint rim keeps the drop visible over the dark sections */
.rl path { stroke: rgba(232,236,240,.28); stroke-width: 1.2px; }

/* morphing waves between sections */
.morph { height: 70vh; height: 70svh; position: relative; margin: -1px 0; }
.morph svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* desktop: the project frame takes the free space on the left instead of sitting inside the 1240px column */
@media (min-width: 1100px) {
  .work .px { width: min(1680px, 100vw - 2 * var(--gutter)); margin-left: calc(50% - min(840px, 50vw - var(--gutter))); grid-template-columns: 1.9fr 1fr; }
  .work .px-stage { aspect-ratio: 3 / 2; top: 84px; }
}

/* tools as filters: the intro chips and each project's tags mark the projects built with that tool */
.chips, .tags { pointer-events: auto; }
.chip, .tag { all: unset; display: block; cursor: pointer; margin: -9px -14px; padding: 9px 14px; border-radius: inherit; transition: color .2s; }
.tag { margin: -7px -10px; padding: 7px 10px; }
.chips li:has(.chip), .tags li { transition: background .25s, border-color .25s, color .25s; }
.chips li:has(.chip):hover { background: rgba(255,255,255,.16); border-color: #fff; }
.chip:focus-visible, .tag:focus-visible { outline: 2.5px solid var(--lime); outline-offset: 2px; }
.work .tags li:hover { border-color: rgba(255,255,255,.4); color: #fff; }
.work .tags li:has([aria-pressed="true"]) { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.work-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.px-filter { display: inline-flex; align-items: center; gap: 4px; padding: 6px 6px 6px 14px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 500 .95rem/1 var(--sans); }
.px-filter[hidden] { display: none; }
.pf-clear { all: unset; cursor: pointer; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; font-size: 1.1rem; }
.pf-clear:hover { background: rgba(0,0,0,.1); }
.pf-clear:focus-visible { outline: 2px solid var(--ink); }
/* dimmed through the children: GSAP owns the item's own opacity for its entrance */
.px-item > * { transition: opacity .35s; }
.px-item.dim > * { opacity: .32; }
.px-item.dim:hover > *, .px-item.dim:focus-within > * { opacity: .7; }

/* video loops in the preview frame */
.px-media video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* the outro can be cut short */
.ride-skip { position: absolute; z-index: 2; right: calc(var(--gutter) + var(--rail-w, 44px)); bottom: 28px; padding: 10px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.3); background: rgba(3,3,8,.35); color: #e8ecf0; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .25s, border-color .25s, opacity .4s; }
.ride-skip:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.ride-skip:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.ride-skip[hidden] { display: block; opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }