@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@100;200;300;400;500;600;700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

:root {
  --primary: #74045f;
  --yellow: #c7911b;
  --dark-teal: #04303b;
  --green: #0b692e;
  --background-primary: #e3e4d4;
  --background-secondary: #f2f3ee;
  --fs-h1: clamp(38px, 3.33vw, 3.875rem);
  --fs-h2: clamp(36px, 2.5vw, 3.25rem);
  --fs-h3: clamp(28px, 2.08vw, 2.625rem);
  --fs-h4: clamp(26px, 1.9vw, 2rem);
  --fs-h5: max(1.5rem, 20px);
  --fs-h6: max(1.25rem, 16px);
}

html {
  font-size: clamp(14px, 0.84vw, 16px);
  scroll-behavior: smooth;
  font-family: "IBM Plex Sans Thai", sans-serif;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #04303b;
  background: var(--background-primary);
  animation: fade-in 0.35s forwards;
  background-repeat: no-repeat;
  position: relative;
  letter-spacing: -0.5px;
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

* {
  touch-action: manipulation;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
}

.disabled {
  pointer-events: none;
}

/* Scroll bar */

::-webkit-scrollbar {
  width: 10px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #888;
}

::-webkit-scrollbar-thumb:hover {
  background: #555;
}

.svg-icon {
  -webkit-mask: var(--src) no-repeat center;
  mask: var(--src) no-repeat center;
  mask-size: contain;
  pointer-events: none;
  transition:
    background-color 0.2s,
    opacity 0.2s;

  &:not([style]) {
    opacity: 0;
  }
}

.mobile-nav-toggle {
  width: 1.5rem;
  aspect-ratio: 1.33;
  position: relative;
  color: var(--dark-teal);

  & span {
    position: absolute;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    left: 0;
    top: 50%;
    transform-origin: left center;
    transition:
      transform 0.3s,
      opacity 0.3s;
    border-radius: 9999px;

    &:nth-child(1) {
      top: 5%;
    }

    &:nth-child(3) {
      top: 95%;
    }
  }

  &.active {
    & span {
      &:nth-child(1) {
        transform: translateX(2px) rotate(41deg);
      }

      &:nth-child(2) {
        opacity: 0;
        transform: translateX(2px);
      }

      &:nth-child(3) {
        transform: translateX(2px) rotate(-41deg);
      }
    }
  }
}

nav {
  & > .inner {
    transition: border-radius 1s;
    border-radius: 2rem;
    &:has(#mobile-nav.active) {
      @media (width <= 1024px) {
        border-radius: 1.25rem;
      }
    }
  }

  & #mobile-nav {
    padding: 0;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
      grid-template-rows 0.3s,
      padding 0.3s,
      opacity 0.2s 0s;

    & .inner {
      width: 100%;
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }

    &.active {
      padding: 24px 0;
      grid-template-rows: 1fr;
      opacity: 1;
      transition:
        grid-template-rows 0.3s,
        padding 0.3s,
        opacity 0.3s 0.15s;
    }
  }
}

footer {
  & .link {
    position: relative;
    width: fit-content;

    &:hover::after {
      width: 100%;
    }
    &::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 0%;
      height: 2px;
      background-color: currentColor;

      transform-origin: left center;
      transition: width 0.3s;
    }
  }
}

[data-reveal] {
  opacity: 0;
}