/* #region - Hero Section */

.hero-section {
  position: relative;
  overflow-y: hidden;
  overflow-x: clip;
  padding: 7.75rem 0rem var(--space-3xl);
}

#hero-image {
  max-width: 300px;
}

.hero-section > .content-container {
  position: relative;
  z-index: 0;
  pointer-events: none;
}

#hero-text h1 {
  font-size: 2.5rem;
  line-height: 1.4;
}

.hero-section .content-container {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-3xl);
}

#i-am-text {
  display: flex;
  flex-direction: row;
  gap: 1.5ch;
  margin-bottom: var(--space-lm);
}

#intro-text {
  line-height: 1.8;
}

#hero-text {
  width: 100%;
  color: var(--text-color);
  container-type: inline-size;
}

@container (max-width: 31.25rem) {
  #i-am-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0rem;
    margin-bottom: var(--space-lm);
  }

  #hero-text > h1:first-of-type {
    width: 100%;
    text-align: center;
  }
}

.hero-section p {
  font-size: 1.25rem;
}

/* #region - Typewriter */

#typewriter-container {
  display: inline-block;
  white-space: nowrap;
}

#typewriter {
  position: relative;
  color: var(--typewriter-color);
  white-space: nowrap;
}

#typewriter::after {
  position: absolute;
  top: 10%;
  right: -10px;
  width: 6px;
  height: 80%;
  background-color: var(--typewriter-color);
  content: "";
  animation: blink 0.75s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}

@media (max-width: 767px) {
  #typewriter {
    color: var(--typewriter-color-alternate);
  }

  #typewriter::after {
    background-color: var(--typewriter-color-alternate);
  }
}

/* #endregion - Typewriter */

/* #region - Dot grid */

#dot-grid {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: auto;
}

#dot-grid::before,
#dot-grid::after {
  position: absolute;
  inset: 0;
  background-size: 45px 45px;
  background-repeat: repeat;
  content: '';
}

#dot-grid::before {
  background-image: radial-gradient(circle at 4px 4px, var(--dot-grid-default) 3px, transparent 0);
  z-index: 0;
}

#dot-grid::after {
  background-image: radial-gradient(circle at 4px 4px, var(--dot-grid-hover) 4px, transparent 0);
  mask-image: radial-gradient(circle 100px at var(--x, -9999px) var(--y, -9999px), white 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(circle 100px at var(--x, -9999px) var(--y, -9999px), white 0%, transparent 80%);
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
  transition: mask-image 0.2s ease, -webkit-mask-image 0.2s ease;
}

#dot-grid {
  z-index: 0;
}

/* #endregion - Dot grid */

/* #region - Blobs */

.blob {
  position: absolute;
  top: -175px;
  right: -200px;
  width: 500px;
  aspect-ratio: 1/1;
  background-color: #606f9e;
  z-index: -2;
  border-radius: 30% 70% 70% 30% / 30% 40% 70% 70%;
  filter: blur(75px);
  animation: transform 12s linear infinite,
             rotate 12s linear infinite,
             colorChange 6s ease-in-out infinite alternate;
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes transform {
  0%, 100% {
    border-radius: 30% 70% 70% 30% / 30% 40% 70% 70%;
  }
  20% {
    border-radius: 40% 65% 50% 50% / 40% 35% 35% 65%;
  }
  40% {
    border-radius: 30% 65% 65% 35% / 65% 50% 50% 25%;
  }
  60% {
    border-radius: 40% 65% 50% 50% / 30% 30% 70% 75%;
  }
  80% {
    border-radius: 40% 60% 40% 60% / 50% 50% 50% 60%;
  }
}

@keyframes colorChange {
  0%, 50% { background-color: #5772C9; }
  100% { background-color: #606f9e; }
}

.blob.two {
  position: absolute;
  top: 65%;
  left: -175px;
}

/* #endregion - Blobs */

@media (max-width: 767px) {
  .hero-section .content-container {
    flex-direction: column;
    gap: var(--space-2xl);
  }

  .hero-section {
    padding: var(--space-3xl) var(--space-lm) var(--space-2xl);
  }

  #hero-text,
  #i-am-text {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    text-align: center;
  }

  #hero-text p {
    margin-top: var(--space-lm);
  }
}

/* #endregion - Hero section */

/* #region - Cases Section */

.cases-section {
  padding: var(--space-2xl) 0rem;
}

.cases-section .content-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  container-type: inline-size;
}

.header-and-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--text-color);
}

/* #endregion - Cases Section */

/* #region - About Me Section */

.about-me-section {
  position: relative;
}

.about-me-section .content-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-top: var(--space-xl);
  padding-bottom: var(--space-2xl);
  color: var(--text-color);
}

.about-me-section .section-content {
  display: flex;
  align-items: center;
  gap: var(--space-3xl);
}

.about-me-section img {
  max-width: 265px;
}

.text-and-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);

  font-size: 1.25rem;
  line-height: 1.8;
}

.text-and-cta a {
  display: inline-block;
  width: fit-content;
  margin-left: auto;
}

/* #endregion - About Me Section */

/* #region - Floating particles */

.floating-particles {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

@media (max-width: 767px) {
  .about-me-section h1 {
    text-align: center;
  }

  .about-me-section .section-content {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .about-me-section a {
    margin: auto;
  }

  .about-me-section img {
    order: 3;
  }
}

/* #endregion - Floating Particles */