/* =========================================================
   HOW IT WORKS
========================================================= */

.how-it-works {
  width: 100%;
  padding: 5rem 0;
  overflow: hidden;

  background:
    linear-gradient(
      180deg,
      #e8f1f8 0%,
      #f0f6fb 50%,
      #e5eff7 100%
    );
}

.how-it-works-title {
  margin: 0 0 4rem;

  text-align: center;

  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 2.25rem;
  line-height: 1.2;
  font-weight: 500;

  letter-spacing: -0.025em;

  color: #475569;
}

.how-it-works-canvas {
  width: 100%;
  position: relative;
}

.how-it-works-canvas svg {
  display: block;

  width: 100%;
  height: auto;

  overflow: visible;
}


/* =========================================================
   GHOST NUMBERS
========================================================= */

.ghost-number {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  fill: #d4e3ee;
  opacity: 0.5;

  user-select: none;
}


/* =========================================================
   WAVE
========================================================= */

.wave-shadow {
  fill: none;

  stroke: #e5edf7;
  stroke-width: 7;

  stroke-linecap: round;

  pointer-events: none;
}

.wave-path {
  fill: none;

  stroke: #79c8f7;
  stroke-width: 5.5;

  stroke-linecap: round;

  /*
    JS controls this value.
  */
  stroke-dasharray: 2400;
  stroke-dashoffset: 2400;

  filter:
    drop-shadow(
      0px 2px 6px
      rgba(59, 158, 221, 0.35)
    );

  pointer-events: none;
}


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

.step-group {
  opacity: 0;

  transform:
    translateY(20px);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}


/* =========================================================
   HEXAGON
========================================================= */

.hex-shape {
  fill: transparent;

  stroke: none;

 
}


/* =========================================================
   STEP ICON
========================================================= */
.step-svg-icon {
  fill: none;
  stroke: #2980c4;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate(-14px, -25px) scale(1.4);
}

.deploy-icon {
  transform: translate(-16px, -25px) scale(1.4);
  stroke-width: 2.2;
}

.scale-icon {
  stroke: #008fcd;
  stroke-width: 3;
  transform: translate(-14px, -27px) scale(1.4);
}


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

.step-text {
  opacity: 0;

  transform:
    translateY(20px);

  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.step-label {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 20px;

  font-weight: 700;

  fill: url(#textGradient);
}

.step-description {
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  font-size: 12px;

  fill: #5a7a9a;
}


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

.step-group.active {
  opacity: 1;

  transform:
    translateY(0);
}

.step-group.active .step-text {
  opacity: 1;

  transform:
    translateY(0);
}


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

@media (max-width: 900px) {

  .how-it-works {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .how-it-works-title {
    margin-bottom: 2.5rem;
    font-size: 2rem;
  }

  .how-it-works-canvas {
    padding: 0 1rem;
  }

}


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

@media (max-width: 640px) {

  .how-it-works {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .how-it-works-title {
    margin-bottom: 2rem;

    font-size: 1.8rem;
  }

  /*
    Keep the SVG's aspect ratio but make it slightly
    wider than the screen so the wave remains visible.
  */
  .how-it-works-canvas {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
  }

  .how-it-works-canvas svg {
    min-width: 850px;
  }

}