:root {
  --base-color-bright: #f8f9fa;
  --base-color-dark: #0e161f;

  --highlight-color-1-green: #24dd80;
  --highlight-color-2-teal: #1aa8b5;
  --highlight-color-3-blue: #0f6fe2;

  --highlight-filter-color-1-green: brightness(0) saturate(100%) invert(85%)
    sepia(21%) saturate(1887%) hue-rotate(81deg) brightness(96%) contrast(80%);

  --highlight-filter-color-2-teal: brightness(0) saturate(100%) invert(49%)
    sepia(67%) saturate(479%) hue-rotate(137deg) brightness(96%) contrast(100%);

  --highlight-filter-color-3-blue: brightness(0) saturate(100%) invert(29%)
    sepia(88%) saturate(1954%) hue-rotate(201deg) brightness(97%) contrast(90%);

  --font-family-base: "Bricolage", sans-serif;
  --font-family-highlight: "Kalam", sans-serif;

  --border-radius-button: clamp(1.5rem, 4vw, 3.125rem);
}

@font-face {
  font-family: "Bricolage";
  src: url("../assets/fonts/bricolage-grotesque.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Kalam";
  src: url("../assets/fonts/kalam-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

* {
  box-sizing: border-box;
  font-family: var(--font-family-base);
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

.container {
  max-width: 1440px;
  width: 100%;

  padding-inline: clamp(1rem, 4vw, 4rem);
  margin: 0 auto;

  @media (max-width: 900px) {
    padding-top: 0rem;
  }
}

a,
button {
  cursor: pointer;
}

@keyframes reveal-right-left {
  0% {
    clip-path: inset(0 0 0 100%);
    opacity: 1;
  }
  40% {
    clip-path: inset(0 0 0 0%);
    opacity: 1;
  }
  65% {
    clip-path: inset(0 0 0 0%);
    opacity: 0;
  }
  99% {
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }
  100% {
    clip-path: inset(0 0 0 100%);
    opacity: 1;
  }
}

@keyframes fill-left-right {
  0% {
    clip-path: inset(0 100% 0 0);
    opacity: 1;
  }
  40% {
    clip-path: inset(0 0% 0 0);
    opacity: 1;
  }
  65% {
    clip-path: inset(0 0% 0 0);
    opacity: 0;
  }
  99% {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  100% {
    clip-path: inset(0 100% 0 0);
    opacity: 1;
  }
}

@keyframes reveal-scale {
  0% {
    transform: scaleX(0);
    opacity: 1;
  }
  30% {
    transform: scaleX(1);
    opacity: 1;
  }
  70% {
    transform: scaleX(1);
    opacity: 1;
  }
  80% {
    transform: scaleX(1);
    opacity: 0;
  }
  99% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(0);
    opacity: 1;
  }
}

@keyframes reveal-corner {
  0% {
    clip-path: inset(100% 0% 0% 100%);
    opacity: 1;
  }
  30% {
    clip-path: inset(0% 0% 0% 0%);
    opacity: 1;
  }
  70% {
    clip-path: inset(0% 0% 0% 0%);
    opacity: 1;
  }
  80% {
    clip-path: inset(0% 0% 0% 0%);
    opacity: 0;
  }
  99% {
    clip-path: inset(100% 0% 0% 100%);
    opacity: 0;
  }
  100% {
    clip-path: inset(100% 0% 0% 100%);
    opacity: 1;
  }
}

@keyframes arrow-slide {
  0% {
    transform: translateX(15px);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(-15px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
  }

  html {
    scroll-behavior: auto;
  }
}