/* ==========================================================
   ISFAHANWEB DESIGN #1 — PROCESS
   Continuous editorial route
   ========================================================== */

.iw1-process{
  position:relative;
  overflow:hidden;
  padding:120px 0 130px;

  background:
    radial-gradient(circle at 8% 18%,
      rgba(255,138,0,.055),transparent 22%),
    radial-gradient(circle at 92% 82%,
      rgba(46,179,240,.055),transparent 24%),
    #fbf8f2;
}

.iw1-process::before{
  content:"PROCESS";
  position:absolute;
  top:15px;
  inset-inline-start:-35px;

  color:rgba(25,65,84,.035);

  font-size:clamp(120px,18vw,280px);
  line-height:1;
  font-weight:950;
  letter-spacing:-.075em;

  pointer-events:none;
}


/* ---------- Heading ---------- */

.iw1-process-head{
  position:relative;
  z-index:2;

  display:grid;
  grid-template-columns:.65fr 1.35fr;
  align-items:end;
  gap:70px;

  margin-bottom:70px;
}

.iw1-process-head > div{
  padding-bottom:9px;
}

.iw1-process-kicker{
  display:block;
  margin-bottom:8px;

  color:#ff8a00;

  font-size:11px;
  font-weight:950;
  letter-spacing:.08em;
}

.iw1-process-head small{
  color:#627985;
  font-size:13px;
  font-weight:800;
}

.iw1-process-head h2{
  max-width:760px;
  margin:0;

  color:#173747;

  font-size:clamp(43px,5vw,70px);
  line-height:1.08;
  letter-spacing:-.045em;
}

.iw1-process-head h2 strong{
  display:block;
  color:#0795d2;
  font-weight:950;
}


/* ==========================================================
   ROUTE
   ========================================================== */

.iw1-process-route{
  position:relative;
  z-index:2;

  max-width:1180px;
  margin-inline-start:auto;
}


/* continuous spine */

.iw1-process-route::before{
  content:"";

  position:absolute;
  z-index:0;

  top:62px;
  bottom:62px;
  inset-inline-start:52px;

  width:3px;

  border-radius:5px;

  background:
    linear-gradient(
      180deg,
      #7928dc 0%,
      #2eb3f0 34%,
      #ff8a00 67%,
      #8cc63f 100%
    );

  box-shadow:
    0 0 25px rgba(46,179,240,.14);
}


/* ==========================================================
   STEP — NOT A CARD
   ========================================================== */

.iw1-process-step{
  --accent:#2eb3f0;
  --rgb:46,179,240;

  position:relative;
  z-index:1;

  min-height:158px;

  display:grid;
  grid-template-columns:106px 270px minmax(280px,1fr);
  align-items:center;
  gap:30px;

  padding:18px 0;

  border-bottom:1px solid rgba(23,55,71,.09);

  transition:
    padding .35s cubic-bezier(.2,.7,.2,1),
    border-color .3s ease;
}

.iw1-process-step:last-child{
  border-bottom:0;
}


/* individual identity */

.iw1-process-discover{
  --accent:#7928dc;
  --rgb:121,40,220;
}

.iw1-process-structure{
  --accent:#2eb3f0;
  --rgb:46,179,240;
}

.iw1-process-build{
  --accent:#ff8a00;
  --rgb:255,138,0;
}

.iw1-process-grow{
  --accent:#79b936;
  --rgb:121,185,54;
}


/* ---------- Node ---------- */

.iw1-process-node{
  position:relative;
  z-index:3;

  width:76px;
  height:76px;

  display:grid;
  place-items:center;

  border:1px solid rgba(var(--rgb),.22);
  border-radius:50%;

  color:var(--accent);
  background:#fff;

  box-shadow:
    0 13px 35px rgba(26,70,91,.09),
    inset 0 0 0 8px rgba(var(--rgb),.055);

  transition:
    transform .4s cubic-bezier(.2,.75,.2,1),
    background .3s ease,
    color .3s ease,
    box-shadow .3s ease;
}

.iw1-process-node b{
  position:relative;
  z-index:2;

  font-size:23px;
  line-height:1;
  font-weight:950;
}


/* moving satellite */

.iw1-process-node i{
  position:absolute;

  width:13px;
  height:13px;

  top:2px;
  inset-inline-end:7px;

  border:3px solid #fbf8f2;
  border-radius:50%;

  background:var(--accent);

  box-shadow:
    0 0 0 5px rgba(var(--rgb),.10);

  transition:
    transform .45s cubic-bezier(.2,.75,.2,1);
}


/* ---------- Title ---------- */

.iw1-process-title{
  position:relative;
  z-index:3;
}

.iw1-process-title small{
  display:block;
  margin-bottom:7px;

  color:var(--accent);

  font-size:9px;
  font-weight:950;
  letter-spacing:.12em;
}

.iw1-process-title h3{
  margin:0;

  color:#18394a;

  font-size:27px;
  line-height:1.35;

  transition:
    color .3s ease,
    transform .35s ease;
}


/* ---------- Description ---------- */

.iw1-process-step > p{
  position:relative;
  z-index:3;

  max-width:500px;
  margin:0;

  color:#627985;

  font-size:13.5px;
  line-height:2;
}


/* ---------- Huge background word ---------- */

.iw1-process-word{
  position:absolute;
  z-index:-1;

  inset-inline-end:0;
  top:50%;

  transform:translateY(-50%);

  color:rgba(var(--rgb),.045);

  font-size:clamp(58px,7vw,105px);
  line-height:1;
  font-weight:950;
  letter-spacing:-.06em;

  pointer-events:none;

  transition:
    color .35s ease,
    transform .45s cubic-bezier(.2,.75,.2,1);
}


/* subtle alternating rhythm */

.iw1-process-step:nth-child(2) .iw1-process-title,
.iw1-process-step:nth-child(4) .iw1-process-title{
  transform:translateY(8px);
}

.iw1-process-step:nth-child(1) > p,
.iw1-process-step:nth-child(3) > p{
  transform:translateY(-6px);
}


/* ==========================================================
   INTERACTION
   ========================================================== */

.iw1-process-step:hover{
  padding-inline-start:13px;
  border-color:rgba(var(--rgb),.24);
}

.iw1-process-step:hover .iw1-process-node{
  color:#fff;
  background:var(--accent);

  transform:scale(1.08);

  box-shadow:
    0 18px 38px rgba(var(--rgb),.22);
}

.iw1-process-step:hover .iw1-process-node i{
  transform:translate(-9px,7px) scale(1.15);
}

.iw1-process-step:hover .iw1-process-title h3{
  color:var(--accent);
  transform:translateX(-5px);
}

.iw1-process-step:hover .iw1-process-word{
  color:rgba(var(--rgb),.085);
  transform:
    translateY(-50%)
    translateX(-18px);
}


/* ==========================================================
   START / FINISH DETAILS
   ========================================================== */

.iw1-process-route::after{
  content:"از شناخت مسئله تا راه‌اندازی";

  position:absolute;
  bottom:-35px;
  inset-inline-start:20px;

  padding:6px 10px;

  color:#78909b;

  background:#fbf8f2;

  font-size:9px;
  font-weight:850;
}


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

@media (max-width:980px){

  .iw1-process-head{
    grid-template-columns:1fr;
    gap:22px;
  }

  .iw1-process-step{
    grid-template-columns:100px 220px 1fr;
    gap:22px;
  }

  .iw1-process-word{
    font-size:70px;
  }

}


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

@media (max-width:700px){

  .iw1-process{
    padding:78px 0 95px;
  }

  .iw1-process-head{
    margin-bottom:43px;
  }

  .iw1-process-head h2{
    font-size:40px;
  }

  .iw1-process-route{
    padding-inline-start:0;
  }

  .iw1-process-route::before{
    inset-inline-start:31px;
    top:45px;
    bottom:45px;
  }

  .iw1-process-step{
    min-height:0;

    grid-template-columns:68px 1fr;
    gap:8px 17px;

    padding:24px 0;
  }

  .iw1-process-node{
    grid-row:1 / 3;

    width:62px;
    height:62px;
  }

  .iw1-process-node b{
    font-size:19px;
  }

  .iw1-process-title{
    transform:none !important;
  }

  .iw1-process-title h3{
    font-size:23px;
  }

  .iw1-process-step > p{
    grid-column:2;

    max-width:none;

    transform:none !important;

    font-size:12px;
  }

  .iw1-process-word{
    inset-inline-end:0;
    top:16px;

    transform:none;

    font-size:46px;

    opacity:.65;
  }

  .iw1-process-step:hover{
    padding-inline-start:0;
  }

  .iw1-process-step:hover .iw1-process-word{
    transform:none;
  }

  .iw1-process-route::after{
    display:none;
  }

}