/* =========================================================
   WORKING PROCESS
========================================================= */

.working-process {
  position: relative;

  width: 100%;

  padding:
    6rem
    1rem
    10rem;

  background:
    linear-gradient(
      180deg,
      #f8f9fc 0%,
      #f0f1f8 50%,
      #f8f9fc 100%
    );

  overflow: hidden;
}


/* =========================================================
   BACKGROUND BLOB
========================================================= */

.working-process__bg-blob {
  position: absolute;

  top: -10%;
  right: 10%;

  width: 500px;
  height: 500px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(120, 180, 255, 0.08) 0%,
      rgba(200, 160, 255, 0.05) 40%,
      transparent 70%
    );

  pointer-events: none;

  filter: blur(40px);
}


/* =========================================================
   CONTAINER
========================================================= */

.working-process__container {
  position: relative;

  z-index: 1;

  width: 100%;
  max-width: 1100px;

  margin: 0 auto;
}


/* =========================================================
   MAIN TITLE
========================================================= */

.working-process__title {
  margin:
    0 0 3rem;

  text-align: center;

  font-size:
    clamp(
      20px,
      3vw,
      28px
    );

  line-height: 1.25;

  font-weight: 400;

  letter-spacing: -0.02em;

  color: #2d1b69;
}


/* =========================================================
   GRID
========================================================= */

.working-process__grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 3rem;

  align-items: start;
}


/* =========================================================
   LEFT COLUMN
========================================================= */

.working-process__left {
  display: flex;

  flex-direction: column;

  gap: 4rem;
}


/* =========================================================
   INTRO
========================================================= */

.working-process__intro {
  padding-left: 52px;
}


/* =========================================================
   HEADING
========================================================= */

.working-process__heading {
  margin: 0 0 12px;

  font-size:
    clamp(
      28px,
      4vw,
      36px
    );

  line-height: 1.1;

  font-weight: 600;

  background:
    linear-gradient(
      135deg,
      #1a8fd1 0%,
      #353a80 35%,
      #7c3aed 65%,
      #4a0750 100%
    );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
}


/* =========================================================
   INTRO TEXT
========================================================= */

.working-process__intro-text {
  max-width: 380px;

  margin: 0;

  font-size: 15px;

  line-height: 1.8;

  color: #374151;
}


/* =========================================================
   STEPS CONTAINER
========================================================= */

.working-process__steps {
  position: relative;
}


/* =========================================================
   VERTICAL LINE — GRAY TRACK
========================================================= */

.working-process__line--track {
  position: absolute;

  left: 17px;

  width: 2px;

  border-radius: 2px;

  background: #e5e7eb;

  z-index: 0;

  pointer-events: none;
}


/* =========================================================
   VERTICAL LINE — GRADIENT PROGRESS
========================================================= */

.working-process__line--progress {
  position: absolute;

  left: 17px;

  width: 2px;

  height: 0;

  border-radius: 2px;

  background:
    linear-gradient(
      180deg,
      #2563eb 0%,
      #6b21a8 100%
    );

  z-index: 1;

  pointer-events: none;

  /*
   * Smooth growth.
   */
  transition:
    height
    0.25s
    cubic-bezier(
      0.4,
      0,
      0.2,
      1
    );
}


/* =========================================================
   STEP
========================================================= */

.working-step {
  position: relative;

  display: flex;

  align-items: flex-start;

  gap: 1.25rem;

  opacity: 0.35;

  z-index: 5;

  transition:
    opacity 0.5s ease;
}


/* =========================================================
   NUMBER CIRCLE
========================================================= */

.working-step__circle {
  width: 36px;
  height: 36px;

  flex-shrink: 0;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  border:
    1.5px solid
    #d1d5db;

  background: #ffffff;

  color: #9ca3af;

  font-size: 13px;

  font-weight: 600;

  position: relative;

  z-index: 10;

  isolation: isolate;

  transition:
    all 0.5s ease;
}


/* =========================================================
   ACTIVE NUMBER CIRCLE
========================================================= */

.working-step.is-active
.working-step__circle {
  border-color: #6b21a8;

  color: #6b21a8;

  background:
    linear-gradient(
      135deg,
      #ede9fe,
      #dbeafe
    );

  box-shadow:
    0 0 0 4px
    rgba(
      139,
      92,
      246,
      0.12
    );

  position: relative;

  z-index: 10;
}


/* =========================================================
   STEP CONTENT
========================================================= */

.working-step__content {
  flex: 1;

  padding-bottom: 2rem;
}


/* =========================================================
   STEP TITLE
========================================================= */

.working-step__title {
  margin:
    0 0 0.5rem;

  font-size: 16px;

  line-height: 1.3;

  font-weight: 600;

  color: #4b5563;

  transition:
    color 0.5s ease;
}


/* =========================================================
   ACTIVE TITLE
========================================================= */

.working-step.is-active
.working-step__title {
  color: #1f2937;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.working-step__description {
  margin: 0;

  font-size: 13px;

  line-height: 1.75;

  color: #6b7280;

  transition:
    color 0.5s ease;
}


/* =========================================================
   ACTIVE DESCRIPTION
========================================================= */

.working-step.is-active
.working-step__description {
  color: #374151;
}


/* =========================================================
   TAG
========================================================= */

.working-step__tag {
  display: inline-block;

  margin-top: 1rem;

  padding:
    6px
    16px;

  border-radius: 9999px;

  font-size: 11px;

  line-height: 1;

  font-weight: 500;

  color: #4b5563;

  background: #ffffff;

  border:
    1px solid
    #e5e7eb;

  transition:
    all 0.5s ease;
}


/* =========================================================
   ACTIVE TAG
========================================================= */

.working-step.is-active
.working-step__tag {
  color: #1f2937;

  border-color: #d1d5db;
}


/* =========================================================
   RIGHT COLUMN
========================================================= */

.working-process__right {
  position: relative;

  min-height: 700px;
}


/* =========================================================
   ORB WRAPPER
========================================================= */

.working-process__orb-wrapper {
  position: absolute;

  top: 0;

  left: 50%;

  transform:
    translateX(-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 1.5rem;

  will-change: top;
}


/* =========================================================
   ORB
========================================================= */

.working-process__orb {
  width: 240px;
  height: 240px;

  position: relative;

  flex-shrink: 0;

  border-radius: 50%;

  overflow: hidden;

  box-shadow:
    0 0 24px
      rgba(10, 144, 144, 0.22),

    0 0 53px
      rgba(10, 144, 144, 0.15),

    0 0 101px
      rgba(10, 144, 144, 0.09),

    0 0 163px
      rgba(10, 144, 144, 0.05),

    0 0 240px
      rgba(10, 144, 144, 0.03);
}


/* =========================================================
   ORB CANVAS
========================================================= */

#workingProcessOrbCanvas {
  display: block;

  width: 100%;
  height: 100%;

  border-radius: 50%;
}


/* =========================================================
   ORB INFO
========================================================= */

.working-process__orb-info {
  text-align: center;

  opacity: 0;

  transition:
    opacity 0.5s ease;
}


/* =========================================================
   ORB BADGE
========================================================= */

.working-process__orb-badge {
  display: inline-block;

  padding:
    6px
    20px;

  border-radius: 9999px;

  font-size: 12px;

  line-height: 1;

  font-weight: 500;

  color: #6b21a8;

  background:
    linear-gradient(
      135deg,
      #ede9fe,
      #dbeafe
    );

  border:
    1px solid
    rgba(
      139,
      92,
      246,
      0.2
    );
}


/* =========================================================
   ORB TITLE
========================================================= */

.working-process__orb-info p {
  max-width: 220px;

  margin:
    10px auto 0;

  font-size: 13px;

  line-height: 1.4;

  font-weight: 500;

  color: #4b5563;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 850px) {

  .working-process__grid {
    grid-template-columns: 1fr;

    gap: 4rem;
  }


  .working-process__right {
    min-height: 420px;

    order: -1;
  }


  .working-process__orb-wrapper {
    position: relative;

    top: 0 !important;

    left: 50%;

    transform:
      translateX(-50%);
  }


  .working-process__left {
    order: 2;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 560px) {

  .working-process {
    padding:
      4rem
      0.75rem
      7rem;
  }


  .working-process__title {
    margin-bottom: 2.5rem;
  }


  .working-process__intro {
    padding-left: 44px;
  }


  .working-process__heading {
    font-size: 28px;
  }


  .working-process__intro-text {
    font-size: 13px;
  }


  .working-process__steps {
    padding-right: 4px;
  }


  .working-step {
    gap: 12px;
  }


  .working-step__circle {
    width: 34px;
    height: 34px;

    font-size: 12px;
  }


  .working-process__line {
    left: 16px;
  }


  .working-step__title {
    font-size: 15px;
  }


  .working-step__description {
    font-size: 12.5px;
  }


  .working-process__orb {
    width: 210px;
    height: 210px;
  }


  .working-process__right {
    min-height: 380px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .working-step,
  .working-step__circle,
  .working-step__title,
  .working-step__description,
  .working-step__tag,
  .working-process__orb-info {
    transition: none;
  }

  .working-process__line--progress {
    transition: none;
  }

}