:root {
  interpolate-size: allow-keywords;

  /* Font Families */
  --ff-base: "Satoshi", system-ui, sans-serif;
  --ff-code: "Cascadia Code", monospace;

  /* Colors */
  color-scheme: light dark;

  --neutral-50: light-dark(hsl(30, 15%, 92%), hsl(60, 5%, 13%));
  --neutral-100: light-dark(hsl(30, 12%, 89%), hsl(60, 4%, 16%));
  --neutral-200: light-dark(hsl(30, 10%, 86%), hsl(60, 3%, 19%));
  --neutral-300: light-dark(hsl(30, 8%, 83%), hsl(60, 2%, 22%));
  --neutral-400: light-dark(hsl(30, 10%, 80%), hsl(60, 3%, 24%));
  --neutral-500: light-dark(hsl(30, 10%, 74%), hsl(60, 4%, 28%));
  --neutral-600: light-dark(hsl(30, 8%, 64%), hsl(60, 5%, 35%));
  --neutral-700: light-dark(hsl(30, 6%, 52%), hsl(60, 2%, 50%));
  --neutral-800: light-dark(hsl(30, 8%, 38%), hsl(60, 3%, 70%));
  --neutral-900: light-dark(hsl(30, 12%, 12%), hsl(60, 4%, 85%));

  --surface-1: var(--neutral-50);
  --surface-2: var(--neutral-100);
  --surface-3: var(--neutral-200);
  --surface-4: var(--neutral-300);

  --border-subtle: var(--neutral-400);
  --border-default: var(--neutral-500);
  --border-strong: var(--neutral-600);

  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-800);
  --text-muted: var(--neutral-700);
  --text-inverse: var(--neutral-50);

  --link: inherit;
  --accent: light-dark(hsl(113, 53%, 15%), hsl(50, 86%, 6%));
  --background: light-dark(hsl(100, 26%, 65%), hsl(147, 89%, 14%));

  /* Font Sizes */
  --fs--2: clamp(0.7387rem, 0.7987rem + -0.0775vw, 0.7813rem);
  --fs--1: clamp(0.9375rem, 0.9182rem + 0.0857vw, 0.9846rem);
  --fs-0: clamp(1.125rem, 1.0483rem + 0.3409vw, 1.3125rem);
  --fs-1: clamp(1.35rem, 1.1865rem + 0.7265vw, 1.7496rem);
  --fs-2: clamp(1.62rem, 1.3287rem + 1.2948vw, 2.3322rem);
  --fs-3: clamp(1.944rem, 1.4675rem + 2.1178vw, 3.1088rem);
  --fs-4: clamp(2.3328rem, 1.5919rem + 3.2931vw, 4.144rem);
  --fs-5: clamp(2.7994rem, 1.6848rem + 4.9538vw, 5.524rem);

  /* Spacing */
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5114rem + 0.2273vw, 0.6875rem);
  --space-xs: clamp(0.875rem, 0.8239rem + 0.2273vw, 1rem);
  --space-s: clamp(1.125rem, 1.0483rem + 0.3409vw, 1.3125rem);
  --space-m: clamp(1.6875rem, 1.5597rem + 0.5682vw, 2rem);
  --space-l: clamp(2.25rem, 2.0966rem + 0.6818vw, 2.625rem);
  --space-xl: clamp(3.375rem, 3.1449rem + 1.0227vw, 3.9375rem);
  --space-2xl: clamp(4.5rem, 4.1932rem + 1.3636vw, 5.25rem);
  --space-3xl: clamp(6.75rem, 6.2898rem + 2.0455vw, 7.875rem);
  --space-4xl: clamp(9rem, 8.3864rem + 2.7273vw, 10.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.1591rem + 0.6818vw, 0.6875rem);
  --space-2xs-xs: clamp(0.5625rem, 0.3835rem + 0.7955vw, 1rem);
  --space-xs-s: clamp(0.875rem, 0.696rem + 0.7955vw, 1.3125rem);
  --space-s-m: clamp(1.125rem, 0.767rem + 1.5909vw, 2rem);
  --space-m-l: clamp(1.6875rem, 1.304rem + 1.7045vw, 2.625rem);
  --space-l-xl: clamp(2.25rem, 1.5597rem + 3.0682vw, 3.9375rem);
  --space-xl-2xl: clamp(3.375rem, 2.608rem + 3.4091vw, 5.25rem);
  --space-2xl-3xl: clamp(4.5rem, 3.1193rem + 6.1364vw, 7.875rem);
  --space-3xl-4xl: clamp(6.75rem, 5.2159rem + 6.8182vw, 10.5rem);

  /* Durations & animations */
  --nav-transition-duration: 0.25s;
  --project-animation: 2s;
  --in-view: false;
}

@keyframes project-item-in-view {
  from {
    --in-view: false;
  }
  to {
    --in-view: true;
  }
}

body {
  background: var(--background);
  font-family: var(--ff-base);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap, 1rem);
}

.prose > * + * {
  margin-block-start: var(--prose-flow, 1em);
}

.pile {
  display: grid;
  grid-template-areas: "pile";
  place-items: center;

  > * {
    grid-area: pile;
  }
}

.wrapper {
  inline-size: min(100% - 2rem, 1350px);
  margin-inline: auto;
}

.hero-section {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.hero {
  place-self: center;
}

.hero-img {
  img {
    width: 400px;
    border-radius: 8px;
    border: var(--border-strong) 2px solid;
    filter: grayscale(50%);
    aspect-ratio: 1;
    object-fit: cover;
    anchor-name: --hero-img;
    margin-block-start: var(--space-2xl);
  }
}

nav {
  position: absolute;
  position-anchor: --hero-img;
  right: calc(anchor(right) - var(--space-l));
  top: calc(anchor(top) + var(--space-xs));

  @media (max-width: 390px) {
    display: none;
  }
}

nav a {
  white-space: nowrap;
  width: 2.5rem;
  overflow-x: clip;
  @media (prefers-reduced-motion: no-preference) {
    transition: all var(--nav-transition-duration) ease;
  }

  &:hover,
  &:focus-visible {
    width: max-content;
  }
}

nav ul {
  list-style: none;
  overflow-x: visible;

  display: flex;
  flex-direction: column;
  gap: var(--space-2xs-xs);

  width: 4.5rem;
}

nav ul {
  a {
    display: grid;
    grid-template-columns: 1.5rem auto;
    gap: 1rem;
    padding: 0.5rem;
    font-size: var(--fs-0);
    align-items: center;
    background: var(--accent);
    border-radius: 0.5rem;
    padding: 0.5rem;
    text-decoration: none;
    color: var(--neutral-700);

    @media (prefers-color-scheme: light) {
      color: var(--neutral-400);
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: all var(--nav-transition-duration) ease;
    }

    &:hover,
    &:focus-visible {
      color: var(--neutral-900);

      @media (prefers-color-scheme: light) {
        color: var(--neutral-50);
      }
    }
  }
}

nav ul li span {
  padding-right: var(--space-3xs);
}

header {
  h1 {
    font-size: var(--fs-5);
    text-transform: uppercase;
  }

  span {
    background: var(--text-primary);
    color: var(--background);

    margin-right: 2px;
  }
  p {
    font-size: var(--fs-0);
    color: var(--text-secondary);
    font-family: var(--ff-code);
    letter-spacing: var(--space-3xs);

    @media (prefers-color-scheme: light) {
      color: var(--text-inverse);
    }
  }
}

.arrow {
  display: grid;

  place-items: end center;
  animation: --arrow-in-view 2s both;
  animation-timeline: view();
  animation-range: cover 0% cover 100%;

  svg {
    width: 100px;

    @media (prefers-reduced-motion: no-preference) {
      animation: --arrow 2s infinite;
      animation-play-state: paused;
      animation-timing-function: linear(
        0,
        0.751 5.2%,
        0.923 7.4%,
        0.977 9.5%,
        0.962 10.6%,
        0.914 11.8%,
        0.727 14.2%,
        -0.458 24.1%,
        -0.611 26.3%,
        -0.678 28.5%,
        -0.679 29.5%,
        -0.664 30.5%,
        -0.575 32.7%,
        0.177 42.5%,
        0.308 45.1%,
        0.366 47.6%,
        0.365 49.6%,
        0.325 51.7%,
        -0.034 61.1%,
        -0.099 63.6%,
        -0.132 66.1%,
        -0.137 68%,
        -0.125 70.1%,
        -0.017 78.4%,
        0.016 82.7%,
        0.02 86.3%,
        0.003 94.4%,
        0
      );

      @container style(--in-view: true) {
        animation-play-state: running;
      }
    }
  }
}

@keyframes --arrow {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(50%);
  }

  0% {
    transform: translateY(0);
  }
}

@keyframes --arrow-in-view {
  0% {
    --in-view: false;
  }
  10% {
    --in-view: true;
  }
  70% {
    --in-view: true;
    opacity: 1;
  }
  100% {
    --in-view: false;
    opacity: 0;
  }
}

.main-content {
  display: grid;
  section {
    margin-block-start: var(--space-2xl);
  }
}

.projects-container {
  --min-col-size: 17rem;

  max-width: calc(var(--min-col-size) * 2 + 2rem * 2 + 1px);
  margin-inline: auto;

  container: projects / inline-size;

  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(var(--min-col-size), 100%), 1fr)
  );

  gap: var(--space-2xs);
  margin-bottom: var(--space-3xl);

  img {
    width: 100%;
    height: auto;
  }

  img:not(.gray) {
    filter: grayscale(0);
  }

  img.gray {
    filter: grayscale(100);
    transition: all 1s ease;
  }
}

.project-wrapper {
  @media (prefers-reduced-motion: no-preference) {
    animation: project-item-in-view both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
    @media (prefers-color-scheme: light) {
      color: var(--neutral-50);
    }
  }

  img {
    width: 100%;
  }
}

.card {
  outline: 2px solid var(--text-inverse);
  border: 3px solid transparent;
  background-color: var(--text-inverse);
  @media (prefers-reduced-motion: no-preference) {
    animation: --card-in 1s both;
    animation-play-state: paused;
    animation-delay: calc(var(--delay, 0s) * 0.4s);

    @container style(--in-view: true) {
      animation-play-state: running;
    }
  }
}

@container projects (width > calc(17rem * 2 + 2rem)) {
  .project-wrapper:nth-child(2n) {
    --delay: 1;
  }
}

@container projects (width > calc(17rem * 3 + 2rem * 2)) {
  .project-wrapper:nth-child(3n + 1) {
    --delay: 0;
  }
  .project-wrapper:nth-child(3n + 2) {
    --delay: 1;
  }
  .project-wrapper:nth-child(3n + 3) {
    --delay: 2;
  }
}

@keyframes --card-in {
  0% {
    opacity: 0;
    translate: 0 20px;
    transform: scale(0.8);
  }
  100% {
    opacity: 1;
    translate: 0 0;
    transform: scale(1);
  }
}

.project-modal {
  background: var(--accent);
  place-self: end end;
  width: 100%;
  height: 0;
  overflow: clip;
  transition: all 300ms ease;
  z-index: 100;

  place-content: center;
  place-items: center;
}

.project-modal.opened {
  height: auto;

  @media (prefers-reduced-motion: no-preference) {
    animation: --open var(--project-animation) forwards;
    animation-timing-function: linear(
      0,
      0.009 1.4%,
      0.032 2.8%,
      0.131 6%,
      0.265 9.1%,
      0.675 17.6%,
      0.88 22.8%,
      0.953 25.2%,
      1.014 27.7%,
      1.062 30.3%,
      1.094 32.9%,
      1.121 37.2%,
      1.121 42.2%,
      1.102 46.7%,
      1.019 61.2%,
      0.989 71.5%,
      0.985 81.1%,
      1
    );
  }
}

.project-modal:not(.opened) {
  height: 0;

  @media (prefers-reduced-motion: no-preference) {
    animation: --close var(--project-animation) forwards;
    animation-timing-function: linear(
      0,
      0.009 1.4%,
      0.032 2.8%,
      0.131 6%,
      0.265 9.1%,
      0.675 17.6%,
      0.88 22.8%,
      0.953 25.2%,
      1.014 27.7%,
      1.062 30.3%,
      1.094 32.9%,
      1.121 37.2%,
      1.121 42.2%,
      1.102 46.7%,
      1.019 61.2%,
      0.989 71.5%,
      0.985 81.1%,
      1
    );
  }
}

@keyframes --open {
  from {
    height: 0;
  }
  to {
    height: auto;
  }
}

@keyframes --close {
  from {
    height: auto;
  }
  to {
    height: 0;
  }
}

.project-info {
  margin: var(--space-m);
}
.project-links-modal {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  place-self: center start;
  z-index: 100;
  background: var(--accent);
  width: 0;
  border-radius: 0 10px 10px 0;
  overflow-x: clip;

  svg {
    width: 2rem;
    margin: var(--space-2xs);
  }
}

.project-links-modal.slide {
  width: auto;

  @media (prefers-reduced-motion: no-preference) {
    animation: --slide-right var(--project-animation) forwards;
    animation-timing-function: linear(
      0,
      0.009 1.4%,
      0.032 2.8%,
      0.131 6%,
      0.265 9.1%,
      0.675 17.6%,
      0.88 22.8%,
      0.953 25.2%,
      1.014 27.7%,
      1.062 30.3%,
      1.094 32.9%,
      1.121 37.2%,
      1.121 42.2%,
      1.102 46.7%,
      1.019 61.2%,
      0.989 71.5%,
      0.985 81.1%,
      1
    );
  }
}

.project-links-modal:not(.slide) {
  width: 0;

  @media (prefers-reduced-motion: no-preference) {
    animation: --slide-left var(--project-animation) forwards;
    animation-timing-function: linear(
      0,
      0.009 1.4%,
      0.032 2.8%,
      0.131 6%,
      0.265 9.1%,
      0.675 17.6%,
      0.88 22.8%,
      0.953 25.2%,
      1.014 27.7%,
      1.062 30.3%,
      1.094 32.9%,
      1.121 37.2%,
      1.121 42.2%,
      1.102 46.7%,
      1.019 61.2%,
      0.989 71.5%,
      0.985 81.1%,
      1
    );
  }
}

@keyframes --slide-right {
  from {
    width: 0;
  }
  to {
    width: auto;
  }
}

@keyframes --slide-left {
  from {
    width: auto;
  }
  to {
    width: 0;
  }
}

#socials-anchor {
  display: grid;
  place-items: center;
  place-content: center;
  margin-block-end: var(--space-3xl);

  h2 {
    font-size: var(--fs-3);
    margin-block-end: var(--space-s);
  }
}

.socials-container {
  display: flex;
  gap: var(--space-2xs);

  svg {
    width: var(--fs-4);
    aspect-ratio: 1;
    cursor: pointer;
  }
  width: fit-content;
}