@layer reset, base, theme, components, utils;

@layer reset {
  *,
  *::after,
  *::before {
    box-sizing: border-box;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p {
    margin: 0;
    font-size: inherit;
    font-weight: normal;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  a:hover {
    text-decoration: underline;
  }
}

@layer theme {
  :root {
    --bg-color: #0b1d26;
    --foreground-color: #ffffff;
    --accent-color: #fbd784;
  }
}

@layer base {
  body {
    margin: 0;
    font-size: 1.125rem;
    background: var(--bg-color);
    color: var(--foreground-color);

    @media (max-width: 800px) {
      font-size: 1rem;
    }
  }
}

/* Header */
@layer components {
  .main-header-top-bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
    padding-block: 4rem;

    @media (max-width: 1200px) {
      grid-template-columns: 1fr auto;
    }

    @media (max-width: 800px) {
      padding-block-start: 2rem;
    }

    @media (max-width: 500px) {
      align-items: start;
    }
  }

  .brand-logo {
    font-size: 2rem;
    letter-spacing: 3px;
  }

  .main-header-nav {
    display: flex;
    gap: 1rem;

    @media (max-width: 500px) {
      flex-direction: column;
      gap: 0.5rem;
    }
  }

  .main-header {
    background-image: url("./imgs/header-bg.jpg");
    height: 150vh;
    width: 100%;
    background-size: cover;
    background-position: 25% 25%;
    margin-block-end: -50vh;
  }

  .main-header-content {
    max-width: 1750px;
    margin-inline: auto;
    padding-inline: 2rem;
  }

  .main-header-title-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 1000px;
    margin-inline: auto;
    margin-block-start: 10vh;

    @media (max-width: 800px) {
      margin-block-start: 0;
    }
  }

  .main-header-title {
    font-size: 5.5rem;
    text-wrap: balance;
    line-height: 100px;

    @media (max-width: 1200px) {
      font-size: 4rem;
      line-height: normal;
    }

    @media (max-width: 800px) {
      font-size: 3.25rem;
    }

    @media (max-width: 615px) {
      font-size: 2.5rem;
    }
  }

  .scroll-down {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .scroll-down svg {
    width: 16px;
    animation: bounce 1s infinite alternate;

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }

  @keyframes bounce {
    100% {
      translate: 0 25%;
    }
  }

  .header-fade-out {
    height: 51vh;
    background: linear-gradient(to bottom, transparent, var(--bg-color) 75%);
    margin-block-end: -25vh;
  }
}

/* Main Content */
@layer components {
  .content-container {
    max-width: 95rem;
    padding-inline: 2rem;
    display: flex;
    flex-direction: column;
    gap: 11rem;
    margin-inline: auto;
    margin-block-end: 6.75rem;
  }

  .main-content {
    display: contents;
  }

  .read-more-link {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    color: var(--accent-color);
  }

  .read-more-link svg {
    width: 16px;
    rotate: -90deg;
    animation: bounce-horizontal 1s infinite alternate;

    @media (prefers-reduced-motion: reduce) {
      animation: none;
    }
  }

  @keyframes bounce-horizontal {
    100% {
      translate: 25%;
    }
  }

  .section {
    display: flex;
    gap: 8rem;
    align-items: center;

    @media (max-width: 800px) {
      flex-direction: column;
      gap: 4rem;
    }
  }

  .section-text-wrapper {
    position: relative;
    align-self: stretch;
    display: flex;
    align-items: center;
  }

  .section-text-wrapper::before {
    content: attr(data-number);
    position: absolute;
    top: 0;
    left: 0;
    font-size: 13rem;
    font-weight: 900;
    opacity: 0.1;

    @media (max-width: 1200px) {
      font-size: 8rem;
      line-height: 0;
    }
  }

  .section-text-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-inline-start: 8rem;

    @media (max-width: 1200px) {
      margin-inline-start: 0;
    }
  }

  .section-title {
    font-size: 4rem;
    text-wrap: balance;

    @media (max-width: 1200px) {
      font-size: 2.5rem;
    }
  }

  .section-text {
    text-wrap: pretty;
    line-height: 1.75;
  }

  .section-img {
    aspect-ratio: 7 / 9;
    object-fit: cover;
    border-radius: 1rem;
    width: 100%;

    @media (max-width: 1500px) {
      max-width: 400px;
    }

    @media (max-width: 1200px) {
      max-width: 300px;
    }

    @media (max-width: 800px) {
      max-width: 400px;
    }
  }

  @media (max-width: 800px) {
    .section-reversed-order {
      flex-direction: column-reverse;
    }
  }
}

/* Footer */
@layer components {
  .main-footer {
    display: flex;
    justify-content: space-between;
    gap: 2rem;

    @media (max-width: 1200px) {
      flex-direction: column-reverse;
      gap: 4rem;
    }
  }

  .footer-left-side {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .footer-subtitle {
    max-width: 17rem;
    text-wrap: pretty;
    flex-grow: 1;
  }

  .copyright {
    opacity: 0.5;
  }

  .footer-right-side {
    display: flex;
    gap: 14rem;

    @media (max-width: 1200px) {
      gap: 4rem;
    }

    @media (max-width: 600px) {
      display: contents;
    }
  }

  .footer-link-section {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }

  .footer-link-title {
    font-size: 1.5rem;
    color: var(--accent-color);
  }

  .footer-nav {
    display: contents;
  }
}

/* Reusable Components */
@layer components {
  .section-tagline {
    display: flex;
    text-transform: uppercase;
    gap: 1rem;
    align-items: center;
    color: var(--accent-color);
    letter-spacing: 0.33em;
  }

  .section-tagline::before {
    content: "";
    display: block;
    width: 4.5rem;
    height: 2px;
    background-color: var(--accent-color);

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

@layer utils {
  .font-serif {
    font-family: "PT Serif", Georgia, "Times New Roman", serif;
  }

  .font-sans {
    font-family: "Poppins", Arial, sans-serif;
  }
}