@import url("https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..800&display=swap");

@font-face {
  font-family: "Inter Display";
  src:
    local("Inter Display"),
    local("InterDisplay");
  font-weight: 500 800;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --font-display:
    "Inter Display",
    "InterDisplay",
    Inter,
    "Helvetica Neue",
    Helvetica,
    Arial,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  --background: #fff;
  --foreground: #000;
  --overlay: #000;
  --overlay-foreground: #fff;
  --bubble-blue: #000;
  --about-selected-color: var(--background);
  --bubble-x: 50vw;
  --bubble-y: 50vh;
  --bubble-left: 50vw;
  --bubble-top: 50vh;
  --bubble-stretch-x: 1;
  --bubble-stretch-y: 1;
  --bubble-rotation: 0deg;
  --bubble-breath: 1;
  --bubble-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
  --menu-float-rotation: 0deg;
  --loading-dot-core-scale: 0.14;
  --menu-left: 50vw;
  --menu-top: 50vh;
  --menu-center-x: 50vw;
  --menu-center-y: 50vh;
  --menu-size: 34.75rem;
  --menu-width: var(--menu-size);
  --menu-height: var(--menu-size);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --spring: cubic-bezier(0.2, 1.35, 0.32, 1);
  --home-entry-duration: 1760ms;
  --home-entry-spring: cubic-bezier(0.18, 1.16, 0.24, 1);
  --bubble-spring-scale: cubic-bezier(0.24, 0, 0.32, 1.32);
  --bubble-spring-layout: cubic-bezier(0.24, 0, 0.34, 1.16);
  --menu-grow-spring: cubic-bezier(0.2, 1, 0.22, 1);
  --name-size: clamp(2.625rem, 4.1667vw, 4.5rem);
  --name-weight: 500;
  --name-leading: normal;
  --name-tracking: -0.04em;
  --name-top: 46.1056%;
  --home-name-side: 14.1782%;
  --intro-first-edge: calc(50% - 1.735vw);
  --intro-last-edge: calc(50% + 1.735vw);
  --nav-size: 2rem;
  --nav-weight: 500;
  --nav-leading: normal;
  --nav-tracking: -0.01em;
  --bubble-size: 6.25rem;
  --bubble-close-size: var(--bubble-size);
  --loading-dot-size: clamp(0.625rem, 0.6944vw, 0.75rem);
  --safe-edge: 0px;
  --projects-rail-left: 6.25rem;
  --projects-rail-top: 6.25rem;
  --projects-navigation-gap: 6.25rem;
  --projects-left: var(--projects-rail-left);
  --projects-top: calc(var(--projects-rail-top) + var(--bubble-size) + var(--projects-navigation-gap));
  --projects-content-left: 32.625rem;
  --projects-content-right: 6.25rem;
  --projects-content-width: min(
    69.125rem,
    calc(100vw - var(--projects-content-left) - var(--projects-content-right))
  );
  --projects-body-size: 1.25rem;
  --projects-body-leading: 1.875rem;
  --projects-lead-size: 2rem;
  --projects-lead-leading: 3.125rem;
  --about-flower-width: clamp(17rem, 21.4699vw, 23.1875rem);
  --about-flower-height: calc(var(--about-flower-width) * 360 / 371);
  --about-flower-sticky-top: 6.25rem;
  --about-flower-start-top: var(--about-flower-sticky-top);
  --about-copy-left: 17.9977vw;
  --about-copy-width: 63.6574vw;
  --about-copy-gap: clamp(9rem, 14.9306vw, 16.125rem);
  --about-copy-size: clamp(1.75rem, 2.0833vw, 2.25rem);
  --about-copy-leading: clamp(2.5rem, 2.8935vw, 3.125rem);
  font-family: var(--font-display);
}

* {
  box-sizing: border-box;
}

html,
body {
  min-width: 320px;
  min-height: 100%;
  margin: 0;
  background: var(--background);
}

body {
  overflow: hidden;
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  font-synthesis: none;
  text-rendering: geometricPrecision;
}

body[data-page="projects"],
body[data-page="about"] {
  overflow-x: hidden;
  overflow-y: auto;
}

body[data-page="about"] {
  background-color: var(--about-selected-color);
  transition: background-color 260ms var(--ease-out);
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}

.portfolio-shell {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  background: var(--background);
}

.ribbon-field {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0;
  overflow: visible;
  pointer-events: none;
  transition: opacity 720ms var(--ease-out);
  touch-action: none;
}

.ribbon-hit-path {
  fill: none;
  stroke: transparent;
  pointer-events: stroke;
  cursor: grab;
}

.ribbon-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  mix-blend-mode: multiply;
  pointer-events: none;
  shape-rendering: geometricPrecision;
  will-change: transform, stroke-dashoffset;
}

.ribbon-controls {
  display: none;
}

.is-ribbon-dragging {
  cursor: grabbing;
  user-select: none;
}

.is-ribbon-dragging .ribbon-hit-path {
  cursor: grabbing;
}

.is-ready .ribbon-field {
  opacity: 1;
  pointer-events: auto;
}

.is-settled .ribbon-field,
.is-settled .identity-lockup,
.is-settled .menu-bubble,
.is-settled .bubble-scale,
.is-settled .bubble-core,
.is-settled .bubble-close,
.is-settled .navigation-overlay,
.is-settled .navigation-list a {
  transition-duration: 1ms;
}

.is-nav-open .ribbon-field {
  opacity: 1;
  pointer-events: none;
}

.is-nav-open .ribbon-hit-path {
  pointer-events: none;
}

.is-nav-open .portfolio-shell {
  z-index: 0;
  opacity: 1;
  background: var(--background);
  pointer-events: none;
}

.identity-stage {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.identity-lockup {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  color: var(--foreground);
  font-family: var(--font-display);
  font-size: var(--name-size);
  font-weight: var(--name-weight);
  line-height: var(--name-leading);
  letter-spacing: var(--name-tracking);
  white-space: nowrap;
}

.identity-word {
  position: absolute;
  top: var(--name-top);
  display: block;
  min-width: max-content;
  pointer-events: none;
  opacity: 1;
  transition:
    left var(--home-entry-duration) var(--home-entry-spring),
    right var(--home-entry-duration) var(--home-entry-spring),
    transform var(--home-entry-duration) var(--home-entry-spring),
    opacity 520ms var(--ease-out);
}

.identity-first {
  left: var(--intro-first-edge);
  transform: translateX(-100%);
}

.identity-last {
  left: var(--intro-last-edge);
  right: auto;
  text-align: right;
  transform: translateX(0);
}

.is-ready .identity-first,
.is-nav-open .identity-first {
  left: var(--home-name-side);
  transform: translateX(0);
}

.is-ready .identity-last,
.is-nav-open .identity-last {
  left: calc(100% - var(--home-name-side));
  right: auto;
  transform: translateX(-100%);
}

.is-home-settled .identity-first {
  left: var(--home-name-side) !important;
  transform: translateX(0) !important;
  transition: none;
}

.is-home-settled .identity-last {
  left: calc(100% - var(--home-name-side)) !important;
  right: auto !important;
  transform: translateX(-100%) !important;
  transition: none;
}

.projects-page {
  position: relative;
  z-index: 1;
  display: none;
  min-height: 100vh;
  padding-bottom: 10rem;
  background: var(--background);
  color: var(--foreground);
  font-family:
    Inter,
    "Helvetica Neue",
    Helvetica,
    Arial,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}

body[data-page="projects"] .portfolio-shell {
  visibility: hidden;
  pointer-events: none;
}

body[data-page="projects"] .projects-page {
  display: block;
}

.about-page {
  position: relative;
  z-index: 1;
  display: none;
  min-height: max(100vh, 122vw);
  padding-top: 0.1px;
  padding-bottom: var(--about-flower-start-top);
  background-color: var(--about-selected-color);
  color: var(--foreground);
  font-family: var(--font-display);
  transition: background-color 260ms var(--ease-out);
}

body[data-page="about"] .portfolio-shell,
body[data-page="about"] .projects-page {
  visibility: hidden;
  pointer-events: none;
}

body[data-page="about"] .about-page {
  display: block;
}

body[data-page="about"].is-intro .menu-bubble {
  width: var(--bubble-size);
  height: var(--bubble-size);
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

body[data-page="about"].is-intro .bubble-core {
  transform: rotate(var(--bubble-rotation)) scale(1);
}

.about-flower {
  position: sticky;
  top: var(--about-flower-sticky-top);
  z-index: 4;
  width: var(--about-flower-width);
  height: var(--about-flower-height);
  margin-top: var(--about-flower-start-top);
  margin-left: auto;
  margin-right: auto;
  pointer-events: none;
}

.about-petal {
  --petal-hover-x: 0%;
  --petal-hover-y: 0%;
  position: absolute;
  display: block;
  border: 0;
  border-radius: 50%;
  padding: 0;
  opacity: 0;
  clip-path: circle(0% at 50% 50%);
  cursor: pointer;
  pointer-events: auto;
  transform:
    translate3d(var(--petal-enter-x, 0), var(--petal-enter-y, 0), 0)
    scale(0.18);
  transform-origin: 50% 50%;
  transition:
    opacity 300ms var(--ease-out),
    background-color 260ms var(--ease-out),
    clip-path 820ms cubic-bezier(0.18, 1, 0.24, 1),
    transform 1120ms cubic-bezier(0.17, 1.16, 0.22, 1),
    outline-color 180ms var(--ease-out);
  transition-delay: var(--petal-delay, 0ms);
  will-change: transform, opacity, clip-path;
  mix-blend-mode: multiply;
  appearance: none;
  -webkit-appearance: none;
}

body[data-about-selected-petal] .about-petal {
  mix-blend-mode: normal;
}

body[data-page="about"].is-about-bloomed .about-petal {
  opacity: 1;
  clip-path: circle(90% at 50% 50%);
  transform: translate3d(0, 0, 0) scale(1);
}

body[data-page="about"].is-about-bloomed .about-petal:hover,
body[data-page="about"].is-about-bloomed .about-petal:focus-visible {
  transform: translate3d(var(--petal-hover-x), var(--petal-hover-y), 0) scale(1.025);
}

.about-petal:focus-visible {
  outline: 2px solid #000;
  outline-offset: 0.45rem;
}

body:not([data-page="about"]) .about-petal {
  transition-delay: 0ms;
}

.about-petal-blue {
  --petal-enter-x: 0.31%;
  --petal-enter-y: 71.88%;
  --petal-hover-x: 0%;
  --petal-hover-y: -4%;
  --petal-delay: 0ms;
  left: 28.4367%;
  top: -0.2778%;
  width: 43.1267%;
  height: 44.4444%;
  background: #2b9cff;
}

.about-petal-violet {
  --petal-enter-x: -66.25%;
  --petal-enter-y: 23.44%;
  --petal-hover-x: 4%;
  --petal-hover-y: -1%;
  --petal-delay: 0ms;
  left: 57.1428%;
  top: 21.25%;
  width: 43.1267%;
  height: 44.4444%;
  background: #5359ff;
}

.about-petal-lime {
  --petal-enter-x: 66.88%;
  --petal-enter-y: 23.44%;
  --petal-hover-x: -4%;
  --petal-hover-y: -1%;
  --petal-delay: 0ms;
  left: -0.2696%;
  top: 21.25%;
  width: 43.1267%;
  height: 44.4444%;
  background: #dae501;
}

.about-petal-green {
  --petal-enter-x: 42.81%;
  --petal-enter-y: -54.38%;
  --petal-hover-x: -2.5%;
  --petal-hover-y: 3.5%;
  --petal-delay: 0ms;
  left: 10.1078%;
  top: 55.8334%;
  width: 43.1267%;
  height: 44.4444%;
  background: #17bc5c;
}

.about-petal-gold {
  --petal-enter-x: -40.94%;
  --petal-enter-y: -54.38%;
  --petal-hover-x: 2.5%;
  --petal-hover-y: 3.5%;
  --petal-delay: 0ms;
  left: 46.2264%;
  top: 55.8334%;
  width: 43.1267%;
  height: 44.4444%;
  background: #dbbb01;
}

.about-petal.is-selected {
  background: #fff;
}

.about-menu-anchor {
  position: absolute;
  left: 50.1348%;
  top: 53.8889%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.about-copy {
  position: relative;
  z-index: 5;
  width: var(--about-copy-width);
  margin-top: var(--about-copy-gap);
  margin-left: var(--about-copy-left);
  color: var(--foreground);
  font-family: var(--font-display);
  font-size: var(--about-copy-size);
  font-weight: 500;
  line-height: var(--about-copy-leading);
  letter-spacing: 0;
}

.about-copy p {
  margin: 0;
}

.about-copy p + p {
  margin-top: var(--about-copy-leading);
}

body[data-page="projects"].is-intro .menu-bubble {
  width: var(--bubble-size);
  height: var(--bubble-size);
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, -50%, 0) scale(1);
}

body[data-page="projects"].is-intro .bubble-core {
  transform: rotate(var(--bubble-rotation)) scale(1);
}

.projects-sidebar {
  position: fixed;
  top: var(--projects-top);
  left: var(--projects-left);
  z-index: 3;
  display: grid;
  width: min(21.5rem, calc(var(--projects-content-left) - var(--projects-left) - 2.5rem));
  gap: 0.5rem;
  pointer-events: auto;
}

.project-index-link {
  display: block;
  width: fit-content;
  max-width: 100%;
  border: 0;
  padding: 0;
  color: rgb(0 0 0 / 22%);
  background: transparent;
  font-family:
    Inter,
    "Helvetica Neue",
    Helvetica,
    Arial,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  font-size: var(--nav-size);
  font-weight: var(--nav-weight);
  line-height: var(--nav-leading);
  letter-spacing: var(--nav-tracking);
  text-align: left;
  text-decoration: none;
  transition: color 180ms var(--ease-out);
}

.project-index-link.is-active,
.project-index-link:hover {
  color: var(--foreground);
}

.project-index-link.is-disabled {
  cursor: default;
}

.projects-content {
  width: var(--projects-content-width);
  margin-left: var(--projects-content-left);
  padding-top: var(--projects-top);
}

.project-story {
  position: relative;
}

.project-story + .project-story {
  margin-top: 2rem;
}

.project-heading {
  margin: 0 0 0.25rem;
}

.project-title {
  width: 100%;
  margin: 0;
  color: var(--foreground);
  font-family: var(--font-display);
  font-size: 12rem;
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.04em;
  white-space: nowrap;
}

.project-media-card,
.project-media-pair,
.project-media {
  position: relative;
}

.project-media-card {
  width: 100%;
  margin: 0;
}

.project-story > .project-media-card,
.project-story > .project-media-pair {
  margin-top: 2rem;
}

.project-heading + .project-media-card {
  margin-top: 1rem;
}

.project-media-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.project-media {
  display: block;
  width: 100%;
  overflow: hidden;
  background: #f5f5f5;
}

.project-media-video {
  aspect-ratio: 16 / 9;
}

.project-media-image {
  aspect-ratio: 2 / 3;
}

.project-media-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 4.6875rem;
  height: 4.6875rem;
  border: 0;
  border-radius: 50%;
  padding: 0;
  background: #000;
  color: #fff;
  cursor: pointer;
  opacity: 1;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 180ms var(--ease-out);
}

.project-media-card-video.is-playing .project-media-toggle {
  opacity: 0;
}

.project-media-card-video.is-playing:hover .project-media-toggle,
.project-media-card-video.is-playing:focus-within .project-media-toggle {
  opacity: 1;
}

.project-media-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -0.75rem;
}

.project-media-toggle-icon {
  position: relative;
  display: block;
  pointer-events: none;
}

.project-media-card-video:not(.is-playing) .project-media-toggle-icon {
  width: 0;
  height: 0;
  margin-left: 0.24rem;
  border-top: 0.675rem solid transparent;
  border-bottom: 0.675rem solid transparent;
  border-left: 1.05rem solid currentColor;
}

.project-media-card-video.is-playing .project-media-toggle-icon {
  width: 1.17rem;
  height: 1.5rem;
}

.project-media-card-video.is-playing .project-media-toggle-icon::before,
.project-media-card-video.is-playing .project-media-toggle-icon::after {
  position: absolute;
  top: 0;
  width: 0.33rem;
  height: 100%;
  background: currentColor;
  content: "";
}

.project-media-card-video.is-playing .project-media-toggle-icon::before {
  left: 0;
}

.project-media-card-video.is-playing .project-media-toggle-icon::after {
  right: 0;
}

.project-media > img,
.project-media > video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project-media-description {
  width: 100%;
  margin: 0.75rem 0 0;
  color: rgb(0 0 0 / 52%);
  font-family:
    Inter,
    "Helvetica Neue",
    Helvetica,
    Arial,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5rem;
  letter-spacing: 0;
}

.project-story p {
  width: 100%;
  margin: 2rem 0 0;
  color: var(--foreground);
  font-family:
    Inter,
    "Helvetica Neue",
    Helvetica,
    Arial,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  font-size: var(--projects-body-size);
  font-weight: 400;
  line-height: var(--projects-body-leading);
  letter-spacing: 0;
}

.project-story p + p {
  margin-top: 2rem;
}

.project-story p + .project-media-card,
.project-story p + .project-media-pair {
  margin-top: 2rem;
}

.project-story .project-subtitle {
  font-family: var(--font-display);
  font-size: var(--projects-lead-size) !important;
  font-weight: 500 !important;
  line-height: var(--projects-lead-leading) !important;
}

.project-subtitle a {
  color: #5359ff;
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.08em;
}

.project-conclusion {
  position: relative;
  z-index: 4;
  width: 100vw;
  margin-top: 2rem;
  margin-left: calc(var(--projects-content-left) * -1);
  padding: 2rem var(--projects-content-right) 2rem var(--projects-content-left);
  background: var(--project-conclusion-color, #dae501);
  mix-blend-mode: multiply;
}

.project-conclusion-blue {
  --project-conclusion-color: #2b9cff;
}

.project-conclusion-green {
  --project-conclusion-color: #17bc5c;
}

.project-conclusion-gold {
  --project-conclusion-color: #dbbb01;
}

.project-conclusion-lime {
  --project-conclusion-color: #dae501;
}

.project-conclusion-violet {
  --project-conclusion-color: #5359ff;
}

.project-conclusion p {
  max-width: var(--projects-content-width);
  margin: 0;
}

@media (max-width: 980px) {
  :root {
    --projects-content-left: 1.5rem;
    --projects-content-right: 1.5rem;
    --projects-content-width: calc(100vw - 3rem);
  }

  .projects-sidebar {
    display: none;
  }

  .projects-content {
    padding-top: 4rem;
  }
}

.menu-bubble-system {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.menu-bubble {
  position: fixed;
  top: var(--bubble-top);
  left: var(--bubble-left);
  z-index: 30;
  width: var(--bubble-size);
  height: var(--bubble-size);
  border: 0;
  padding: 0;
  border-radius: 999px;
  color: var(--overlay-foreground);
  background: transparent;
  cursor: grab;
  opacity: 0;
  pointer-events: none;
  appearance: none;
  touch-action: none;
  transform: translate3d(-50%, -50%, 0) scale(0.72);
  transform-origin: 50% 50%;
  will-change: transform, top, left;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 520ms var(--ease-soft),
    transform 1320ms var(--bubble-spring-scale),
    top 860ms var(--menu-grow-spring),
    left 860ms var(--menu-grow-spring),
    width 860ms var(--menu-grow-spring),
    height 860ms var(--menu-grow-spring);
}

.is-intro .menu-bubble {
  width: var(--bubble-size);
  height: var(--bubble-size);
  opacity: 1;
  pointer-events: none;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transition: none;
}

.is-ready .menu-bubble {
  width: var(--bubble-size);
  height: var(--bubble-size);
  opacity: 1;
  pointer-events: auto;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transition:
    opacity 520ms var(--ease-soft),
    transform 1320ms var(--bubble-spring-scale),
    top 860ms var(--menu-grow-spring),
    left 860ms var(--menu-grow-spring),
    width 860ms var(--menu-grow-spring),
    height 860ms var(--menu-grow-spring);
}

.menu-bubble.is-dragging {
  cursor: grabbing;
}

.menu-bubble.is-dragging,
.menu-bubble.is-gliding {
  transition: none;
}

.is-menu-opening .menu-bubble,
.is-menu-closing .menu-bubble {
  transition: none;
}

.bubble-scale {
  position: absolute;
  inset: 0;
  display: block;
  transform: scale(1);
  transform-origin: 50% 50%;
  transition: none;
  will-change: transform;
}

.bubble-core {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: var(--bubble-radius);
  background: var(--bubble-blue);
  transform: rotate(var(--bubble-rotation))
    scale(
      calc(var(--bubble-stretch-x) * var(--bubble-breath)),
      calc(var(--bubble-stretch-y) * var(--bubble-breath))
    );
  transform-origin: 50% 50%;
  transition:
    opacity 360ms var(--ease-out),
    border-radius 620ms var(--spring);
  will-change: transform, border-radius;
}

.is-intro .bubble-scale {
  transform: scale(var(--loading-dot-core-scale));
  transition: none;
}

.is-ready:not(.is-home-settled):not(.is-nav-open) .bubble-core {
  transition:
    opacity 360ms var(--ease-out),
    border-radius 760ms var(--bubble-spring-layout);
}

.menu-bubble.is-dragging .bubble-core,
.menu-bubble.is-gliding .bubble-core {
  transition:
    opacity 180ms var(--ease-out),
    transform 180ms cubic-bezier(0.18, 0.9, 0.24, 1),
    border-radius 260ms cubic-bezier(0.2, 1, 0.24, 1);
}

.bubble-core::after {
  content: none;
}

.bubble-close {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(0.82);
  transition:
    opacity 420ms var(--ease-out),
    transform 720ms var(--spring);
}

.bubble-close span {
  position: absolute;
  width: 78%;
  height: 3px;
  border-radius: 999px;
  background: currentColor;
}

.bubble-close span:first-child {
  transform: rotate(45deg);
}

.bubble-close span:last-child {
  transform: rotate(-45deg);
}

.is-nav-open .menu-bubble {
  top: var(--menu-center-y);
  left: var(--menu-center-x);
  z-index: 12;
  width: var(--menu-width);
  height: var(--menu-height);
  cursor: grab;
  transform: translate3d(-50%, -50%, 0) scale(1);
  transition:
    top 860ms var(--menu-grow-spring),
    left 860ms var(--menu-grow-spring),
    width 860ms var(--menu-grow-spring),
    height 860ms var(--menu-grow-spring);
}

.is-nav-open #menuBubble {
  top: var(--menu-center-y);
  left: var(--menu-center-x);
  width: var(--menu-width);
  height: var(--menu-height);
}

.is-nav-open .bubble-core {
  animation: none;
  opacity: 1;
  transform: rotate(var(--menu-float-rotation)) scale(1);
  border-radius: var(--bubble-radius);
  transition:
    opacity 360ms var(--ease-out),
    border-radius 760ms var(--bubble-spring-layout);
}

.is-nav-open .bubble-close {
  opacity: 0;
  transform: scale(0.82);
}

.navigation-overlay {
  position: fixed;
  top: var(--menu-top);
  left: var(--menu-left);
  z-index: 20;
  display: grid;
  place-items: center;
  width: var(--menu-width);
  height: var(--menu-height);
  padding: var(--safe-edge);
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  background: transparent;
  color: var(--overlay-foreground);
  transition:
    opacity 760ms var(--ease-out),
    visibility 0ms linear 960ms;
}

.is-nav-open .navigation-overlay {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  cursor: grab;
  transition: none;
}

.is-nav-open .navigation-overlay:active {
  cursor: grabbing;
}

.is-menu-opening .navigation-overlay,
.is-menu-opening .navigation-list {
  pointer-events: none;
}

.is-menu-closing .navigation-overlay {
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 140ms var(--ease-out),
    visibility 0ms;
}

.navigation-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: calc(var(--nav-size) * 0.3636);
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
  pointer-events: auto;
}

.navigation-list a {
  display: inline-block;
  color: inherit;
  font-family:
    Inter,
    "Helvetica Neue",
    Helvetica,
    Arial,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  font-size: var(--nav-size);
  font-weight: var(--nav-weight);
  line-height: var(--nav-leading);
  letter-spacing: var(--nav-tracking);
  text-decoration: none;
  cursor: pointer;
  transform: translateY(18px);
  opacity: 0;
  transition:
    opacity 560ms var(--ease-out),
    transform 720ms var(--ease-out);
}

.is-nav-open .navigation-list a {
  transform: translateY(0);
  opacity: 1;
  transition: none;
  transition-delay: 0ms;
}

.is-nav-open .navigation-list li:nth-child(2) a {
  transition-delay: 0ms;
}

.is-nav-open .navigation-list li:nth-child(3) a {
  transition-delay: 0ms;
}

.is-nav-open .navigation-list li:nth-child(4) a {
  transition-delay: 0ms;
}

.is-menu-closing .navigation-list a {
  transform: translateY(8px);
  opacity: 0;
  transition-delay: 0ms !important;
}

.navigation-list a:not([aria-current="page"]) {
  color: rgb(255 255 255 / 30%);
}

.navigation-list a:hover {
  color: var(--overlay-foreground);
  opacity: 1;
}

.menu-bubble:focus-visible {
  outline: 0;
}

.navigation-list a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 0.55rem;
}

@media (max-width: 680px) {
  :root {
    --name-size: 4rem;
    --nav-size: 1.75rem;
    --projects-body-size: 1.0625rem;
    --projects-body-leading: 1.75rem;
    --projects-lead-size: 1.75rem;
    --projects-lead-leading: 2.375rem;
    --name-top: 47.2%;
    --home-name-side: clamp(1.25rem, 7.8vw, 2.1rem);
    --intro-first-edge: calc(50% - 1.25rem);
    --intro-last-edge: calc(50% + 1.25rem);
    --loading-dot-core-scale: 0.18;
    --about-flower-width: min(17rem, calc(100vw - 3rem));
    --about-flower-sticky-top: 6.25rem;
    --about-flower-start-top: var(--about-flower-sticky-top);
    --about-copy-left: 1.5rem;
    --about-copy-width: calc(100vw - 3rem);
    --about-copy-gap: 6.75rem;
    --about-copy-size: 1.75rem;
    --about-copy-leading: 2.375rem;
  }

  .bubble-close span {
    height: 2.5px;
  }
}

@media (max-width: 360px) {
  :root {
    --loading-dot-core-scale: 0.2;
    --home-name-side: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}