:root {
  --color-white: white;
  --color-black: hsla(0, 0%, 13%, 1);
  --color-primary: hsla(189, 71%, 40%, 1);
  --color-primary-op-50: hsla(189, 71%, 40%, 0.5);
  --color-primary-op-70: hsla(189, 71%, 40%, 0.7);
  --font-color: hsla(194, 34%, 31%, 1);
}

/* Base */

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "DM Sans", sans-serif;
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0.028rem;
  -webkit-font-smoothing: antialiased !important;
  color: var(--font-color);
}

html {
  font-size: 62.5%; /* 1rem = 10px */
  scrollbar-width: none;
}

/* The page scrollbar belongs to the root element, so hide it there */
html::-webkit-scrollbar {
  width: 0;
  height: 0;
}

body {
  font-size: 1.4rem;
  background-color: white;
}

a {
  text-decoration: none;
}

/* Animations */

@keyframes slideDown {
  0% {
    opacity: 0;
    transform: translateY(-5%);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pageIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.page-in {
  animation: pageIn 0.6s ease-out;
}

.animation-slide-down {
  animation: slideDown 0.8s forwards;
}

/* Home page */

.home-page {
  display: flex;
  flex-direction: column;
}

@media only screen and (min-width: 968px) {
  /* The page fits the viewport and the panes scroll on their own,
     so the entry animations can't push the page into scrolling */
  html:has(.home-page) {
    overflow: hidden;
  }

  .home-page {
    flex-direction: row;
    height: 100vh;
  }
}

/* Left */

.home-left {
  background-color: var(--color-black);
  flex: 0 0 clamp(36rem, 28vw, 46rem);
  display: flex;
  flex-direction: column;
  padding: 6rem 4rem;
}

.home-left__name span {
  font-size: calc(0.7vw + 18px);
  font-weight: 600;
  letter-spacing: 1px;
  color: white;
}

.home-left__hero {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  padding: 4rem 0;
}

.home-hero {
  width: min(28rem, 100%);
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  border-radius: 50%;
}

.home-hero img {
  display: block;
  width: 100%;
  height: 100%;
  /* The hero animates constantly; skip rendering it while it's covered, so it doesn't
     compete with the pane animation. Hiding waits for the cover to fade back in. */
  visibility: hidden;
  transition: visibility 0s 0.3s;
}

.home-hero:hover img {
  visibility: visible;
  transition-delay: 0s;
}

.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background-color: white;
  opacity: 1;
  transition: opacity 0.3s ease-in-out;
}

.home-hero:hover::before {
  opacity: 0;
}

.home-left__github {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  border: solid 0.2rem transparent;
}

.home-left__github svg {
  height: 2rem;
  fill: white;
}

.home-left__github:hover {
  background-color: var(--color-primary-op-50);
}

.home-left__github:focus-visible {
  border-color: var(--color-primary);
  outline: none;
}

.home-left *::selection {
  color: var(--color-primary);
  background: white;
}

/* Panes: a horizontal strip sized so the third pane is always cut off at the edge */

/* Windows 8 start screen entrance. Slide, scale and tilt run as separate animations, each on
   one smooth curve, so the motion never changes pace abruptly:
   - slide: in from the left, coast to a stop past its spot on the right, glide back left
   - scale: starts growing on the way right, keeps growing through the turnaround and
     reaches full size partway back, so the move ends with a plain slide left
   - tilt: starts slightly turned and straightens out early on the way right */
@keyframes paneSlide {
  0% {
    translate: -20rem 0;
    animation-timing-function: cubic-bezier(0.3, 0.7, 0.4, 1);
  }

  /* 25% of 2.4s: the move right still takes 600ms */
  25% {
    translate: 25rem 0;
    /* eases off the turnaround, then a slow glide left over 1.8s to rest */
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  100% {
    translate: 0 0;
  }
}

@keyframes paneScale {
  0%,
  15% {
    scale: 0.8;
    animation-timing-function: cubic-bezier(0.45, 0, 0.55, 1);
  }

  75%,
  100% {
    scale: 1;
  }
}

@keyframes paneTilt {
  0% {
    rotate: y 20deg;
  }

  100% {
    rotate: y 0deg;
  }
}

@keyframes paneFade {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

.panes {
  --gap: 6rem;

  flex: 1;
  min-width: 0;
  display: flex;
  gap: var(--gap);
  padding: 6rem var(--gap);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  container-type: inline-size;
  /* Depth for the panes' tilt. Windows 8 used a deep perspective, which keeps 3D
     motion subtle instead of warping the panes */
  perspective: 3300px;
}

.panes::-webkit-scrollbar {
  display: none;
}

.pane {
  /* Two full panes, two gaps, then 30% of the third one peeking in */
  flex: 0 0 max(30rem, calc((100cqw - 2 * var(--gap)) / 2.3));
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  scrollbar-width: none;
  /* Solid and stacked so each pane slides out from behind the one before it */
  position: relative;
  z-index: calc(10 - var(--i));
  background-color: white;
  /* Columns arrive one after another, 150ms apart, as on the Windows 8 start screen */
  --delay: calc(0.4s + var(--i) * 0.15s);

  animation:
    paneSlide 2s var(--delay) backwards,
    paneScale 1.5s var(--delay) backwards,
    paneTilt 500ms cubic-bezier(0.3, 0, 0.2, 1) var(--delay) backwards,
    paneFade 0.75s ease-out var(--delay) backwards;
}

/* Hold the panes in their start pose until the web font has loaded, so the text
   doesn't swap fonts (and jump) mid-flight. The class is set and cleared in index.html. */
.fonts-loading .pane {
  animation-play-state: paused;
}

.pane::-webkit-scrollbar {
  display: none;
}

.pane__title {
  font-size: clamp(4.4rem, 3.8vw, 6.4rem);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.1rem;
  margin-bottom: 4rem;
}

.pane__items {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
}

.item {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.item__icon {
  flex-shrink: 0;
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 22%;
  object-fit: cover;
  filter: grayscale(1);
  transition: filter 0.3s ease-out;
}

.item:hover .item__icon,
.item:focus-visible .item__icon {
  filter: none;
}

.item__text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.item__name {
  font-size: calc(0.6vw + 14px);
}

.item__description {
  font-size: calc(0.1vw + 11px);
  opacity: 0.6;
}

.item:hover .item__name {
  text-decoration: underline;
}

.item:focus-visible {
  outline: solid 0.2rem var(--color-primary);
  outline-offset: 0.4rem;
  border-radius: 0.4rem;
}

.pane__body {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  font-size: calc(0.3vw + 14px);
  line-height: 1.5;
}

.pane__link:hover {
  text-decoration: underline;
}

.panes *::selection,
.error *::selection {
  color: white;
  background: var(--color-primary);
}

@media (prefers-reduced-motion: reduce) {
  .pane {
    animation: fadeIn 0.4s backwards;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
}

/* Narrow screens: the dark pane becomes a header, the panes still scroll sideways */

@media only screen and (max-width: 967px) {
  .home-left {
    padding: 3rem;
  }

  .home-hero {
    width: min(20rem, 100%);
  }

  .panes {
    --gap: 3rem;

    padding: 4rem var(--gap);
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gap);
  }

  .pane {
    flex-basis: calc(100cqw - 4rem);
    overflow-y: visible;
    scroll-snap-align: start;
  }
}

/* Error page */

.error {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding-top: 35vh;
  min-height: 100vh;
  overflow: hidden;
}

.error__code {
  font-size: 8rem;
  font-weight: 800;
  color: var(--color-primary-op-70);
  letter-spacing: 0.032rem;
  animation: bouge 48s cubic-bezier(0.23, 1, 0.32, 1) infinite;
}

.error__description {
  font-size: 2rem;
}

@keyframes bouge {
  0% {
    transform: translateY(0px) rotate(0);
  }
  12% {
    transform: translateY(20px) rotate(5deg);
  }
  25% {
    transform: translateY(60px) rotate(8deg);
  }
  40% {
    transform: translateY(50px) rotate(-5deg);
  }
  50% {
    transform: translateY(90px) rotate(0deg);
  }
  62% {
    transform: translateY(90px) rotate(2deg);
  }
  75% {
    transform: translateY(50px) rotate(12deg);
  }
  100% {
    transform: translateY(0px) rotate(0);
  }
}