.header {
  --initial-length: 0;
  --final-length: var(--size);
  --length: var(--initial-length);
  --initial-color: transparent;
  --final-color: var(--light-shadow);
  --color: var(--initial-color);
  position: fixed;
  z-index: 5;
  top: 0;
  width: 100%;
  box-shadow: 0 0 calc(var(--length) * 0.5) calc(var(--length) * 0.125) var(--shadow);
  background-color: var(--color);
  backdrop-filter: blur(calc(var(--length) * 2));
  animation: change-length linear forwards, change-color linear forwards;
  animation-timeline: scroll();
  animation-range: 0 calc(var(--size) * 64);
}

.main {
  --grad-primary: color-mix(in srgb, var(--primary-color) 18%, transparent);
  --grad-secondary: color-mix(in srgb, var(--secondary-color) 15%, transparent);

  &> :nth-child(odd) {
    background-image:
      radial-gradient(circle at 20% 30%, var(--grad-primary) 0%, transparent 40%),
      radial-gradient(circle at 80% 70%, var(--grad-secondary) 0%, transparent 40%),
      linear-gradient(135deg, var(--primary-background) 0%, var(--secondary-background) 100%);
  }

  &> :nth-child(even) {
    background-image:
      radial-gradient(circle at 80% 30%, var(--grad-secondary) 0%, transparent 40%),
      radial-gradient(circle at 20% 70%, var(--grad-primary) 0%, transparent 40%),
      linear-gradient(135deg, var(--secondary-background) 0%, var(--primary-background) 100%);
  }
}

.nav {
  padding-block: calc(var(--size) * 4);
}

.nav--scroll {
  --initial-length: calc(var(--size) * 6);
  --final-length: calc(var(--size) * 4);
  --length: var(--initial-length);
  padding-block: var(--length);
  animation: change-length linear forwards;
  animation-timeline: scroll();
  animation-range: 0 calc(var(--size) * 64);
}

.off-canvas {
  --t-translate: -100%;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  display: flex;
  background-color: var(--light-shadow);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-duration);

  &:target {
    --t-translate: 0;
    opacity: initial;
    pointer-events: initial;
  }
}

.off-canvas--right {
  --t-translate: 100%;
  justify-content: flex-end;

  & .off-canvas__child {
    width: min(calc(var(--size) * 80), 50%);
    transform: translate(var(--t-translate), 0);
  }
}

.off-canvas--mobile {
  @media (width >=768px) {
    all: unset;

    & .off-canvas__child {
      all: unset;
    }

    & .off-canvas__backdrop {
      display: none;
    }
  }
}

.off-canvas__backdrop {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
}

.off-canvas__child {
  cursor: initial;
  width: 100%;
  height: 100dvh;
  padding: calc(var(--size) * 4);
  box-sizing: border-box;
  background-color: var(--light-shadow);
  transform: translate(0, var(--t-translate));
  transition: transform var(--transition-duration);
}

.hero {
  padding-block: calc(var(--size) * 32);
}

.hero__title {
  margin: 0;
  font-size: clamp(2rem, 5vw, 4rem);
}

.hero__paragraph {
  margin: 0;
  font-size: clamp(1.125rem, 2.5vw, 1.5rem);
}

.section {
  padding-block: calc(var(--size) * 16);
}

.list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.card {
  --primary-card-color: var(--shadow);
  border-radius: calc(var(--border-radius) * 2);
  box-shadow: calc(var(--size) * 0.0625) calc(var(--size) * 0.125) var(--size) calc(var(--size) * 0.0625) var(--primary-card-color);
  overflow: hidden;
  transition: box-shadow var(--transition-duration), transform var(--transition-duration);

  &:hover {
    --primary-card-color: var(--primary-color);
    transform: scale(1.025);
  }
}

.card--overlay {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  max-width: calc(var(--size) * 106.5);
  height: calc(var(--size) * 60);
  background-color: var(--primary-background);
  text-decoration: none;
}

.card__image {
  object-fit: cover;
  width: 100%;
  height: calc(var(--size) * 80);
}

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--size);
  padding: calc(var(--size) * 4);
  background-color: var(--secondary-background);
}

.footer {
  position: relative;

  &>.nav:nth-child(odd) {
    backdrop-filter: blur(calc(var(--size) * 4));
  }

  &>.nav:nth-child(even) {
    background-color: var(--light-shadow);
  }
}