/* Hero Section Styles - Main landing section with profile and introduction - Mobile First */
.hero-section {
  /* Positioning & Display */
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--hero-section-bg);

  /* Box Model */
  min-height: 100vh;
  height: auto;
  padding-left: var(--spacing-md);
  padding-right: var(--spacing-md);
  /* Because of the header size overlap */
  padding-top: calc(var(--spacing-xl) + 6rem);

  & .hero-content {
    /* Positioning & Display */
    display: flex;
    align-items: center;
    flex-direction: column;
    z-index: 2;
    text-align: center;

    /* Box Model */
    gap: 0;
    width: 100%;

    & .hero-image {
      /* Box Model */
      max-width: 220px;
      margin-bottom: 2rem;
      order: -1;
      opacity: 0;

      &.animate {
        transition: opacity 1s ease;
      }

      & img {
        /* Box Model */
        width: 100%;
        height: 100%;
        border-radius: var(--border-radius-circle);

        /* Effects & Transitions */
        box-shadow: 0 10px 20px var(--card-shadow);

        /* Other */
        object-fit: cover;
      }
    }

    & .hero-text {
      /* Box Model */
      width: 100%;

      & h1 {
        /* Typography */
        background: linear-gradient(135deg, var(--accent-color), var(--special-color));
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;

        /* Box Model */
        margin-bottom: 1rem;

        /* Animation properties */
        opacity: 0;
        transition: opacity 0.5s ease;

        &.animate {
          opacity: 1;
        }
      }

      & p {
        /* Box Model */
        margin-bottom: 2rem;
        max-width: 100%;

        /* Typography */
        font-size: 1.05rem;
        line-height: 1.6;
        color: var(--secondary-text);

        /* Animation properties */
        opacity: 0;
        transform: translateY(-20px);
        transition: opacity 0.5s ease, transform 0.5s ease;

        &.animate {
          opacity: 1;
          transform: translateY(0);
        }
      }

      & .hero-subtitle {
        /* Positioning & Display */
        display: inline-block;

        /* Box Model */
        margin-bottom: 1rem;
        padding: 0.5rem 0.75rem;
        border-radius: var(--border-radius-pill);

        /* Typography */
        font-size: 0.85rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--accent-color);

        /* Colors & Backgrounds */
        background-color: rgba(var(--accent-color), 0.07);

        /* Animation properties */
        opacity: 0;
        transition: opacity 0.5s ease;

        &.animate {
          opacity: 1;
        }
      }

      & .hero-buttons {
        /* Positioning & Display */
        display: flex;
        flex-direction: column;
        align-items: center;

        /* Box Model */
        width: 100%;
        gap: 0.5rem;

        /* Animation properties */
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.5s ease, transform 0.5s ease;

        &.animate {
          opacity: 1;
          transform: translateY(0);
        }

        & .action-button {
          /* Box Model */
          margin: 0.5rem 0;
          width: 100%;
          max-width: 300px;
          display: block;

          &.primary-button {
            color: white;
          }
        }
      }
    }
  }

  & .rising-bubbles-container {
    opacity: 0;
    transition: opacity 1s ease;

    &.animate {
      opacity: 1;
    }
  }
}

@keyframes fadeAwayGradient {
  0% {
    background-color: var(--text-color);
  }

  100% {
    background-color: transparent;
  }
}

/* Tablet styles */
@media (min-width: 576px) {
  .hero-section {
    padding: 80px var(--spacing-lg) 40px;

    & .hero-content {
      & .hero-text {
        & .hero-subtitle {
          font-size: 0.9rem;
          padding: 0.5rem 0.9rem;
        }

        & h1 {
          margin-bottom: 1.25rem;
        }
      }
    }
  }
}

/* Larger tablet styles */
@media (min-width: 768px) {
  .hero-section {
    padding-top: 100px;
    padding-bottom: 50px;
    min-height: 80vh;

    & .hero-content {
      gap: 2rem;

      & .hero-image {
        flex: 0 0 auto;
        width: 80%;
        max-width: 280px;
      }

      & .hero-text {
        & p {
          font-size: 1.1rem;
        }

        & .hero-buttons {
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
          gap: var(--spacing-sm);

          & .action-button {
            width: auto;
            margin: 0;
          }
        }
      }
    }
  }
}

/* Desktop styles */
@media (min-width: 992px) {
  .hero-section {
    min-height: 100vh;
    padding: var(--spacing-xxl) var(--spacing-xxl);

    & .hero-content {
      flex-direction: row-reverse;
      text-align: left;
      gap: var(--spacing-xl);

      & .hero-image {
        flex: 0 0 350px;
        margin-top: 2rem;
        margin-bottom: auto;

        & img {
          box-shadow: 0 20px 40px var(--card-shadow);
        }
      }

      & .hero-text {
        text-align: left;

        & .hero-subtitle {
          margin-bottom: 1.5rem;
          padding: 0.5rem 1rem;
          font-size: 0.95rem;
        }

        & h1 {
          margin-bottom: 1.5rem;
        }

        & p {
          margin-bottom: 2.5rem;
          max-width: 600px;
          font-size: clamp(1.1rem, 1.5vw, 1.2rem);
        }

        & .hero-buttons {
          justify-content: flex-start;
        }
      }
    }
  }
}